Arc

path. Arc

new Arc(x, y, radius, startAngle, endAngle, antiClockwise)

Creates an Arc
Parameters:
Name Type Argument Default Description
x Number The x coordinate of the center of the circle
y Number The y coordinate of the center of the circle
radius Number The arc's circle's radius
startAngle Number Start angle (radians) of the arc
endAngle Number End angle (radians) of the arc
antiClockwise Boolean <optional>
false Whether or not to progress in an anti-clockwise fashion

Extends

Members

type

The type of the given instance.
Inherited From:

Methods

arc(x, y, radius, aStartAngle, aEndAngle, anticlockwise) → {Path}

Adds an arc segment to the list of contained segments.
Parameters:
Name Type Argument Description
x Number The x-axis radius for the ellipse
y Number The y-axis radius for the ellipse
radius Number The radius of the ellipse
aStartAngle deg | rad Starting angle of arc in radians
aEndAngle deg | rad Ending angle of arc in radians
anticlockwise Boolean <optional>
Whether you want the arc to be drawn anticlockwise or clockwise (Boolean)
Inherited From:
Returns:
The current Path instance
Type
Path

arcBy(rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y) → {Path}

Adds an arc segment to the list of contained segments. It provides the same API like SVG does.
Parameters:
Name Type Description
rx Number The relative x-axis radius for the ellipse
ry Number The relative y-axis radius for the ellipse
xAxisRotation Number The rotation angle in radians for the ellipse's x-axis relative to the x-axis of the stage's {0,0}
largeArcFlag Boolean Defines the way in which the arc is drawn from its starting point to its ending point. See http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands for details
sweepFlag Boolean Defines the way in which the arc is drawn from its starting point to its ending point. See http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands for details
x Number Relative X-axis location of the end of the arc
y Number Relative Y-axis location of the end of the arc
Inherited From:
Returns:
The current Path instance
Type
Path

arcTo(rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y) → {Path}

Adds an arc to the list of contained segments. It provides the same API like SVG does.
Parameters:
Name Type Description
rx Number The x-axis radius for the ellipse
ry Number The y-axis radius for the ellipse
xAxisRotation Number The rotation angle in radians for the ellipse's x-axis relative to the x-axis of the stage's {0,0}
largeArcFlag Boolean Defines the way in which the arc is drawn from its starting point to its ending point. See http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands for details
sweepFlag Boolean Defines the way in which the arc is drawn from its starting point to its ending point. See http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands for details
x Number X-axis location of the end of the arc
y Number Y-axis location of the end of the arc
Inherited From:
Returns:
The current Path instance
Type
Path

clear() → {Path}

Clears all segments.
Inherited From:
Returns:
The current Path instance
Type
Path

clone(cloneOptions) → {Path}

Returns a clone of the shape.
Parameters:
Name Type Argument Description
cloneOptions Object <optional>
Properties
Name Type Argument Description
attributes boolean <optional>
Whether to clone attributes, not just segments.
Inherited From:
Returns:
A shape with identical segments to the instance.
Type
Path

closePath() → {Path}

Appends a segment at the end of the list of segments, which describes a close path.
Inherited From:
Returns:
The current Path instance
Type
Path

curveBy(cp1x, cp1y, cp2x, cp2y, x, y) → {Path}

Appends an bezier-curve segment. Appends a segment at the end of the list of contained segments.
Parameters:
Name Type Description
cp1x Number (Relative) first control point x
cp1y Number (Relative) first control point y
cp2x Number (Relative) second control point x
cp2y Number (Relative) second control point y
x Number (Relative) x-value of the point
y Number (Relative) y-value of the point
Inherited From:
See:
Returns:
The current Path instance
Type
Path

curveTo(cp1x, cp1y, cp2x, cp2y, x, y) → {Path}

Appends an bezier-curve segment. Appends a segment at the end of the list of contained segments.
Parameters:
Name Type Description
cp1x Number first control point x
cp1y Number first control point y
cp2x Number second control point x
cp2y Number second control point y
x Number x-value of the point
y Number y-value of the point
Inherited From:
See:
Returns:
The current Path instance
Type
Path

fill(fill) → {Path}

Applies a fillColor, fillImage or fillGradient to the shape
Parameters:
Name Type Description
fill String | Number | LinearGradient | RadialGradient | Bitmap | color.RGBAColor The fillColor (see `color.parse`), fillImage or fillGradient
Inherited From:
Returns:
The current Path instance
Type
Path

getBoundingBox(transform) → {Object}

Returns dimensions/location of the shape
Parameters:
Name Type Argument Default Description
transform Matrix <optional>
null A transform to apply to all points before computation.
Inherited From:
Returns:
an object with all box properties
Type
Object

horizontalLineBy(x) → {Path}

Appends a segment at the end of the list of segments, which describes a straight line from the last Point to the given relative Point.
Parameters:
Name Type Description
x Number relative x-value
Inherited From:
Returns:
The current Path instance
Type
Path

horizontalLineTo(x) → {Path}

Appends a segment at the end of the list of segments, which describes a straight line from the last Point to the given absolute Point.
Parameters:
Name Type Description
x Number absolute x-value
Inherited From:
Returns:
The current Path instance
Type
Path

