New to KendoReact? Start a free 30-day trial
Represents a path consisting of linear or cubic Bézier curve segments (see example).
(options?: ShapeOptions)
Creates a new Path with the specified options.
ShapeOptions
The configuration options.
|
---|
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.
|
|
|
---|
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 | |
---|
Path
|
- The current instance to allow chaining.
|
|
|
---|
Returns the bounding box of the element with applied transformations.
|
Returns | |
---|
Rect
|
- 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.
|
Returns | |
---|
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.
|
Parameters | | |
---|
className
|
string
|
The value of the class attribute.
|
|
|
---|
Gets the clipping path for this element.
|
Returns | |
---|
Path
|
- The clipping path for this element.
|
|
|
---|
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.
|
|
|
---|
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.
|
|
|
---|
Closes the path by linking the current end point with the start point.
|
Returns | |
---|
Path
|
- The current instance to allow chaining.
|
|
|
---|
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.
|
|
|
---|
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.
|
|
|
---|
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 | |
---|
Path
|
- The current instance to allow chaining.
|
|
|
---|
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.
|
|
|
---|
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.
|
|
|
---|
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.
|
|
|
---|
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.
|
|
|
---|
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.
|
|
|
---|
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.
|
|
|
---|
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.
|
|
|
---|
Gets the element opacity.
|
Returns | |
---|
number
|
The current element opacity.
|
|
|
---|
Sets the opacity of the element.
|
Parameters | | |
---|
opacity
|
number
|
The element opacity. Ranges from 0 (completely transparent) to 1 (completely opaque).
|
|
|
---|
Sets the stroke of the Shape.
|
|
Returns | |
---|
Path
|
- 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.
|
Parameters | | |
---|
digits?
|
number
|
Number of decimal digits to round point coordinates to.
|
|
Returns | |
---|
string
|
- The path shape represented using SVG syntax.
|
|
|
---|
Gets the transformation of the element.
|
|
|
---|
Sets the transformation of the element.
|
Parameters | | |
---|
transform
|
Transformation
|
The transformation to apply to the element.
|
|
|
---|
Gets the visibility of the element.
|
Returns | |
---|
boolean
|
true if the element is visible. Otherwise, returns false .
|
|
|
---|
Sets the visibility of the element.
|
Parameters | | |
---|
visible
|
boolean
|
A flag which indicates if the element will be visible.
|
|