Path
Represents a path consisting of linear or cubic Bézier curve segments (see example).
Definition
Package:@progress/kendo-drawing
Methods
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.
The start angle of the arc in decimal degrees.
endAnglenumberThe end angle of the arc in decimal degrees.
rxnumberThe X radius of the arc.
rynumberThe Y radius of the arc.
anticlockwise?booleanA 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.
Draws an arc segment to the specified point. The parameters are based on the SVG Arc syntax.
The end point of the arc.
rxnumberThe x radius of the arc.
rynumberThe y radius of the arc.
largeArcbooleanA flag indicating if the arc should be greater or less than 180 degrees.
sweepbooleanA flag indicating if the arc should begin moving at negative or positive angles.
Returns:- The current instance to allow chaining.
Returns the bounding box of the element with applied transformations.
An optional parent transformation to apply when calculating the bounding box.
Returns:- The bounding box of the element with transformations applied.
Gets the class attribute of the element. The class will be rendered only for SVG output.
string
the value of the class attribute of the element.
Sets the class attribute of the element. The class will be rendered only for SVG output.
The value of the class attribute.
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.
The element clipping path.
Returns the bounding box of the element with clipping and transformations applied. This is the rectangle that will fit around the actual rendered element.
An optional parent transformation to apply when calculating the bounding box.
Returns:- The bounding box of the element with clipping and transformations applied.
Closes the path by linking the current end point with the start point.
- The current instance to allow chaining.
Returns true if the shape contains the specified point.
The point that should be checked.
Returns:boolean
value indicating if the shape contains the point.
Creates a smooth curve from the given points.
An array of Point objects or [x, y] arrays.
The configuration options for the path.
Returns:- The newly constructed path.
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.
Sets the fill of the Shape (see the basic usage example).
The fill color to set.
opacity?numberThe fill opacity to set.
Returns:- The current instance to allow chaining.
Creates a curve from the given arc.
The source arc to trace.
options?ShapeOptionsThe configuration options for the path.
Returns:- The newly constructed path.
Creates a straight path from the given points.
An array of Point objects or [x, y] arrays.
The configuration options for the path.
Returns:- The newly constructed path.
Creates a straight path from the given rectangle.
The source rectangle to trace.
options?ShapeOptionsThe configuration options for the path.
Returns:- The newly constructed path.
Draws a straight line to the specified absolute coordinates.
The end X coordinate of the line.
ynumberThe end Y coordinate of the line.
Returns:- The current instance to allow chaining.
Clears all existing segments and moves the starting point to the specified absolute coordinates.
The starting X coordinate.
ynumberThe starting Y coordinate.
Returns:- The current instance to allow chaining.
Gets the element opacity.
number
The current element opacity.
Sets the opacity of the element.
The element opacity. Ranges from 0 (completely transparent) to 1 (completely opaque).
Parses a path encoded in an SVG Path Data format.
The path encoded in SVG Path Data format.
options?ShapeOptionsThe configuration options for the path.
Returns:- The newly constructed path.
Returns the bounding box of the element geometry without transformations, clipping, or stroke expansion applied.
- The raw bounding box of the element.
Sets the stroke of the Shape.
The stroke color to set.
width?numberThe stroke width to set.
opacity?numberThe stroke opacity to set.
Returns:- The current instance to allow chaining.
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.
Number of decimal digits to round point coordinates to.
Returns:string
- The path shape represented using SVG syntax.
Gets the transformation of the element.
- The current transformation on the element.
Sets the transformation of the element.
The transformation to apply to the element.
Gets the visibility of the element.
boolean
true if the element is visible. Otherwise, returns false.
Sets the visibility of the element.
A flag which indicates if the element will be visible.
Properties
The configuration of this element.