# Vertex

The Vertex class represents a vertex (sometimes called an anchor point) in a path. For example, a triangle has three vertices; a rectangle has four vertices. A vertex can have its own visual styles such as geometric shape, fill color and size. By default, a vertex is invisible (width and height set to 0).

Vertices are automatically created when their parent path objects are instantiated. For rectangles and circles, the positions of the vertices are set automatically based on the top, left, width and height parameters of the RectPath, or the x, y and radius parameters of the CirclePath. For lines, you can specify the positions of the start and end vertices as x1, y1, x2, y2 parameters. For polyline, you can specify the positions of the vertices as the vertices parameter. The API reference for Path contains some examples. You can also manually add a vertex, using the *addVertex* method in the Path class.

The properties of a vertex can be set individually. You can also set the properties of all the vertices on a path through the following path properties: vxShape, vxWidth, vxHeight, vxRadius, vxFillColor, vxStrokeColor, vxStrokeWidth, vxOpacity.

### Properties

property | explanation | type | default value |
---|---|---|---|

id | the unique id of the vertex | String | |

type | the type of the vertex | String | “vertex” |

x | the x coordinate of the vertex center | Number | 0 |

y | the y coordinate of the vertex center | Number | 0 |

center | get the center point of the vertex | Point | |

dataScope | the data scope of the vertex | DataScope | undefined |

parent | the parent mark of the vertex | Path | |

shape | the shape of the vertex, currently supporting “rect” and “circle” | String | undefined |

width | the width of the vertex shape | Number | 0 |

height | the height of the vertex shape | Number | 0 |

radius | the radius of the vertex if the shape is “circle” | Number | 0 |

fillColor | the fill color of the vertex shape | Color | undefined |

opacity | the opacity of the vertex shape | Number | undefined |

strokeWidth | the stroke width of the vertex shape | Number | 0 |

strokeColor | the stroke color of the vertex shape | Color | “#aaa” |

### Methods

method | explanation | return type |
---|---|---|

translate(dx, dy) | move the vertex by the given parameters dx (Number): number of pixels to move in the x direction dy (Number): number of pixels to move in the y direction | void |