Options
All
  • Public
  • Public/Protected
  • All
Menu
classdesc

A BezierPath class.

This was refactored from an older project.

requires

Bounds

requires

Vertex

requires

CubicBezierCurve

requires

XYCoords

requires

SVGSerializable

requires

UID

requires

UIDGenerator

Hierarchy

  • BezierPath

Implements

Index

Constructors

Private constructor

  • The constructor.

    This constructor expects a sequence of path points and will approximate the location of control points by picking some between the points.
    You should consider just constructing empty paths and then add more curves later using the addCurve() function.

    name

    BezierPath

    Returns BezierPath

Properties

END_CONTROL_POINT

END_CONTROL_POINT: number = 2
constant

{number}

END_POINT

END_POINT: number = 3
constant

{number}

START_CONTROL_POINT

START_CONTROL_POINT: number = 1
constant

{number}

START_POINT

START_POINT: number = 0
constant

{number}

adjustCircular

adjustCircular: boolean

Set this flag to true if you want the first point and last point of the path to be auto adjusted, too.

member

{number}

memberof

BezierPath

instance

bezierCurves

bezierCurves: Array<CubicBezierCurve>
member

{Array}

memberof

BezierPath

instance

Readonly className

className: string = "BezierPath"

Required to generate proper CSS classes and other class related IDs.

isDestroyed

isDestroyed: boolean
member

{boolean}

memberof

BezierPath

instance

pathPoints

pathPoints: Array<Vertex>
member

{Array}

memberof

BezierPath

instance

totalArcLength

totalArcLength: number
member

{number}

memberof

BezierPath

instance

Readonly uid

uid: UID

The UID of this drawable object.

member

{UID}

memberof

BezierCurve

instance
readonly

Static END_CONTROL_POINT

END_CONTROL_POINT: number = 2
constant

{number}

Static END_POINT

END_POINT: number = 3
constant

{number}

Static START_CONTROL_POINT

START_CONTROL_POINT: number = 1
constant

{number}

Static START_POINT

START_POINT: number = 0
constant

{number}

Methods

addCurve

  • Add a cubic bezier curve to the end of this path.

    method

    addCurve

    instance
    memberof

    BezierPath

    Parameters

    Returns void

Private adjustPredecessorControlPoint

  • adjustPredecessorControlPoint(curveIndex: number, obtainHandleLength: boolean, updateArcLengths: boolean): void
  • This helper function adjusts the given point's predecessor's control point.

    method

    adjustPredecessorControlPoint

    instance
    memberof

    BezierPath

    Parameters

    • curveIndex: number

      The curve index to move a point from.

    • obtainHandleLength: boolean

      Moves the point with keeping the original handle length.

    • updateArcLengths: boolean

    Returns void

Private adjustSuccessorControlPoint

  • adjustSuccessorControlPoint(curveIndex: number, obtainHandleLength: boolean, updateArcLengths: boolean): void
  • This helper function adjusts the given point's successor's control point.

    method

    adjustSuccessorControlPoint

    instance
    memberof

    BezierPath

    Parameters

    • curveIndex: number

      The curve index to move a point from.

    • obtainHandleLength: boolean

      Moves the point with keeping the original handle length.

    • updateArcLengths: boolean

    Returns void

clone

destroy

  • destroy(): void
  • This function should invalidate any installed listeners and invalidate this object. After calling this function the object might not hold valid data any more and should not be used.

    method

    destroy

    instance
    memberof

    BezierPath

    Returns void

equals

  • Compare this and the passed Bézier path.

    method

    equals

    instance
    memberof

    BezierPath

    Parameters

    Returns boolean

getBounds

  • Get the bounds of this Bézier path.

    Note the the curves' underlyung segment buffers are used to determine the bounds. The more elements the segment buffers have, the more precise the returned bounds will be.

    Returns Bounds

    The bounds of this Bézier path.

