Path

Represents a path consisting of linear or cubic Bézier curve segments (see example).

Name	Type	Default	Description
options	OptionsStore		The configuration of this element.
segments	Segment[]		A collection of the path segments.

Constructors

Path

(options?: ShapeOptions)

Creates a new Path with the specified options.

Parameters

options?

ShapeOptions

The configuration options.

Methods

arc
Draws an arc segment with the specified parameters. Angles increase in a clockwise direction with 0 (zero) pointing "right". Negative values or values greater than 360 are normalized.
Parameters startAngle number The start angle of the arc in decimal degrees. endAngle number The end angle of the arc in decimal degrees. rx number The X radius of the arc. ry number The Y radius of the arc. anticlockwise? boolean A flag indicating if the arc should be drawn in a clockwise or anticlockwise direction. By default, it is drawn clockwise.
Returns Path The current instance to allow chaining.

arcTo
Draws an arc segment to the specified point. The parameters are based on the SVG Arc syntax.
Parameters end number[] | Point The end point of the arc. rx number The x radius of the arc. ry number The y radius of the arc. largeArc boolean A flag indicating if the arc should be greater or less than 180 degrees. sweep boolean A flag indicating if the arc should begin moving at negative or positive angles.
Returns Path The current instance to allow chaining.

bbox
Returns the bounding box of the element with applied transformations.
Returns Rect The bounding box of the element with transformations applied.

className
Gets the class attribute of the element. The class will be rendered only for SVG output.
Returns string the value of the class attribute of the element.

className
Sets the class attribute of the element. The class will be rendered only for SVG output.
Parameters className string The value of the class attribute.

clip
Gets the clipping path for this element.
Returns Path The clipping path for this element.

clip
Sets the clipping path for this element. The Path instance will be monitored for changes. Can be replaced by calling the clip method. The following example demonstrates how to set a clipping path on a Circle. Change Theme Theme Loading ... The following example demonstrates how to clear a clipping path. Change Theme Theme Loading ...
Parameters clip Path The element clipping path.

clippedBBox
Returns the bounding box of the element with clipping and transformations applied. This is the rectangle that will fit around the actual rendered element.
Returns Rect The bounding box of the element with clipping and transformations applied.

close
Closes the path by linking the current end point with the start point.
Returns Path The current instance to allow chaining.

containsPoint
Returns true if the shape contains the specified point.
Parameters point Point The point that should be checked.
Returns boolean value indicating if the shape contains the point.

curveFromPoints
Creates a smooth curve from the given points.
Parameters points Point[] | number[][] An array of Point objects or [x, y] arrays. options? ShapeOptions The configuration options for the path.
Returns Path The newly constructed path.

curveTo
Draws a cubic Bézier curve (with two control points). A quadratic Bézier curve (with one control point) can be plotted by making the control point equal.
Parameters controlOut number[] | Point The first control point for the curve. controlIn number[] | Point The second control point for the curve. endPoint number[] | Point The curve end point.
Returns Path The current instance to allow chaining.

fill
Sets the fill of the Shape (see the basic usage example).
Parameters color string The fill color to set. opacity? number The fill opacity to set.
Returns Path The current instance to allow chaining.

fromArc
Creates a curve from the given arc.
Parameters arc Arc The source arc to trace. options? ShapeOptions The configuration options for the path.
Returns Path The newly constructed path.

fromPoints
Creates a straight path from the given points.
Parameters points Point[] | number[][] An array of Point objects or [x, y] arrays. options? ShapeOptions The configuration options for the path.
Returns Path The newly constructed path.

fromRect
Creates a straight path from the given rectangle.
Parameters rect Rect The source rectangle to trace. options? ShapeOptions The configuration options for the path.
Returns Path The newly constructed path.

lineTo
Draws a straight line to the specified absolute coordinates.
Parameters x number The end X coordinate of the line. y number The end Y coordinate of the line.
Returns Path The current instance to allow chaining.

lineTo
Draws a straight line to the specified absolute coordinates.
Parameters point Point The end point of the line.
Returns Path The current instance to allow chaining.

moveTo
Clears all existing segments and moves the starting point to the specified absolute coordinates.
Parameters x number The starting X coordinate. y number The starting Y coordinate.
Returns Path The current instance to allow chaining.

moveTo
Clears all existing segments and moves the starting point to the specified absolute coordinates.
Parameters point Point The end point of the line.
Returns Path The current instance to allow chaining.

opacity
Gets the element opacity.
Returns number The current element opacity.

opacity
Sets the opacity of the element. Change Theme Theme Loading ...
Parameters opacity number The element opacity. Ranges from 0 (completely transparent) to 1 (completely opaque).

parse
Parses a path encoded in an SVG Path Data format.
Parameters svgPath string The path encoded in SVG Path Data format. options? ShapeOptions The configuration options for the path.
Returns Path The newly constructed path.

stroke
Sets the stroke of the Shape.
Parameters color string The stroke color to set. width? number The stroke width to set. opacity? number The stroke opacity to set.
Returns Path The current instance to allow chaining.

toString
Converts the path to a string using the SVG path syntax. The parse method can convert the string back to a path. Only the path shape is preserved in the string.
Parameters digits? number Number of decimal digits to round point coordinates to.
Returns string The path shape represented using SVG syntax.

transform
Gets the transformation of the element.
Returns Transformation The current transformation on the element.

transform
Sets the transformation of the element. Change Theme Theme Loading ...
Parameters transform Transformation The transformation to apply to the element.

visible
Gets the visibility of the element.
Returns boolean true if the element is visible. Otherwise, returns false.

visible
Sets the visibility of the element. Change Theme Theme Loading ...
Parameters visible boolean A flag which indicates if the element will be visible.