Skip to content

Instantly share code, notes, and snippets.

@wesbos
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.
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(' ');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment