MultiPath
Represents a composite path consisting of multiple sub-paths. It is more efficient to use composite paths than individually draw the paths. The interface of the MultiPath mirrors that of the Path, but each moveTo command starts a new sub-path.
options OptionsStore
The configuration of this element.
paths any
A collection of the sub-path.
Constructors
MultiPath (options?: ShapeOptions)
Creates a new MultiPath 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
MultiPath - 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
MultiPath - 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.
The following example demonstrates how to clear a clipping path.
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 current sub-path by linking its current end point with its start point.
Returns
MultiPath - 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.
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
MultiPath - 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
MultiPath - 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 lined.
Returns
MultiPath - The current instance to allow chaining.
lineTo
Draws a straight line to the specified absolute coordinates.
Parameters
point Point
The line end point.
Returns
MultiPath - 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
MultiPath - 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
MultiPath - 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
MultiPath - 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.
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.
Parameters
visible boolean
A flag which indicates if the element will be visible.
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
MultiPath - The newly constructed path.
