Path

extends Mark
Subclasses: Rect, Area, Polygon, Arc, Ring

The Path class represents a geometric path consisting of multiple vertices connected by segments. To create a path object, use the mark method in the Scene class, for example:

    let path = scene.mark("path", {
                  vertices: [
                        [200, 50], [350, 50], [500, 50]
                  ],
                  strokeColor: "#95D0F5"
              });

A straight line is also represented as a path object in Mascot. The following code returns a Path object with two vertices.

    let line = scene.mark("line", {x1: 0, y1: 20, x2: 300, y2: 50});

Properties#

property	explanation	type	default value
curveMode	how the segments are drawn, possible values	String	“linear”
firstSegment	returns the first segment of the path	Segment
firstVertex	returns the first vertex of the path	Vertex
segments	the segments on the path	Array of Segment
vertices	the vertices along the path	Array of Vertex
vxFillColor	the fill color of the vertices on this path	Color	“#555555”
vxHeight	the height of the vertices on this path	Number	0
vxOpacity	the opacity of the vertices on this path	Number	1
vxRadius	the radius of the vertices on this path if the shape is “circle”	Number	0
vxShape	the shape of the vertices on this path possible values: “rect”, “circle”	String	undefined
vxStrokeColor	the stroke color of the vertices on this path	Color	“#aaaaaa”
vxStrokeWidth	the stroke width of the vertices on this path in pixels	Number	0
vxWidth	the width of the vertices on this path	Number	0
x	the x coordinate of the center of the path bounds	Number
y	the y coordinate of the center of the path bounds	Number

Properties inherited from Mark#

property	explanation	type	default value
bounds	the bounding rectangle of the path	Rectangle
dataScope	the data scope of the path	DataScope	undefined
fillColor	the fill color of the path if it is closed	Color	“none”
id	the unique id of the path	String
opacity	the opacity value of the path (between 0 and 1)	Number	1
strokeColor	the stroke color of the path	Color	“#ccc”
strokeDash	the dashes and gaps for the path stroke	String	“none”
strokeWidth	the stroke width of the path in pixels	Number	1
type	the type of the path	String	“path”
visibility	whether the path is visible (“visible” or “hidden”)	String	“visible”

Methods#