Path

path. Path

new Path() → {Path}

The Path Module/Contructor
Properties:
Name Type Description
__supportedAttributes__ __list__ List of supported attribute names. In addition to the property names listed for DisplayObject, these are the attribute names you can pass to the attr() method. Note that this property is not available in your code, it's just here for documentation purposes.
Properties
Name Type Description
cap String The shape to be used at the end of open Path items, when they have a stroke. Can be one of 'round', 'square', 'butt'. Default: 'butt'
fillColor String The fill color. Default: black.
fillGradient gradient.LinearGradient | gradient.RadialGradient The fill gradient. Defaults: nothing\
fillImage Bitmap The fill image. Default: nothing
fillRepeat Array | Number Number of times to repeat the fill-image/gradient both horizontally and vertically. Default: [1,1]
join String The shape to be used at the corners of paths. Can be one of 'miter', 'round', 'bevel'. Default: 'miter'
strokeColor String The line color. Default: transparent
strokeGradient gradient.LinearGradient | gradient.RadialGradient The line gradient. Default: nothing
strokeDash Array The stroke dasharray. Default: nothing
strokeDashOffset Number The stroke dasharray. Default: 0
strokeWidth Number The line width. Default: 0
miterLimit Number The miter limit of the stroke. Default: 4
Returns:
A new Instance of Path
Type
Path

Extends

Members

type

The type of the given instance.

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)
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
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
Returns:
The current Path instance
Type
Path

clear() → {Path}

Clears all segments.
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.
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.
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
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
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
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.
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
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
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.
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.
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
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
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(){...}}`

morphTo(that, duration, animOptions)

Morphs segments to that of another shapes, along with other attrs
Parameters:
Name Type Argument Description
that Path The Path to morph to (all morphable attributes 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(){...}}`

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
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
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)
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
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
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
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
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
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
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

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
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
Returns:
The current Path instance
Type
Path