# class anychart.graphics.vector.Path Improve this Doc

Extends: anychart.graphics.vector.Shape

Path class.

Path is sequence of segments of different type, it can be opened or closed.

To define the internal fill this rule is used EVEN-ODD.

Path always starts with anychart.graphics.vector.Path#moveTo command.

**Do not invoke constructor directly.** Use anychart.graphics.vector.Stage#path or
anychart.graphics.vector.Layer#path to create stage or layer bound path.

To create unbound path use anychart.graphics#path

See also:

anychart.graphics.vector.Stage#path

anychart.graphics.vector.Layer#path

anychart.graphics#path

## Methods Overview

Coloring | |

fill() | Fill settings. |

stroke() | Stroke settings. |

Events | |

listen() | Adds an event listener. |

listenOnce() | Adds an event listener that is removed automatically after the listener fired once. |

removeAllListeners() | Removes all listeners from this listenable. |

unlisten() | Removes an event listener which was added with listen() or listenOnce(). |

Interactive | |

drag() | Dragging setting. |

Interactivity | |

visible() | Visibility flag |

Size and Position | |

appendTransformationMatrix() | Combines the current transformation with the given transformation matrix. |

getAbsoluteBounds() | Gets element bounds in absolute coordinates (root element coordinate system). |

getAbsoluteHeight() | Returns height within root bounds. |

getAbsoluteWidth() | Returns width within root bounds. |

getAbsoluteX() | Returns an absolute X (root element coordinate system). |

getAbsoluteY() | Returns an absolute Y (root element coordinate system). |

getBounds() | Returns the bounds. |

getHeight() | Returns the height. |

getRotationAngle() | Returns the current rotation angle in degrees. |

getTransformationMatrix() | Returns the current transformation matrix. |

getWidth() | Returns the width. |

getX() | Returns X in the coordinate system of the parent. |

getY() | Returns Y in the coordinate system of the parent. |

rotate() | Rotates a shape around the given rotation point. |

rotateByAnchor() | Rotates a shape around the given anchor. |

scale() | Scales a shape. Scaling center is set in the coordinate system of the parent. |

scaleByAnchor() | Scales a shape by anchor. Scaling center is set as an anchor. |

setPosition() | Sets top left corner of a shape (transformation taken into account) in the coordinate system of the parent. |

setRotation() | Rotates a shape around the given point. |

setRotationByAnchor() | Rotates a shape around the given anchor. |

setTransformationMatrix() | Sets the transformation matrix. |

translate() | Moves a shape taking an account the current transformation. |

zIndex() | Z-index setting. |

Miscellaneous | |

arcTo() | Adds a command to the path that draws an arc of an ellipse. |

arcToAsCurves() | This method is similar to anychart.graphics.vector.Path#arcTo, but in this case the arc is approximated by Bezier curves. |

arcToByEndPoint() | Adds a command to the path that draws an arc of an ellipse. |

attr() | Attribute setting |

circularArc() | Adds a command to the path that draws a circular arc. |

clear() | Resets all path operations. |

clip() | Clipping setting. |

close() | Adds a command that closes the path by connecting the last point with the first straight line. |

cursor() | Cursor type. |

curveTo() | Adds specified points to the path, drawing sequentially a cubic Bezier curve from the current point to the next. |

desc() | Description setting |

disablePointerEvents() | Pointer events setting. |

disableStrokeScaling() | Vector effect property |

dispose() | Disposes element completely. |

domElement() | Returns DOM element if element is rendered. |

getCurrentPoint() | Returns the last coordinates added to the path. |

getLength() | Gets path length. |

getStage() | Stage object (to which the given element is bound). |

hasParent() | Whether parent element is set. |

id() | Element identifier |

lineTo() | Adds specified points to the current path, drawing sequentially a straight line through the specified coordinates. |

moveTo() | Moves path cursor position to a specified coordinate. |

parent() | Parent layer. |

quadraticCurveTo() | Adds specified points to the path, drawing sequentially a quadratic Bezier curve from the current point to the next. |

remove() | Current element removes itself from the parent layer. |

strokeThickness() | Stroke thickness setting. |

title() | Title setting |

