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#