getClosestT

  • getClosestT(p: Vertex): number
  • Get the 't' position on this curve with the minimal distance to point p.

    Parameters

    • p: Vertex

      The point to find the closest curve point for.

    Returns number

    A value t with 0.0 <= t <= 1.0.

getCurveAt

  • Get the cubic bezier curve at the given index.

    method

    getCurveAt

    instance
    memberof

    BezierPath

    Parameters

    • curveIndex: number

    Returns CubicBezierCurve

    The curve at the specified index.

getCurveCount

  • getCurveCount(): number
  • Get the number of curves in this path.

    method

    getCurveCount

    instance
    memberof

    BezierPath

    Returns number

    The number of curves in this path.

getEvenDistributionVertices

  • getEvenDistributionVertices(pointCount: number): Array<Vertex>
  • Get n 'equally' distributed vertices along this Bézier path.

    As the changing curvature of the B slines makes prediction of distances difficult, the returned vertices' distances are only relatively equal:

    • the distance grows where curvature is large.
    • the distance shrinks where curvature is small.

    Only the distance mean of all consecutive is 1/n-th of the total arc length.

    Usually this approximation is good enough for most use cases.

    Parameters

    • pointCount: number

      (must be at least 2) The number of desired points (start and end point included).

    Returns Array<Vertex>

getLength

  • getLength(): number
  • Get the total length of this path.

    Note that the returned value comes from the curve buffer. Unregistered changes to the curve points will result in invalid path length values.

    method

    getLength

    instance
    memberof

    BezierPath

    Returns number

    The (buffered) length of the path.

getPerpendicular

  • getPerpendicular(u: number): Vertex
  • Get the perpendicular of the bézier path at the given relative path location.

    Note that the returned vector is not normalized.

    method

    getPerpendicular

    instance
    memberof

    BezierPath

    Parameters

    • u: number

      The relative path position:

      0 <= u <= getLength()

    Returns Vertex

    The perpendicluar vector at the relative path position.

getPerpendicularAt

  • getPerpendicularAt(t: number): Vertex
  • Get the perpendicular of the bézier path at the given absolute path location (fraction).

    Note that the returned vector is not normalized.

    method

    getPerpendicularAt

    instance
    memberof

    BezierPath

    Parameters

    • t: number

      The absolute path position:

      0.0 <= t <= 1.0

    Returns Vertex

    The perpendicluar vector at the absolute path position.

getPoint

  • Get the point on the bézier path at the given relative path location.

    method

    getPoint

    instance
    memberof

    BezierPath

    Parameters

    • u: number

      The relative path position:

      0 <= u <= this.getLength()

    Returns Vertex

    The point at the relative path position.

getPointAt

  • getPointAt(t: number): Vertex
  • Get the point on the bézier path at the given path fraction.

    method

    getPointAt

    instance
    memberof

    BezierPath

    Parameters

    • t: number

      The absolute path position:

      0.0 <= t <= 1.0

    Returns Vertex

    The point at the absolute path position.

getSubPathAt

  • getSubPathAt(startT: number, endT: number): BezierPath
  • Get a specific sub path from this path. The start and end position are specified by ratio number in [0..1].

    0.0 is at the beginning of the path. 1.0 is at the end of the path.

    Values below 0 or beyond 1 are cropped down to the [0..1] interval.

    startT > endT is allowed, the returned sub path will have inverse direction then.

    method

    getSubPathAt

    instance
    memberof

    BezierPath

    Parameters

    • startT: number

      The start position of the sub path.

    • endT: number

      The end position of the sub path.

    Returns BezierPath

    The desired sub path in the bounds [startT..endT].

getTangent

  • getTangent(u: number): Vertex
  • Get the tangent of the bézier path at the given path location.

    Note that the returned vector is not normalized.

    method

    getTangent

    instance
    memberof

    BezierPath

    Parameters

    • u: number

      The relative path position:

      0 <= u <= getLength()

    Returns Vertex

    The tangent vector at the relative path position.