## Methods Description

### appendTransformationMatrix

Illustration shows a shape transformation with the several calls of

`.appendTransformationMatrix(0, 0.5, 1, 0, 0, 0)`

**Params:**

Name | Type | Description |
---|---|---|

m00 | number | Scale X. |

m10 | number | Shear Y. |

m01 | number | Shear X. |

m11 | number | Scale Y. |

m02 | number | Translate X. |

m12 | number | Translate Y. |

**Returns:**

**Try it:**

### arcTo

An ellipse with radius

**rx, ry**, starting from an angle

**fromAngle**, with an angular length

**extent**.

The positive direction is considered the direction from a positive direction of the X-axis to a positive direction of the Y-axis, that is clockwise.

The black line marks the current path.

The red point is the point from which the arc is drawn.

According to the given parameters, an ellipse is plotted with radii

**rx**and

**ry**, and an angle

**fromAngle**, which defines the position of the ellipse against the red point.

Then an ellipse arc of a given angular length

**extend**is drawn (the arc is marked green if

**extend > 0**and red if

**extend < 0**).

**Params:**

Name | Type | Description |
---|---|---|

rx | number | The X-axis radius of the ellipse. |

ry | number | The Y-axis radius of the ellipse. |

fromAngle | number | The starting angle, measured in degrees in a clockwise direction. |

extent | number | The angular length of the arc. |

**Returns:**

**Try it:**

### arcToAsCurves

**Attention!**The method is recommended when transformations are used: using the ordinary anychart.graphics.vector.Path#arcTo and anychart.graphics.vector.Path#arcToByEndPoint methods with transformations leads to productivity loss.

java.awt.geom.ArcIterator algorithm adaptation

You can find an illustration of how the method works, and examples in the anychart.graphics.vector.Path#arcTo method description.

The only difference is that this method draws an arc using a set of curves.

**Params:**

Name | Type | Description |
---|---|---|

rx | number | The X-axis radius of the ellipse. |

ry | number | The Y-axis radius of the ellipse. |

fromAngle | number | The starting angle, measured in degrees in a clockwise direction. |

extent | number | The angular length of the arc. |

**Returns:**

### arcToByEndPoint

An arc of an ellipse with radius

**rx, ry**

**rx, ry**from the current point to a point

**x, y**.

The

**largeArc**and

**clockwiseArc**flags define which of the 4 possible arcs is drawn.

Read more at https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes

There are several ways to get from point

**A**a to point

**B**, given the same

**x, y, rx, ry**parameters. The way to get to point

**B**, is defined by the pair

**largeArc, clockwiseArc**:

**largeArc**- defines if the larger (red and blue) or the smaller (green and yellow) arc is drawn;**clockwiseArc**- defines if the arc is drawn clockwise (red and green) or counterclockwise (yellow and blue).

**Params:**

Name | Type | Description |
---|---|---|

x | number | The X-coordinate of the arc end. |

y | number | The Y-coordinate of the arc end. |

rx | number | The X-axis radius of the ellipse. |

ry | number | The Y-axis radius of the ellipse. |

largeArc | boolean | A flag allowing to draw either the smaller or the larger arc. |

clockwiseArc | boolean | A flag allowing to draw an arc either in a clockwise or in a counterclockwise direction. |

**Returns:**

**Try it:**

### attr

**Params:**

Name | Type | Description |
---|---|---|

key | string | Name of attribute. |

**Returns:**

**Try it:**

**Params:**

Name | Type | Description |
---|---|---|

key | string | Name of attribute. |

value | * | Value of attribute. |

**Returns:**

**Try it:**

### circularArc

An arc with a center in (cx, cy) start angle (from) and end angle (from + sweep), with clockwise and counterclock drawing option.

**Params:**

Name | Type | Default | Description |
---|---|---|---|

cx | number | Center x. | |

cy | number | Center y. | |

rx | number | The X-axis radius of the ellipse. | |

ry | number | The Y-axis radius of the ellipse. | |

fromAngle | number | The starting angle, measured in degrees in a clockwise direction. | |

sweep | number | Sweep angle in degrees. | |

lineTo | boolean | false | Line to start point. If set to true - anychart.graphics.vector.Path#lineTo will be used instead of anychart.graphics.vector.Path#moveTo. |

**Returns:**

**Try it:**

### clear

**Returns:**

**Try it:**

### clip

**Returns:**

**Attention!**In SVG clip will transform according to transformation, and in VML clip will be surrounding.

**Params:**

Name | Type | Description |
---|---|---|

value | anychart.graphics.math.Rect | string | Clipping rectangle. |

**Returns:**

**Try it:**

### close

Assume that some path has been being drawn. After calling the

**close**method, the current point

**B**will be connected with the beginning of the path (point

**A**) by a straight line (marked red).

**Returns:**

**Try it:**

### cursor

**Returns:**

**Try it:**

**Params:**

Name | Type | Default | Description |
---|---|---|---|

value | anychart.graphics.vector.Cursor | null | Cursor type. |

**Returns:**

**Try it:**

### curveTo

Each curve is defined by 3 points (6 coordinates) - two control points and an endpoint.

The cursor is set to the point

**A**.

Then the curve goes to the point

**B**through the inflection points

**P1**and

**P2**.

Next the curve goes to the point

**C**through the inflection points

**P3**and

**P4**.

Inflection points can be placed anywhere, but there must be two of them.

**Params:**

Name | Type | Description |
---|---|---|

control1X | number | The first control point's X-coordinate. |

control1Y | number | The first control point's Y-coordinate. |

control2X | number | The second control point's X-coordinate. |

control2Y | number | The second control point's Y-coordinate. |

endX | number | The endpoint's X-coordinate. |

endY | number | The endpoint's Y-coordinate. |

var_args | number | The coordinates, defining curves, in sets of 6: first control points, then an endpoint (in the same order as the primary parameters). |

**Returns:**

### desc

**Returns:**

**Try it:**

**Params:**

Name | Type | Description |
---|---|---|

value | string | null | Value to set. |

**Returns:**

**Try it:**

### disablePointerEvents

**Returns:**

**Try it:**

**Params:**

Name | Type | Default | Description |
---|---|---|---|

value | boolean | false | Pointer events property value. |

**Returns:**

**Try it:**

### disableStrokeScaling

**Returns:**

var element = stage.rect(10, 10, 100, 40); element.disableStrokeScaling();

Learn more by link.

**Params:**

Name | Type | Default | Description |
---|---|---|---|

value | boolean | false | Vector effect property to set. |

**Returns:**

**Try it:**

### dispose

**Try it:**

### domElement

In case of Stage in Suspended state or unbound element - null is returned.

**Returns:**

### drag

**Returns:**

**Try it:**

**Params:**

Name | Type | Default | Description |
---|---|---|---|

value | boolean | anychart.graphics.math.Rect | false | Flag or a dragging area. |

**Returns:**

**Try it:**

### fill

**Returns:**

**Try it:**

- anychart.graphics.vector.LinearGradientFill
- anychart.graphics.vector.RadialGradientFill
- anychart.graphics.vector.Fill

**Color Opacity**' - 'red .5'.

**Params:**

Name | Type | Description |
---|---|---|

color | anychart.graphics.vector.Fill | Fill as object or string. |

**Returns:**

**Try it:**

**fill**is set as

**rect.fill('red 0.3', 0.7)**, opacity will be 0.3.

**Params:**

Name | Type | Description |
---|---|---|

color | string | Color as string. |

opacity | number | Opacity. |

**Returns:**

**Try it:**

- ObjectBoundingBox with angle value preservation
- ObjectBoundingBox without angle value preservation
- UserSpaceOnUse

#### Modes:

**ObjectBoundingBox without angle value preservation**(the first rectangle on the image)

In this mode the result angle will visually correspond the original setting, non regarding browser scaling duplication (so, for objects that do not have 1:1 proportion with the original figure, the gradient angle will correspond to the initial value due to internal calculations).

**ObjectBoundingBox with angle value preservation**(the second rectangle on the image)

In this mode, gradient vector is calculated with the preset angle, but the result gradient angle on the rendered page can be changed if the object proportion is not 1:1 in the browser. So visually the result gradient angle may not correspond to the original settings.

**UserSpaceOnUse**(the third and fourth rectangles on the image)

In this mode gradient settings are added by gradient size and borders/coordinates, and rendering is calculated within those borders. After that, the fill is executed on the element figure according to its coordinates. More about this mode at gradientUnits.

**Params:**

Name | Type | Description |
---|---|---|

keys | Array.<(anychart.graphics.vector.GradientKey|string)> | Gradient keys. |

angle | number | Gradient angle. |

mode | boolean | anychart.graphics.vector.Rect | Object | Gradient mode. |

opacity | number | Gradient opacity. |

**Returns:**

**Try it:**

**Params:**

Name | Type | Description |
---|---|---|

keys | Array.<(anychart.graphics.vector.GradientKey|string)> | Color-stop gradient keys. |

cx | number | X ratio of center radial gradient. |

cy | number | Y ratio of center radial gradient. |

mode | anychart.graphics.math.Rect | If defined then userSpaceOnUse mode else objectBoundingBox. |

opacity | number | Opacity of the gradient. |

fx | number | X ratio of focal point. |

fy | number | Y ratio of focal point. |

**Returns:**

**Try it:**

### getAbsoluteBounds

**Returns:**

**Try it:**

### getAbsoluteHeight

See illustrations at anychart.graphics.vector.Element#getAbsoluteWidth

**Returns:**

**Try it:**

### getAbsoluteWidth

### getAbsoluteX

**Returns:**

**Try it:**

### getAbsoluteY

**Returns:**

**Try it:**

### getBounds

### getCurrentPoint

**Returns:**

**Try it:**

### getHeight

### getLength

### getRotationAngle

### getStage

**Returns:**

**Try it:**

### getTransformationMatrix

[

{number} m00 Scale X.

{number} m10 Shear Y.

{number} m01 Shear X.

{number} m11 Scale Y.

{number} m02 Translate X.

{number} m12 Translate Y.

]

**Returns:**

**Try it:**

### getWidth

### getX

**Returns:**

**Try it:**

### getY

**Returns:**

**Try it:**

### hasParent

### id

**Returns:**

**Try it:**

**Params:**

Name | Type | Description |
---|---|---|

id | string | Custom identifier. |

**Returns:**

**Try it:**

### lineTo

The beginning is in the point

**A**(50, 50).

The first line is drawn from the beginning to the point

**B**(100, 100).

Then the path goes on to the point

**C**(50, 110).

From the point

**C**it goes to the point

**D**(50, 140)

and ends in the point

**E**(300, 140).

**Params:**

Name | Type | Description |
---|---|---|

x | number | A target point's X-coordinate. |

y | number | A target point's Y-coordinate. |

var_args | number | The target points' coordinates: each odd parameter is interpreted as X and each even as Y. |

**Returns:**

### listen

**Params:**

Name | Type | Default | Description |
---|---|---|---|

type | string | The event type id. | |

listener | function(e:Object):boolean|undefined | Callback method. | |

useCapture | boolean | false | Whether to fire in capture phase. Learn more about capturing https://javascript.info/bubbling-and-capturing |

listenerScope | Object | Object in whose scope to call the listener. |

**Returns:**

**Try it:**

### listenOnce

**Params:**

Name | Type | Default | Description |
---|---|---|---|

type | string | The event type id. | |

listener | function(e:Object):boolean|undefined | Callback method. | |

useCapture | boolean | false | Whether to fire in capture phase. Learn more about capturing https://javascript.info/bubbling-and-capturing |

listenerScope | Object | Object in whose scope to call the listener. |

**Returns:**

**Try it:**

### moveTo

Remember that if you call the

**moveTo**method a few times in a row, only the last call will be applied.

**Params:**

Name | Type | Description |
---|---|---|

x | number | The target point's X-coordinate. |

y | number | The target point's Y-coordinate. |

**Returns:**

**Try it:**

### parent

**Returns:**

**Try it:**

**Params:**

Name | Type | Description |
---|---|---|

parent | anychart.graphics.vector.Layer | anychart.graphics.vector.Stage | Parent layer. |

**Returns:**

**Try it:**

### quadraticCurveTo

The cursor is set to the point

**A**.

Then the curve goes to the point

**B**through the inflection point

**P1**.

Next the curve goes to the point

**C**through the inflection point

**P2**.

The inflection point can be placed anywhere, and there must be one such point.

**Params:**

Name | Type | Description |
---|---|---|

controlX | number | The control point's X-coordinate. |

controlY | number | The control point's Y-coordinate. |

endX | number | The endpoint's X-coordinate. |

endY | number | The endpoint's Y-coordinate. |

var_args | number | coordinates, defining curves, in sets of four: first the control point, then an endpoint (in the same order as the primary parameters). |

**Returns:**

### remove

**Returns:**

**Try it:**

### removeAllListeners

**Params:**

Name | Type | Description |
---|---|---|

type | string | Type of event to remove, default is to remove all types. |

**Returns:**

**Try it:**

### rotate

**(0, 0)**.

Left illustration shows 20 degrees rotation with the default rotation point.

`.rotate(20)`

Right illustration shows 20 degrees rotation with the given rotation point.

`.rotate(20, x, y)`

Rotation points are marked with red, initial position of shapes is marked with gray.

**Params:**

Name | Type | Description |
---|---|---|

degrees | number | Rotation angle in degrees. |

cx | number | Rotation point X. |

cy | number | Rotation point Y. |

**Returns:**

**Try it:**

### rotateByAnchor

**anychart.graphics.vector.Anchor.CENTER**is the default.

Left illustration shows 90 degrees rotation around the default anchor.

`.rotateByAnchor(90)`

Right illustration shows 90 degrees rotation around the given anchor.

`.rotateByAnchor(90, anychart.graphics.vector.Anchor.CENTER_TOP)`

Rotation points are marked with red, initial position of shapes is marked with gray.

**Params:**

Name | Type | Description |
---|---|---|

degrees | number | Rotation angle in degrees. |

anchor | anychart.graphics.vector.Anchor | string | Rotation anchor. |

**Returns:**

**Try it:**

### scale

**(0, 0)**.

Left illustration shows default point scaling.

`.scale(0.5, 0.5,)`

Right illustration shows scaling with the scaling center set.

`.scale(0.5, 0.5, x, y)`

Scaling center is marked with red, initial state is marked with gray.

**Params:**

Name | Type | Description |
---|---|---|

sx | number | X scaling factor. |

sy | number | Y scaling factor. |

cx | number | Scaling point X. |

cy | number | Scaling point Y. |

**Returns:**

**Try it:**

### scaleByAnchor

**anychart.graphics.vector.Anchor.CENTER**.

Left illustration shows scaling with the default anchor.

`.scaleByAnchor(0.5, 0.5)`

Right illustration shows scaling with the anchor set.

`.scaleByAnchor(0.5, 0.5, anychart.graphics.vector.Anchor.RIGHT_TOP)`

Scaling center is marked with red, initial state is marked with gray.

**Params:**

Name | Type | Description |
---|---|---|

sx | number | X scaling factor. |

sy | number | Y scaling factor. |

anchor | anychart.graphics.vector.Anchor | string | Scaling anchor point. |

**Returns:**

**Try it:**

### setPosition

**Note:**See illustration at anychart.graphics.vector.Element#translate, the only difference between anychart.graphics.vector.Element#translate and this method is the fact that that this method resets the current transformation, and anychart.graphics.vector.Element#translate adds movement to the existing transformation.

**Params:**

Name | Type | Description |
---|---|---|

x | number | X coordinate. |

y | number | Y coordinate. |

**Returns:**

**Try it:**

### setRotation

**Note:**See illustration at anychart.graphics.vector.Element#rotate, the only difference between anychart.graphics.vector.Element#rotate and this method is the fact that this method resets the current transformation, and anychart.graphics.vector.Element#rotate adds rotation to the existing transformation.

**Params:**

Name | Type | Description |
---|---|---|

degrees | number | Rotation angle in degrees. |

cx | number | Rotation point X. |

cy | number | Rotation point Y. |

**Returns:**

**Try it:**

### setRotationByAnchor

**Note:**See illustration at anychart.graphics.vector.Element#rotateByAnchor, the only difference between anychart.graphics.vector.Element#rotateByAnchor and this method is the fact that this method resets the current transformation, and anychart.graphics.vector.Element#rotate adds rotation to the existing transformation.

**Params:**

Name | Type | Description |
---|---|---|

degrees | number | Rotation angle in degrees. |

anchor | anychart.graphics.vector.Anchor | string | Rotation anchor. |

**Returns:**

**Try it:**

### setTransformationMatrix

**Note:**See illustration at anychart.graphics.vector.Element#appendTransformationMatrix, the difference between anychart.graphics.vector.Element#appendTransformationMatrix and this method is that anychart.graphics.vector.Element#appendTransformationMatrix combined transformation with the current, and this method resets the current.

**Params:**

Name | Type | Description |
---|---|---|

m00 | number | Scale X. |

m10 | number | Shear Y. |

m01 | number | Shear X. |

m11 | number | Scale Y. |

m02 | number | Translate X. |

m12 | number | Translate Y. |

**Returns:**

**Try it:**

### stroke

- As '[thickness ]color[ opacity]' formatted string:
**'color'**- https://www.w3schools.com/html/html_colors.asp.**'thickness color'**- like a css border, e.g. '3 red' or '3px red'**'color opacity'**- as a fill string, e.g. '#fff 0.5'**'thickness color opacity'**- as a complex string, e.g. '3px #00ff00 0.5'

- anychart.graphics.vector.Stroke object
- Array of anychart.graphics.vector.GradientKey keys
**null**resets current stroke.

**Note:**String parts order is significant and '3px red' is not the same as 'red 3px'.

**Params:**

Name | Type | Description |
---|---|---|

value | anychart.graphics.vector.Stroke | anychart.graphics.vector.ColoredFill | string | null | Object | Stroke as '[thickness ]color[ opacity]'. |

**Returns:**

**Note:**When stroke properties are set both by complex stroke object properties and by stroke() method params, object properties have more priority. E.g. setting

**shape.stroke('10 red', 5);**(or

**shape.stroke({color: 'red', thickness: 10}, 5);**will result a red stroke with thickness 10px.

**Params:**

Name | Type | Description |
---|---|---|

value | anychart.graphics.vector.Stroke | anychart.graphics.vector.ColoredFill | string | Stroke style, as described above. |

thickness | number | Line thickness. Defaults to 1. |

dashpattern | string | Controls the pattern of dashes and gaps used to stroke paths. Dash array contains a list of white space separated lengths and percentages that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, stroke dashpattern: '5 3 2' is equivalent to dashpattern: '5 3 2 5 3 2'. |

lineJoin | string | anychart.graphics.vector.StrokeLineJoin | Line join style. |

lineCap | string | anychart.graphics.vector.StrokeLineCap | Line cap style. |

**Returns:**

**Try it:**

### strokeThickness

**Params:**

Name | Type | Description |
---|---|---|

thickness | number | Thickness value. |

**Returns:**

**Try it:**

### title

**Returns:**

**Try it:**

**Params:**

Name | Type | Description |
---|---|---|

value | string | null | Value to set. |

**Returns:**

**Try it:**

### translate

Illustration shows a shape movement when

`.translate(20, 10)`

is invoked several times.**Params:**

Name | Type | Description |
---|---|---|

tx | number | X movement amount. |

ty | number | Y movement amount. |

**Returns:**

**Try it:**

### unlisten

**Params:**

Name | Type | Default | Description |
---|---|---|---|

type | string | The event type id. | |

listener | function(e:Object):boolean|undefined | Callback method. | |

useCapture | boolean | false | Whether to fire in capture phase. Learn more about capturing https://javascript.info/bubbling-and-capturing |

listenerScope | Object | Object in whose scope to call the listener. |

**Returns:**

**Try it:**

### visible

**Returns:**

**Try it:**

**Params:**

Name | Type | Default | Description |
---|---|---|---|

isVisible | boolean | true | Visibility flag. |

**Returns:**

**Try it:**

### zIndex

**Params:**

Name | Type | Description |
---|---|---|

value | number | Z-index to set. |

**Returns:**

**Try it:**