lastPoint() → {Point}

Returns the last point of the segments array or throws a warning if the segments array is empty.
Inherited From:
Returns:
The last point of the segments array.
Type
Point

lastSegment() → {Array}

Returns the last element of the segments array or throws a warning if the segments array is empty.
Inherited From:
Returns:
The last segment of the segments array.
Type
Array

lineBy(x, y) → {Path}

Appends a segment at the end of the list of segments, which describes a straight line from the last Point to the given relative Point.
Parameters:
Name Type Description
x Number relative x-value
y Number relative y-value
Inherited From:
Returns:
The current Path instance
Type
Path

lineTo(x, y) → {Path}

Appends a segment at the end of the list of segments, which describes a straight line from the last Point to the given absolute Point.
Parameters:
Name Type Description
x Number absolute x-value
y Number absolute y-value
Inherited From:
Returns:
The current Path instance
Type
Path

morphSegmentsTo(that, duration, animOptions)

Morphs segments to that of another shapes
Parameters:
Name Type Argument Description
that Path The Path to morph to (only segments will morph)
duration Number The duration of the morph animation. Available formats are _s (seconds), _ms (milliseconds), _ (frames - no unit)
animOptions Object <optional>
Additional options to pass to the animation, e.g. `{easing: ..., onEnd: function(){...}}`
Inherited From:

moveBy(x, y) → {Path}

Appends a segment at the end of the list of segments and creates a new subpath.
Parameters:
Name Type Description
x Number relative x-value
y Number relative y-value
Inherited From:
Returns:
The current Path instance
Type
Path

moveTo(x, y) → {Path}

Appends a segment at the end of the list of segments and creates a new subpath.
Parameters:
Name Type Description
x Number absolute x-value
y Number absolute y-value
Inherited From:
Returns:
The current Path instance
Type
Path

path(path) → {String|Path}

Sets the segments of the Path and returns the current Path instance. Or returns a path representation of all the contained segments of the Path when no parameter is given.
Parameters:
Name Type Description
path String A SVG Path (http://www.w3.org/TR/SVG/paths.html)
Inherited From:
Returns:
A path or the current Path instance
Type
String | Path

pointAtLength(length) → {Array}

Returns a point at a certain length
Parameters:
Name Type Description
length Number
Inherited From:
See:
  • pathLength
Returns:
The x and y position
Type
Array

points(param) → {Array|Path}

Sets the segments of the Path and returns the current Path instance. Or returns a copy of all the contained segments of the Path when no parameter is given.
Parameters:
Name Type Description
param Array | Number An array of points or a list of points
Inherited From:
Returns:
An array of points or the current Path instance
Type
Array | Path
Example
myPath.points();
myPath.points(x,y);
myPath.points([x,y]);
myPath.points(x, y, x, y, x, y);

quadraticCurveBy(cpx, cpy, x, y) → {this}

Adds a quadratic bezier curve to the shape. Coordinates are relative (i.e. relate to the end of the previous path segment).
Parameters:
Name Type Description
cpx number x value of the control point
cpy number y value of the control point
x number x value of the anchor point
y number y value of the anchor point
Inherited From:
Returns:
the instance
Type
this

quadraticCurveTo(cpx, cpy, x, y) → {this}

Adds a quadratic bezier curve to the shape. Coordinates are absolute (i.e. relate to the coordinate system of the shape).
Parameters:
Name Type Description
cpx number x value of the control point
cpy number y value of the control point
x number x value of the anchor point
y number y value of the anchor point
Inherited From:
Returns:
the instance
Type
this

segments(commands) → {Array|Path}

Sets the segments of the Path and returns the current Path instance. Or returns a copy of all the contained segments of the Path when no parameter is given.
Parameters:
Name Type Description
commands Array The commands
Inherited From:
Returns:
An Array of segments or the current Path instance.
Type
Array | Path
Example
myPath.segments();
myPath.segments('moveTo', 0, 0);
myPath.segments(['moveTo', 0, 0]);
myPath.segments([ ['moveTo', 0, 0], ['lineTo', 10, 10] ]);

stroke(fill) → {Path}

Applies a strokeColor or strokeGradient to the shape
Parameters:
Name Type Description
fill String | Number | LinearGradient | RadialGradient | Bitmap | color.RGBAColor The fillColor (see `color.parse`), fillImage or fillGradient
Inherited From:
Returns:
The current Path instance
Type
Path

toCurves(requiredCurves)

Converts segments to absolute bezier curve instructions (curveTo)
Parameters:
Name Type Argument Description
requiredCurves Number <optional>
Number of curves required
Inherited From:

verticalLineBy(y) → {Path}

Appends a segment at the end of the list of segments, which describes a straight line from the last Point to the given relative Point.
Parameters:
Name Type Description
y Number relative y-value
Inherited From:
Returns:
The current Path instance
Type
Path

verticalLineTo(y) → {Path}

Appends a segment at the end of the list of segments, which describes a straight line from the last Point to the given absolute Point.
Parameters:
Name Type Description
y Number absolute y-value
Inherited From:
Returns:
The current Path instance
Type
Path