Class Path

A 2d path representation including methods for creating paths and contours of 2D shapes.

Example

const path = new Path();

path.lineTo( 0, 0.8 );
path.quadraticCurveTo( 0, 1, 0.2, 1 );
path.lineTo( 1, 1 );

const points = path.getPoints();

Hierarchy

Constructors

constructor

Properties

arcLengthDivisions autoClose currentPoint curves isArcCurve isCatmullRomCurve3 isCubicBezierCurve isCubicBezierCurve3 isEllipseCurve isLineCurve isLineCurve3 isQuadraticBezierCurve isQuadraticBezierCurve3 isSplineCurve type

Methods

absarc absellipse add arc bezierCurveTo clone closePath computeFrenetFrames copy ellipse fromJSON getCurveLengths getLength getLengths getPoint getPointAt getPoints getSpacedPoints getTangent getTangentAt getUtoTmapping lineTo moveTo quadraticCurveTo setFromPoints splineThru toJSON updateArcLengths

Constructors

constructor

  • Create a new instance from the points. The first point defines the offset, then successive points are added to the curves array as LineCurves. If no points are specified, an empty path is created and the currentPoint is set to the origin.

    Parameters

    • Optional points: Vector2[]

      (optional) array of Vector2s.

    Returns Path

Properties

arcLengthDivisions

arcLengthDivisions: number

Determines the amount of divisions when calculating the cumulative segment lengths of a curve via .getLengths. To ensure precision when using methods like .getSpacedPoints, it is recommended to increase .arcLengthDivisions if the curve is very large.

Default

200

autoClose

autoClose: boolean

Whether or not to automatically close the path.

Default Value

false

currentPoint

currentPoint: Vector2

The current offset of the path. Any new Curve added will start here.

Default Value

new Vector2()

curves

curves: Curve<Vector2>[]

The array of Curves.

Default Value

[]

Readonly isArcCurve

isArcCurve: boolean

subclass should override

Default Value

false

Readonly isCatmullRomCurve3

isCatmullRomCurve3: boolean

subclass should override

Default Value

true

Readonly isCubicBezierCurve

isCubicBezierCurve: boolean

subclass should override

Default Value

false

Readonly isCubicBezierCurve3

isCubicBezierCurve3: boolean

subclass should override

Default Value

false

Readonly isEllipseCurve

isEllipseCurve: boolean

subclass should override

Default Value

false

Readonly isLineCurve

isLineCurve: boolean

subclass should override

Default Value

false

Readonly isLineCurve3

isLineCurve3: boolean

subclass should override

Default Value

false

Readonly isQuadraticBezierCurve

isQuadraticBezierCurve: boolean

subclass should override

Default Value

false

Readonly isQuadraticBezierCurve3

isQuadraticBezierCurve3: boolean

subclass should override

Default Value

false

Readonly isSplineCurve

isSplineCurve: boolean

subclass should override

Default Value

false

Readonly type

type: string

Default Value

'Path'

Methods

absarc

  • Adds an absolutely positioned EllipseCurve to the path.

    Returns

    This instance.

    Parameters

    • Optional x: number

      The absolute center x of the arc. Default is 0.

    • Optional y: number

      The absolute center y of the arc. Default is 0.

    • Optional radius: number

      The radius of the arc. Default is 1.

    • Optional startAngle: number

      The start angle of the curve in radians starting from the positive X axis. Default is 0.

    • Optional endAngle: number

      The end angle of the curve in radians starting from the positive X axis. Default is 2 x Math.PI.

    • Optional isClockwise: boolean

      Sweep the arc clockwise. Defaults to false.

    Returns Path

absellipse

  • Adds an absolutely positioned EllipseCurve to the path.

    Returns

    This instance.

    Parameters

    • x: number

      – The X center of the ellipse. Default is 0.

    • y: number

      – The Y center of the ellipse. Default is 0.

    • xRadius: number

      – The radius of the ellipse in the x direction. Default is 1.

    • yRadius: number

      – The radius of the ellipse in the y direction. Default is 1.

    • startAngle: number

      The start angle of the curve in radians starting from the positive X axis. Default is 0.

    • endAngle: number

      The end angle of the curve in radians starting from the positive X axis. Default is 2 x Math.PI.

    • isClockwise: boolean

      Sweep the arc clockwise. Defaults to false.

    • rotation: number

    Returns Path

add

arc

  • Adds an EllipseCurve to the path, positioned relative to the currentPoint.

    Returns

    This instance.

    Parameters

    • x: number

      The absolute center x of the arc. Default is 0.

    • y: number

      The absolute center y of the arc. Default is 0.

    • radius: number

      The radius of the arc. Default is 1.

    • startAngle: number

      The start angle of the curve in radians starting from the positive X axis. Default is 0.

    • endAngle: number

      The end angle of the curve in radians starting from the positive X axis. Default is 2 x Math.PI.

    • isClockwise: boolean

      Sweep the arc clockwise. Defaults to false.

    Returns Path

bezierCurveTo

  • Creates a bezier curve from currentPoint with (cp1X, cp1Y) and (cp2X, cp2Y) as control points and updates currentPoint to the end point (x,y).

    Returns

    This instance.

    Parameters

    • cp1x: number

      Control point1, x coordinate

    • cp1y: number

      Control point1, y coordinate

    • cp2x: number

      Control point2, x coordinate

    • cp2y: number

      Control point2, y coordinate

    • x: number

      end point, x coordinate

    • y: number

      end point, y coordinate

    Returns Path

