Represents a union of lines and curves.

To create a path from a string, see fromString.

import {Path, Mat33, Vec2, LineSegment2} from '@js-draw/math';

// Creates a path from an SVG path string.
// In this case,
// 1. Move to (0,0)
// 2. Line to (100,0)
const path = Path.fromString('M0,0 L100,0');

// Logs the distance from (10,0) to the curve 1 unit
// away from path. This curve forms a stroke with the path at
// its center.
const strokeRadius = 1;
console.log(path.signedDistance(Vec2.of(10,0), strokeRadius));

// Log a version of the path that's scaled by a factor of 4.
console.log(path.transformedBy(Mat33.scaling2D(4)).toString());

// Log all intersections of a stroked version of the path with
// a vertical line segment.
// (Try removing the `strokeRadius` parameter).
const segment = new LineSegment2(Vec2.of(5, -100), Vec2.of(5, 100));
console.log(path.intersection(segment, strokeRadius).map(i => i.point));

Constructors

Properties

bbox: Rect2

A rough estimate of the bounding box of the path. A slight overestimate. See getExactBBox

parts: Readonly<PathCommand>[]

The individual shapes that make up this path.

startPoint: Vec3

Accessors

Methods

  • Replaces all MoveTo commands with LineTo commands and connects the end point of this path to the start point.

    Returns Path

  • Treats this as a closed path and returns true if part of rect is roughly within this path's interior.

    Note: Assumes that this is a closed, non-self-intersecting path.

    Parameters

    Returns boolean

  • Parameters

    • other: Path
    • Optionaltolerance: number

    Returns boolean

    true if all points on this are equivalent to the points on other

  • Computes and returns the full bounding box for this path.

    If a slight over-estimate of a path's bounding box is sufficient, use bbox instead.

    Returns Rect2

  • Returns a list of intersections with this path. If strokeRadius is given, intersections are approximated with the surface strokeRadius away from this.

    If strokeRadius > 0, the resultant parameterValue has no defined value.

    Note: strokeRadius is half of a stroke's width.

    Parameters

    Returns PathIntersectionResult[]

  • Returns Path

    a version of this path with the direction reversed.

    Example:

    import {Path} from '@js-draw/math';
    console.log(Path.fromString('m0,0l1,1').reversed()); // -> M1,1 L0,0
    
  • Like closedRoughlyIntersects except takes stroke width into account.

    This is intended to be a very fast and rough approximation. Use intersection and signedDistance for more accurate (but much slower) intersection calculations.

    Note: Unlike other methods, this accepts strokeWidth (and not strokeRadius).

    strokeRadius is half of strokeWidth.

    Parameters

    • rect: Rect2
    • strokeWidth: number = 0

    Returns boolean

  • Returns the signed distance between point and a curve strokeRadius units away from this path.

    This returns the signed distance, which means that points inside this shape have their distance negated. For example,

    import {Path, Vec2} from '@js-draw/math';
    console.log(Path.fromString('m0,0 L100,0').signedDistance(Vec2.zero, 1));
    

    would print -1 because (0,0) is on m0,0 L100,0 and thus one unit away from its boundary.

    Note: strokeRadius = strokeWidth / 2

    Parameters

    • point: Vec3
    • strokeRadius: number

    Returns number

  • Iterates through the start/end points of each component in this path.

    If a start point is equivalent to the end point of the previous segment, the point is not emitted twice.

    Returns Generator<Vec3, undefined, unknown>

  • Convert to an SVG path representation.

    If useNonAbsCommands is given, relative path commands (e.g. l10,0) are to be used instead of absolute commands (e.g. L10,0).

    See also fromString.

    Parameters

    • OptionaluseNonAbsCommands: boolean
    • ignoreCache: boolean = false

    Returns string

  • Creates a new path by joining [other] to the end of this path

    Parameters

    • other: null | Path | PathCommand[]
    • options: {
          allowReverse?: boolean;
      } = ...

      allowReverse: true iff reversing other or this is permitted if it means no moveTo command is necessary when unioning the paths.

      • OptionalallowReverse?: boolean

    Returns Path

  • Returns a path that outlines rect.

    If lineWidth is given, the resultant path traces a lineWidth thick border around rect. Otherwise, the resultant path is just the border of rect.

    Parameters

    • rect: Rect2
    • lineWidth: null | number = null

    Returns Path

  • Create a Path from a subset of the SVG path specification.

    Currently, this does not support elliptical arcs or s and t command shorthands. See https://github.com/personalizedrefrigerator/js-draw/pull/19.

    Parameters

    • pathString: string

    Returns Path

    import { Path } from '@js-draw/math';
    
    const path = Path.fromString('m0,0l100,100');
    console.log(path.toString(true)); // true: Prefer relative to absolute path commands
    
  • Parameters

    • startPoint: Vec3
    • parts: PathCommand[]
    • OptionalonlyAbsCommands: boolean

      True if we should avoid converting absolute coordinates to relative offsets -- such conversions can lead to smaller output strings, but also take time.

    Returns string

OpenSource licenses