getTangentAt

  • getTangentAt(t: number): Vertex
  • Get the tangent of the bézier path at the given path fraction.

    Note that the returned vector is not normalized.

    method

    getTangentAt

    instance
    memberof

    BezierPath

    Parameters

    • t: number

      The absolute path position:

      0.0 <= t <= 1.0

    Returns Vertex

    The tangent vector at the absolute path position.

locateCurveByEndControlPoint

  • locateCurveByEndControlPoint(point: Vertex): number

locateCurveByEndPoint

  • locateCurveByEndPoint(point: Vertex): number
  • Locate the curve with the given end point (function returns the index).

    method

    locateCurveByEndPoint

    instance
    memberof

    BezierPath

    Parameters

    • point: Vertex

      The (curve end-) point to look for.

    Returns number

    The curve index or -1 if curve (end-) point not found

locateCurveByStartControlPoint

  • locateCurveByStartControlPoint(point: Vertex): number
  • Locate the curve with the given start point (function returns the index).

    method

    locateCurveByStartControlPoint

    instance
    memberof

    BezierPath

    Parameters

    • point: Vertex

      The (curve endt-) point to look for.

    Returns number

    The curve index or -1 if curve (end-) point not found

locateCurveByStartPoint

  • locateCurveByStartPoint(point: Vertex): number
  • Locate the curve with the given start point (function returns the index).

    method

    locateCurveByStartPoint

    instance
    memberof

    BezierPath

    Parameters

    • point: Vertex

      The (curve start-) point to look for.

    Returns number

    The curve index or -1 if curve (start-) point not found

moveCurvePoint

  • moveCurvePoint(curveIndex: number, pointID: number, moveAmount: XYCoords): void
  • This function moves the addressed curve point (or control point) with keeping up the path's curve integrity.

    Thus is done by moving neighbour- and control- points as needed.

    method

    moveCurvePoint

    instance
    memberof

    BezierPath

    Parameters

    • curveIndex: number

      The curve index to move a point from.

    • pointID: number

      One of the curve's four point IDs (START_POINT, START_CONTROL_POINT, END_CONTRO_POINT or END_POINT).

    • moveAmount: XYCoords

      The amount to move the addressed vertex by.

    Returns void

rotate

  • rotate(angle: number, center: Vertex): void
  • Rotate the whole bezier path around a point..

    method

    rotate

    instance
    memberof

    BezierPath

    Parameters

    • angle: number

      The angle to rotate this path by.

    • center: Vertex

      The rotation center.

    Returns void

scale

  • Scale the whole bezier path by the given uniform factor.

    method

    scale

    instance
    memberof

    BezierPath

    Parameters

    • anchor: Vertex

      The scale origin to scale from.

    • scaleFactor: number

      The scalar to be multiplied with.

    Returns BezierPath

    this for chaining.

scaleXY

  • Scale the whole bezier path by the given (x,y)-factors.

    method

    scale

    instance
    memberof

    BezierPath

    Parameters

    • scaleFactors: XYCoords
    • Optional anchor: XYCoords

      The scale origin to scale from.

    Returns BezierPath

    this for chaining.

toJSON

  • toJSON(prettyFormat: boolean): string
  • Create a JSON string representation of this bézier curve.

    method

    toJSON

    instance
    memberof

    BezierPath

    Parameters

    • prettyFormat: boolean

      If true then the function will add line breaks.

    Returns string

    The JSON string.

toPathPoints

  • Convert this path to an array of path points that can be drawn by the default DrawLib implementations.

    method

    toPathPoints

    instance
    memberof

    BezierPath

    Returns Array<XYCoords>

