| title | page_title | res_type |
|---|---|---|
MultiPath |
API reference for methods and fields of Kendo UI DataViz Drawing MultiPath |
api |
Draws a composite path consisting of multiple sub-paths. Using composite paths is more efficient than drawing the paths individually.
The interface of MultiPath mirrors that of Path, but each moveTo command starts a new sub-path.
<div id="surface" style="width: 250px; height: 250px;"></div>
<script>
var draw = kendo.drawing;
var multiPath = new draw.MultiPath()
.moveTo(100, 200).curveTo([100, 100], [250, 100], [250, 200]).close()
.moveTo(150, 150).lineTo(200, 150).close();
var surface = draw.Surface.create($("#surface"));
surface.draw(multiPath);
</script>
The configuration options.
The element clipping path. Inherited from Element.clip
The element cursor. Inherited from Element.cursor
The fill options of the shape.
The element opacity. Inherited from Element.opacity
The stroke options of the shape.
The tooltip options of the shape.
The transformation to apply to this element. Inherited from Element.transform
A flag, indicating if the element is visible. Inherited from Element.visible
A collection of sub-paths.
Returns the bounding box of the element with transformations applied. Inherited from Element.bbox
kendo.geometry.Rect The bounding box of the element with transformations applied.
Gets or sets the element clipping path. Inherited from Element.clip
The element clipping path.
kendo.drawing.Path The current element clipping path.
Returns the bounding box of the element with clipping and transformations applied. Inherited from Element.clippedBBox
kendo.geometry.Rect The bounding box of the element with clipping transformations applied.
Closes the current sub-path by linking its current end point with its start point.
<div id="surface" style="width: 250px; height: 250px;"></div>
<script>
var draw = kendo.drawing;
var multiPath = new draw.MultiPath()
.moveTo(100, 200).curveTo([100, 100], [250, 100], [250, 200]);
// The following commands are interchangable
multiPath.close();
multiPath.lineTo(100, 200);
// Draw the next sub-path
multiPath.moveTo(150, 150).lineTo(200, 150).close();
var surface = draw.Surface.create($("#surface"));
surface.draw(multiPath);
</script>
kendo.drawing.MultiPath The current instance to allow chaining.
Returns true if the shape contains the specified point.
The point that should be checked.
Boolean value indicating if the shape contains the point.
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.
<div id="surface" style="width: 250px; height: 250px;"></div>
<script>
var draw = kendo.drawing;
var multiPath = new draw.MultiPath()
.moveTo(100, 200).curveTo([100, 100], [250, 100], [250, 200]).close()
.moveTo(150, 150).lineTo(200, 150).close();
var surface = draw.Surface.create($("#surface"));
surface.draw(multiPath);
</script>
The first control point for the curve.
The second control point for the curve.
The curve end point.
kendo.drawing.MultiPath The current instance to allow chaining.
Sets the shape fill.
The fill color to set.
The fill opacity to set.
kendo.drawing.MultiPath The current instance to allow chaining.
Draws a straight line to the specified absolute coordinates.
<div id="surface" style="width: 250px; height: 250px;"></div>
<script>
var draw = kendo.drawing;
var geom = kendo.geometry;
var multiPath = new draw.MultiPath()
.moveTo(100, 200);
// The following commands are interchangeable
multiPath.lineTo(200, 200);
multiPath.lineTo([200, 200]);
multiPath.lineTo(new geom.Point(200, 200));
multiPath.moveTo(150, 150).lineTo(200, 150).close();
var surface = draw.Surface.create($("#surface"));
surface.draw(multiPath);
</script>
The line end X coordinate or a Point/Array with X and Y coordinates.
The line end Y coordinate.
Optional if the first parameter is a Point/Array.
kendo.drawing.MultiPath The current instance to allow chaining.
Creates a new sub-path or clears all segments and moves the starting point to the specified absolute coordinates.
<div id="surface" style="width: 250px; height: 250px;"></div>
<script>
var draw = kendo.drawing;
var geom = kendo.geometry;
var multiPath = new draw.MultiPath();
// The following commands are interchangeable
multiPath.moveTo(100, 200);
multiPath.moveTo([100, 200]);
multiPath.moveTo(new geom.Point(100, 200));
multiPath.lineTo(200, 200).close();
multiPath.moveTo(150, 150).lineTo(200, 150).close();
var surface = draw.Surface.create($("#surface"));
surface.draw(multiPath);
</script>
The starting X coordinate or a Point/Array with X and Y coordinates.
The starting Y coordinate.
Optional if the first parameter is a Point/Array.
kendo.drawing.MultiPath The current instance to allow chaining.
Gets or sets the element opacity. Inherited from Element.opacity
If set, the stroke and fill opacity will be multiplied by the element opacity.
The element opacity. Ranges from 0 (completely transparent) to 1 (completely opaque).
Number The current element opacity.
Sets the shape stroke.
The stroke color to set.
The stroke width to set.
The stroke opacity to set.
kendo.drawing.MultiPath The current instance to allow chaining.
Gets or sets the transformation of the element. Inherited from Element.transform
The transformation to apply to the element.
kendo.geometry.Transformation The current transformation on the element.
Gets or sets the visibility of the element. Inherited from Element.visible
A flag indicating if the element should be visible.
Boolean true if the element is visible; false otherwise.