New to Kendo UI for AngularStart a free 30-day trial

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.

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.

Parameters:startAnglenumber

The start angle of the arc in decimal degrees.

endAnglenumber

The end angle of the arc in decimal degrees.

rxnumber

The X radius of the arc.

rynumber

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.

Draws an arc segment to the specified point. The parameters are based on the SVG Arc syntax.

Parameters:endPoint | number[]

The end point of the arc.

rxnumber

The X radius of the arc.

rynumber

The Y radius of the arc.

largeArcboolean

A flag indicating if the arc should be greater or less than 180 degrees.

sweepboolean

A flag indicating if the arc should begin moving at negative or positive angles.

Returns:

MultiPath

  • The current instance to allow chaining.

Returns the bounding box of the element with applied transformations.

Parameters:transformation?Transformation

An optional parent transformation to apply when calculating the bounding box.

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:classNamestring

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:clipPath

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.

Parameters:transformation?Transformation

An optional parent transformation to apply when calculating the bounding box.

Returns:

Rect

  • The bounding box of the element with clipping and transformations applied.

Closes the current sub-path by linking its current end point with its start point.

Returns:

MultiPath

  • The current instance to allow chaining.

Returns true if the shape contains the specified point.

Parameters:pointPoint

The point that should be checked.

Returns:

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.

Parameters:controlOutPoint | number[]

The first control point for the curve.

controlInPoint | number[]

The second control point for the curve.

endPointPoint | number[]

The curve end point.

Returns:

MultiPath

  • The current instance to allow chaining.

Sets the fill of the Shape (see the basic usage example).

Parameters:colorstring

The fill color to set.

opacity?number

The fill opacity to set.

Returns:

MultiPath

  • The current instance to allow chaining.

Draws a straight line to the specified absolute coordinates.

Parameters:xnumber

The end X coordinate of the line.

ynumber

The end Y coordinate of the lined.

Returns:

MultiPath

  • The current instance to allow chaining.

Draws a straight line to the specified absolute coordinates.

Parameters:pointPoint

The line end point.

Returns:

MultiPath

  • The current instance to allow chaining.

Clears all existing segments and moves the starting point to the specified absolute coordinates.

Parameters:xnumber

The starting X coordinate.

ynumber

The starting Y coordinate.

Returns:

MultiPath

  • The current instance to allow chaining.

Clears all existing segments and moves the starting point to the specified absolute coordinates.

Parameters:pointPoint

The end point of the line.

Returns:

MultiPath

  • The current instance to allow chaining.

Gets the element opacity.

Returns:

number

The current element opacity.

Sets the opacity of the element.

Parameters:opacitynumber

The element opacity. Ranges from 0 (completely transparent) to 1 (completely opaque).

Parses a path encoded in an SVG Path Data format.

Parameters:svgPathstring

The path encoded in SVG Path Data format.

options?ShapeOptions

The configuration options for the path.

Returns:

MultiPath

  • The newly constructed path.

Returns the bounding box of the element geometry without transformations, clipping, or stroke expansion applied.

Returns:

Rect

  • The raw bounding box of the element.

Sets the stroke of the Shape.

Parameters:colorstring

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.

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.

Returns:

Transformation

  • The current transformation on the element.

Sets the transformation of the element.

Parameters:transformTransformation

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:visibleboolean

A flag which indicates if the element will be visible.

Properties

The configuration of this element.

A collection of the sub-path.