toReducedListRepresentation

  • toReducedListRepresentation(digits: number): string
  • This function converts the bezier path into a string containing integer values only. The points' float values are rounded to 1 digit after the comma.

    The returned string represents a JSON array (with leading '[' and trailing ']', the separator is ',').

    method

    toReducedListRepresentation

    instance
    memberof

    BezierPath

    Parameters

    • digits: number

      The number of digits to be used after the comma '.'.

    Returns string

    The reduced list representation of this path.

translate

  • Move the whole bezier path by the given (x,y)-amount.

    method

    translate

    instance
    memberof

    BezierPath

    Parameters

    • amount: Vertex

      The amount to be added (amount.x and amount.y) to each vertex of the curve.

    Returns BezierPath

    this for chaining

updateArcLengths

  • updateArcLengths(): void
  • This function is internally called whenever the curve or path configuration changed. It updates the attribute that stores the path length information.

    If you perform any unregistered changes to the curve points you should call this function afterwards to update the curve buffer. Not updating may result in unexpected behavior.

    method

    updateArcLengths

    instance
    memberof

    BezierPath

    Returns void

Static Private _locateUIndex

  • _locateUIndex(path: BezierPath, u: number): { i: number; uBefore: number; uPart: number }
  • This is a helper function to locate the curve index for a given absolute path position u.

    I decided to put this into privat scope as it is really specific. Maybe put this into a utils wrapper.

    Returns:

    • {number} i - the index of the containing curve.
    • {number} uPart - the absolute curve length sum (length from the beginning to u, should equal u itself).
    • {number} uBefore - the absolute curve length for all segments before the matched curve (usually uBefore <= uPart).

    Parameters

    Returns { i: number; uBefore: number; uPart: number }

    • i: number
    • uBefore: number
    • uPart: number

Static Private adjustNeighbourControlPoint

  • This helper function adjusts the given point's successor's control point.

    method

    adjustNeighbourControlPoint

    instance
    memberof

    BezierPath

    Parameters

    Returns void

Static fromArray

  • Create a BezierPath instance from the given array.

    method

    fromArray

    throw

    An error if the array does not contain proper bezier path data.

    static
    memberof

    BezierPath

    Parameters

    • obj: any

    Returns BezierPath

    The bezier path instance retrieved from the array data.

Static fromCurve

  • Construct a new path with a single curve. Adding more curves is always possible.

    method

    fromCurve

    static
    memberof

    BezierPath

    Parameters

    Returns BezierPath

    The constructed bezier path instance.

Static fromJSON

  • Parse a BezierPath from the given JSON string.

    method

    fromJSON

    throw

    An error if the string is not JSON or does not contain a bezier path object.

    static
    memberof

    BezierPath

    Parameters

    • jsonString: string

      The string with the JSON data.

    Returns BezierPath

    The parsed bezier path instance.

Static fromReducedList

  • fromReducedList(pointArray: Array<number>, adjustCircular?: boolean): BezierPath
  • Convert a reduced list representation (array of numeric coordinates) to a BezierPath instance.

    The array's length must be 6*n + 2:

    • [sx, sy, scx, scy, ecx, ecy, ... , ex, ey ] | | | | +--- sequence of curves --------+ +-end-+

    Parameters

    • pointArray: Array<number>
    • Optional adjustCircular: boolean

    Returns BezierPath

    BezierPath

Static fromReducedListRepresentation

  • fromReducedListRepresentation(listJSON: string, adjustCircular?: boolean): BezierPath
  • Parse a BezierPath instance from the reduced list representation.

    The passed string must represent a JSON array containing numbers only.

    method

    fromReducedListRepresentation

    throw

    An error if the string is malformed.

    instance
    memberof

    BezierPath

    Parameters

    • listJSON: string

      The number of digits to be used after the floating point.

    • Optional adjustCircular: boolean

    Returns BezierPath

    The bezier path instance retrieved from the string.

Legend

  • Constructor
  • Property
  • Method
  • Property
  • Method
  • Inherited property
  • Inherited method
  • Private property
  • Private method
  • Static property
  • Static method

Generated using TypeDoc