Skip to content

Instantly share code, notes, and snippets.

@wesbos

wesbos/quick-path.ts

Created November 9, 2023 20:31
Show Gist options
  • Save wesbos/e853e7bc0640c1e9aa77c638bb413aac to your computer and use it in GitHub Desktop.
Save wesbos/e853e7bc0640c1e9aa77c638bb413aac to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. wesbos renamed this gist Nov 9, 2023. 1 changed file with 0 additions and 0 deletions.
    0 quick-path-ts → quick-path.ts
    View file
    File renamed without changes.
  2. wesbos created this gist Nov 9, 2023.
    70 changes: 70 additions & 0 deletions quick-path-ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    class PathMe {

    moves: string[] = [];

    constructor() {
    this.moves = [];
    return this;
    }

    moveTo(x: number, y: number) {
    this.moves.push(`M ${x} ${y}`);
    return this;
    }

    closePath() {
    this.moves.push('Z');
    return this;
    }

    lineTo(x: number, y: number) {
    this.moves.push(`L ${x} ${y}`);
    return this;
    }

    horizontalLineTo(x: number) {
    this.moves.push(`H ${x}`);
    return this;
    }

    verticalLineTo(y: number) {
    this.moves.push(`V ${y}`);
    return this;
    }

    curveTo(x1: number, y1: number, x2: number, y2: number, x: number, y: number) {
    this.moves.push(`C ${x1} ${y1} ${x2} ${y2} ${x} ${y}`);
    return this;
    }

    smoothCurveTo(x2: number, y2: number, x: number, y: number) {
    this.moves.push(`S ${x2} ${y2} ${x} ${y}`);
    return this;
    }

    quadraticCurveTo(x1: number, y1: number, x: number, y: number) {
    this.moves.push(`Q ${x1} ${y1} ${x} ${y}`);
    return this;
    }

    smoothQuadraticCurveTo(x: number, y: number) {
    this.moves.push(`T ${x} ${y}`);
    return this;
    }

    arc(rx: number, ry: number, xAxisRotation: number, largeArcFlag: boolean, sweepFlag: boolean, x: number, y: number) {
    const largeArc = largeArcFlag ? 1 : 0;
    const sweep = sweepFlag ? 1 : 0;
    this.moves.push(`A ${rx} ${ry} ${xAxisRotation} ${largeArc} ${sweep} ${x} ${y}`);
    return this;
    }

    catmullRomCurveTo(x1: number, y1: number, x: number, y: number) {
    this.moves.push(`R ${x1} ${y1} ${x} ${y}`);
    return this;
    }

    toString() {
    return this.moves.join(' ');
    }
    }