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

propertyexplanationtypedefault value
id the unique id of the vertexString
type the type of the vertexString“vertex”
xthe x coordinate of the vertex centerNumber0
ythe y coordinate of the vertex centerNumber0
center get the center point of the vertexPoint
dataScopethe data scope of the vertexDataScopeundefined
parent the parent mark of the vertexPath
shapethe shape of the vertex, currently supporting “rect” and “circleStringundefined
widththe width of the vertex shapeNumber0
heightthe height of the vertex shapeNumber0
radiusthe radius of the vertex if the shape is “circle”Number0
fillColorthe fill color of the vertex shapeColorundefined
opacitythe opacity of the vertex shapeNumberundefined
strokeWidththe stroke width of the vertex shapeNumber0
strokeColorthe stroke color of the vertex shapeColor“#aaa”

Methods

methodexplanationreturn 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