Curve → CurvePath →

Path

A 2D path representation. The class provides methods for creating paths and contours of 2D shapes similar to the 2D Canvas API.

Code Example


    const path = new v3d.Path();

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

    const points = path.getPoints();

    const geometry = new v3d.BufferGeometry().setFromPoints(points);
    const material = new v3d.LineBasicMaterial({ color: 0xffffff });

    const line = new v3d.Line(geometry, material);
    app.scene.add(line);

Constructor

Path(points : Array)

points — (optional) array of Vector2s.

Creates a Path 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.

Properties

See the base CurvePath class for common properties.

# .currentPoint : Vector2

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

Methods

See the base CurvePath class for common methods.

# .absarc(x : Float, y : Float, radius : Float, startAngle : Float, endAngle : Float, clockwise : Boolean) → this

x, y — The absolute center of the arc.
radius — The radius of the arc.
startAngle — The start angle in radians.
endAngle — The end angle in radians.
clockwise — Sweep the arc clockwise. Defaults to false.

Adds an absolutely positioned EllipseCurve to the path.

# .absellipse(x : Float, y : Float, xRadius : Float, yRadius : Float, startAngle : Float, endAngle : Float, clockwise : Boolean, rotation : Float) → this

x, y — The absolute center of the ellipse.
xRadius — The radius of the ellipse in the x axis.
yRadius — The radius of the ellipse in the y axis.
startAngle — The start angle in radians.
endAngle — The end angle in radians.
clockwise — Sweep the ellipse clockwise. Defaults to false.
rotation — The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0.

Adds an absolutely positioned EllipseCurve to the path.

# .arc(x : Float, y : Float, radius : Float, startAngle : Float, endAngle : Float, clockwise : Boolean) → this

x, y — The center of the arc offset from the last call.
radius — The radius of the arc.
startAngle — The start angle in radians.
endAngle — The end angle in radians.
clockwise — Sweep the arc clockwise. Defaults to false.

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

# .bezierCurveTo(cp1X : Float, cp1Y : Float, cp2X : Float, cp2Y : Float, x : Float, y : Float) → this

This creates a bezier curve from .currentPoint with (cp1X, cp1Y) and (cp2X, cp2Y) as control points and updates .currentPoint to x and y.

# .ellipse(x : Float, y : Float, xRadius : Float, yRadius : Float, startAngle : Float, endAngle : Float, clockwise : Boolean, rotation : Float) → this

x, y — The center of the ellipse offset from the last call.
xRadius — The radius of the ellipse in the x axis.
yRadius — The radius of the ellipse in the y axis.
startAngle — The start angle in radians.
endAngle — The end angle in radians.
clockwise — Sweep the ellipse clockwise. Defaults to false.
rotation — The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0.

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

# .lineTo(x : Float, y : Float) → this

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

# .moveTo(x : Float, y : Float) → this

Move the .currentPoint to x, y.

# .quadraticCurveTo(cpX : Float, cpY : Float, x : Float, y : Float) → this

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

# .setFromPoints(vector2s : Array) → this

points — array of Vector2s.

Points are added to the curves array as LineCurves.

# .splineThru(points : Array) → this

points - An array of Vector2s.

Connects a new SplineCurve onto the path.

Source

For more info on how to obtain the source code of this module see this page.