RectPath

extends Path

The RectPath class represents a rectangular mark. To create a RectPath object, use the mark method in the Scene class, for example:

    let rect = scene.mark("rect", {top: 50, left: 100, width: 200, height: 80, fillColor: "blue"});

Properties

propertyexplanationtypedefault value
leftthe x coordinate of the left hand side of the rectangleNumber0
topthe y coordinate of the top of the rectangleNumber0
right the x coordinate of the right hand side of the rectangleNumber
bottom the y coordinate of the bottom of the rectangleNumber
widththe width of the rectangleNumber100
heightthe height of the rectangleNumber100
area the area of the rectangleNumber
topSegment the top segment of the rectangleSegment
rightSegment the right segment of the rectangleSegment
bottomSegment the bottom segment of the rectangleSegment
leftSegment the left segment of the rectangleSegment

Properties inherited from Path

propertyexplanationtypedefault value
bounds the bounding rectangle of the pathRectangle
x the x coordinate of the center of the path boundsNumber
y the y coordinate of the center of the path boundsNumber
curveModehow the segments are drawnString“linear”
vertices the vertices along the pathArray
segments the segments on the pathArray
firstVertex returns the first vertex of the pathVertex
firstSegment returns the first segment of the pathSegment
fillColorthe fill color of the path if it is closedColorundefined
strokeColorthe stroke color of the pathColor“#ccc”
strokeDashthe dashes and gaps for the path strokeString“none”
strokeWidththe stroke width of the path in pixelsNumber1
opacitythe opacity value of the path (between 0 and 1)Number1
vxShapethe shape of the vertices on this path
possible values: “rect”, “circle”
Stringundefined
vxWidththe width of the vertices on this pathNumber0
vxHeightthe height of the vertices on this pathNumber0
vxRadiusthe radius of the vertices on this path if the shape is “circle”Number0
vxFillColorthe fill color of the vertices on this pathColor“#555”
vxStrokeColorthe stroke color of the vertices on this pathColor“#aaa”
vxStrokeWidththe stroke width of the vertices on this path in pixelsNumber0
vxOpacitythe opacity of the vertices on this pathNumber1

Properties inherited from Mark

propertyexplanationtypedefault value
id the unique id of the pathString
type the type of the pathString“rect”
dataScopethe data scope of the pathDataScopeundefined
opacitythe opacity value of the path (between 0 and 1)Number1
visibilitywhether the path is visible (“visible” or “hidden”)String“visible”

Methods

methodexplanationreturn type
resize(wd, ht)change the width and height of the rectanglevoid

Methods inherited from Path

methodexplanationreturn type
getSVGPathData()returns a string to be used as the d parameter in an SVG path elementString

Methods inherited from Mark

methodexplanationreturn type
contains(x, y)whether this mark contains a point
x (Number): x coordinate of the point
y (Number): y coordinate of the point
Boolean
getScene()returns the scene in which this mark residesScene
duplicate()returns a copy of this markRectPath