Path
Represents a path consisting of linear or cubic Bézier curve segments (see example).
options
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?
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
- 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
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
- The current instance to allow chaining.
bbox
Returns the bounding box of the element with applied transformations.
Returns
- The bounding box of the element with transformations applied.
clip
Gets the clipping path for this element.
Returns
- 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.
The following example demonstrates how to clear a clipping path.
Parameters
clip
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
- 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
- The current instance to allow chaining.
containsPoint
Returns true if the shape contains the specified point.
Parameters
point
The point that should be checked.
Returns
boolean
value indicating if the shape contains the point.
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
Point | number[]
The first control point for the curve.
controlIn
Point | number[]
The second control point for the curve.
endPoint
Point | number[]
The curve end point.
Returns
- 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
- The current instance to allow chaining.
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
- The current instance to allow chaining.
lineTo
Draws a straight line to the specified absolute coordinates.
Parameters
point
The end point of the line.
Returns
- 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
- The current instance to allow chaining.
moveTo
Clears all existing segments and moves the starting point to the specified absolute coordinates.
Parameters
point
The end point of the line.
Returns
- The current instance to allow chaining.
opacity
Gets the element opacity.
Returns
number
The current element opacity.
opacity
Sets the opacity of the element.
Parameters
opacity
number
The element opacity. Ranges from 0 (completely transparent) to 1 (completely opaque).
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
- The current instance to allow chaining.
transform
Gets the transformation of the element.
Returns
- The current transformation on the element.
transform
Sets the transformation of the element.
Parameters
transform
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.
Parameters
visible
boolean
A flag which indicates if the element will be visible.
fromArc
Creates a curve from the given arc.
Parameters
arc
The source arc to trace.
options?
The configuration options for the path.
Returns
- 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?
The configuration options for the path.
Returns
- The newly constructed path.
fromRect
Creates a straight path from the given rectangle.
Parameters
rect
The source rectangle to trace.
options?
The configuration options for the path.
Returns
- The newly constructed path.
parse
Parses a path encoded in an SVG Path Data format.
Parameters
svgPath
string
The path encoded in SVG Path Data format.
options?
The configuration options for the path.
Returns
- The newly constructed path.