clone

  • Creates a new instance with same property values as this curve.

    Returns

    A new Curve instance exactly like this curve.

    Returns Curve<Vector2>

closePath

computeFrenetFrames

  • Generates the Frenet frames. Learn more at http://www.cs.indiana.edu/pub/techreports/TR425.pdf

    Returns

    An object with shape: { tangents: Vector3[]; normals: Vector3[]; binormals: Vector3[]; }

    Parameters

    • segments: number

      Number of segments

    • Optional closed: boolean

      True if this curve is closed.

    Returns { binormals: Vector3[]; normals: Vector3[]; tangents: Vector3[] }

    • binormals: Vector3[]
    • normals: Vector3[]
    • tangents: Vector3[]

copy

ellipse

  • Adds an EllipseCurve to the path, positioned relative to the currentPoint.

    Returns

    This instance.

    Parameters

    • x: number

      The center of the ellipse offset from the last call.

    • y: number

      The center of the ellipse offset from the last call.

    • xRadius: number

      The radius of the ellipse in the x axis.

    • yRadius: number

      The radius of the ellipse in the y axis.

    • startAngle: number

      The start angle in radians.

    • endAngle: number

      The end angle in radians.

    • isClockwise: boolean

      Sweep the ellipse clockwise. Defaults to false.

    • rotation: number

      The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0.

    Returns Path

fromJSON

  • Copies the data from the given JSON object to this instance.

    Returns

    This instance.

    Parameters

    • json: object

      The source JSON object.

    Returns Path

getCurveLengths

getLength

getLengths

  • Get list of cumulative segment lengths.

    Returns

    Array of points

    Parameters

    • Optional divisions: number

    Returns number[]

getPoint

  • Find the point (vector) for point t of the curve where t is between 0 and 1.

    Returns

    The point.

    Parameters

    • t: number

      A position on the curve. Must be in the range [ 0, 1 ].

    • Optional optionalTarget: Vector2

      (optional) If specified, the result will be copied into this Vector, otherwise a new Vector will be created.

    Returns Vector2

getPointAt

  • Find a vector for point at relative position in curve according to arc length

    Returns

    The point.

    Parameters

    • u: number

      A position on the curve according to the arc length. Must be in the range [ 0, 1 ].

    • Optional optionalTarget: Vector2

      (optional) If specified, the result will be copied into this Vector, otherwise a new Vector will be created.

    Returns Vector2

getPoints

  • Compute a set of divisions + 1 points using getPoint( t ).

    Returns

    Array of point vectors.

    Parameters

    • Optional divisions: number

      number of pieces to divide the curve into. Default is 12.

    Returns Vector2[]

getSpacedPoints

  • Compute a set of divisions + 1 equi-spaced points using getPointAt( u ).

    Returns

    Array of point vectors.

    Parameters

    • Optional divisions: number

      number of pieces to divide the curve into. Default is 40.

    Returns Vector2[]

getTangent

  • Compute a unit vector tangent at t. If the subclassed curve do not implement its tangent derivation, 2 points a small delta apart will be used to find its gradient which seems to give a reasonable approximation getTangent(t: number, optionalTarget?: T): T;

    Returns

    A vector tangent to t.

    Parameters

    • t: number

      A position on the curve. Must be in the range [ 0, 1 ].

    • Optional optionalTarget: Vector2

      — (optional) If specified, the result will be copied into this Vector, otherwise a new Vector will be created.

    Returns Vector2

getTangentAt

  • Compute the tangent at a point which is equidistant to the ends of the curve from the point given in getTangent().

    Returns

    a vector tangent to u.

    Parameters

    • u: number

      A position on the curve according to the arc length. Must be in the range [ 0, 1 ].

    • Optional optionalTarget: Vector2

      (optional) If specified, the result will be copied into this Vector, otherwise a new Vector will be created.

    Returns Vector2

getUtoTmapping

  • Given u ( 0 .. 1 ), get a t to find p. This gives you points which are equi distance

    Parameters

    • u: number
    • distance: number

    Returns number

lineTo

  • Connects a LineCurve from the currentPoint to x, y onto the path.

    Returns

    This instance.

    Parameters

    • x: number

      end point, x coordinate

    • y: number

      end point, y coordinate

    Returns Path

moveTo

  • Move the the currentPoint to x, y position.

    Returns

    This instance.

    Parameters

    • x: number

      new point, x coordinate

    • y: number

      new point, y coordinate

    Returns Path

quadraticCurveTo

  • Creates a quadratic curve from the currentPoint with cpX and cpY as control point and updates the currentPoint to x and y.

    Returns

    This instance.

    Parameters

    • cpx: number

      Control point, x coordinate

    • cpy: number

      Control point, y coordinate

    • x: number

      End point, x coordinate

    • y: number

      End point, y coordinate

    Returns Path

setFromPoints

  • Points are added to the curves array as LineCurves.

    Returns

    This instance.

    Parameters

    • vectors: Vector2[]

      array of Vector2.

    Returns Path

splineThru

  • Connects a new SplineCurve onto the path.

    Returns

    This instance.

    Parameters

    • pts: Vector2[]

      An array of Vector2

    Returns Path

toJSON

  • Create a JSON object representation of this instance.

    Returns

    A JSON object

    Returns object

updateArcLengths

Settings

Member Visibility

Theme