[#1198] add preliminary SVG path parsing to the Path2D class

unoptimized and only works for basic shapes for now

src/geometries/path2d.js

@@ -1,13 +1,13 @@
 import pool from "./../system/pooling.js";
 import { TAU } from "./../math/math.js";
 import earcut from "earcut";
-
+import { endpointToCenterParameterization } from "./toarccanvas.js";
 /**
  * @classdesc
  * a simplified path2d implementation, supporting only one path
  */
 export default class Path2D {
- constructor() {
+ constructor(svgPath) {
  /**
  * the points defining the current path
  * @type {Point[]}
@@ -29,8 +29,75 @@ export default class Path2D {
 
  /* @ignore */
  this.isDirty = false;
+
+ if (typeof svgPath === "string") {
+ this.parseSVGPath(svgPath);
+ }
+ }
+
+ /**
+ * Parses an SVG path string and adds the points to the current path.
+ * @param {string} svgPath - The SVG path string to parse.
+ */
+ parseSVGPath(svgPath) {
+ // Split path into commands and coordinates
+ const pathCommands = svgPath.match(/([a-df-z])[^a-df-z]*/gi);
+ const points = this.points;
+ const startPoint = this.startPoint;
+ let lastPoint = startPoint;
+
+ this.beginPath();
+
+ // Process each command and corresponding coordinates
+ for (let i = 0; i < pathCommands.length; i++) {
+ const pathCommand = pathCommands[i];
+ const command = pathCommand[0].toUpperCase();
+ const coordinates = pathCommand.slice(1).trim().split(/[\s,]+/).map(parseFloat);
+
+ switch (command) {
+ case "A": {
+ // A command takes 5 coordinates
+ const p = endpointToCenterParameterization(...coordinates);
+ this.arc(p.x, p.y, p.radiusX, p.radiusY, p.rotation, p.startAngle, p.endAngle, p.applyanticlockwise);
+ }
+ break;
+ case "H":
+ // H take 1 coordinate
+ lastPoint = points.length === 0 ? startPoint : points[points.length-1];
+ this.lineTo(lastPoint.x + coordinates[0], lastPoint.y);
+ break;
+ case "V":
+ // V take 1 coordinate
+ lastPoint = points.length === 0 ? startPoint : points[points.length-1];
+ this.lineTo(lastPoint.x, lastPoint.y + coordinates[0]);
+ break;
+ case "M":
+ // M takes 2 coordinates
+ this.moveTo(...coordinates);
+ break;
+ case "L":
+ // L takes 2 coordinates
+ this.lineTo(...coordinates);
+ break;
+ case "Q":
+ // Q takes 4 coordinates
+ this.quadraticCurveTo(...coordinates);
+ break;
+ case "C":
+ // C takes 6 coordinates
+ this.bezierCurveTo(...coordinates);
+ break;
+ case "Z":
+ this.closePath();
+ break;
+ default:
+ console.warn("Unsupported command:", command);
+ break;
+ }
+ }
  }
 
+
  /**
  * begin a new path
  */
@@ -190,9 +257,11 @@ export default class Path2D {
  */
  arcTo(x1, y1, x2, y2, radius) {
  let points = this.points;
- // based on from https://github.com/karellodewijk/canvas-webgl/blob/master/canvas-webgl.js
- let x0 = points[points.length-1].x, y0 = points[points.length-1].y;
+ let startPoint = this.startPoint;
+ let lastPoint = points.length === 0 ? startPoint : points[points.length-1];
 
+ // based on from https://github.com/karellodewijk/canvas-webgl/blob/master/canvas-webgl.js
+ let x0 = lastPoint.x, y0 = lastPoint.y;
  //a = -incoming vector, b = outgoing vector to x1, y1
  let a0 = x0 - x1, a1 = y0 - y1;
  let b0 = x2 - x1, b1 = y2 - y1;
@@ -286,6 +355,62 @@ export default class Path2D {
  this.isDirty = true;
  }
 
+ /**
+ * Adds a quadratic Bézier curve to the path.
+ * @param {number} cpX - The x-coordinate of the control point.
+ * @param {number} cpY - The y-coordinate of the control point.
+ * @param {number} x - The x-coordinate of the end point of the curve.
+ * @param {number} y - The y-coordinate of the end point of the curve.
+ */
+ quadraticCurveTo(cpX, cpY, x, y) {
+ const points = this.points;
+ const startPoint = this.startPoint;
+ const lastPoint = points.length === 0 ? startPoint : points[points.length-1];
+ const endPoint = pool.pull("Point").set(x, y);
+ const controlPoint = pool.pull("Point").set(cpX, cpY);
+ const resolution = this.arcResolution;
+
+ const t = 1 / resolution;
+ for (let i = 1; i <= resolution; i++) {
+ this.lineTo(
+ lastPoint.x * Math.pow(1 - t * i, 2) + controlPoint.x * 2 * (1 - t * i) * t * i + endPoint.x * Math.pow(t * i, 2),
+ lastPoint.y * Math.pow(1 - t * i, 2) + controlPoint.y * 2 * (1 - t * i) * t * i + endPoint.y * Math.pow(t * i, 2)
+ );
+ }
+ pool.push(endPoint, controlPoint);
+ this.isDirty = true;
+ }
+
+ /**
+ * Adds a cubic Bézier curve to the path.
+ * @param {number} cp1X - The x-coordinate of the first control point.
+ * @param {number} cp1Y - The y-coordinate of the first control point.
+ * @param {number} cp2X - The x-coordinate of the second control point.
+ * @param {number} cp2Y - The y-coordinate of the second control point.
+ * @param {number} x - The x-coordinate of the end point of the curve.
+ * @param {number} y - The y-coordinate of the end point of the curve.
+ */
+ bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y) {
+ const points = this.points;
+ const startPoint = this.startPoint;
+ const lastPoint = points.length === 0 ? startPoint : points[points.length-1];
+ const endPoint = pool.pull("Point").set(x, y);
+ const controlPoint1 = pool.pull("Point").set(cp1X, cp1Y);
+ const controlPoint2 = pool.pull("Point").set(cp2X, cp2Y);
+ const resolution = this.arcResolution;
+
+ const t = 1 / resolution;
+ for (let i = 1; i <= resolution; i++) {
+ this.lineTo(
+ lastPoint.x * Math.pow(1 - t * i, 3) + controlPoint1.x * 3 * Math.pow(1 - t * i, 2) * t * i + controlPoint2.x * 3 * (1 - t * i) * Math.pow(t * i, 2) + endPoint.x * Math.pow(t * i, 3),
+ lastPoint.y * Math.pow(1 - t * i, 3) + controlPoint1.y * 3 * Math.pow(1 - t * i, 2) * t * i + controlPoint2.y * 3 * (1 - t * i) * Math.pow(t * i, 2) + endPoint.y * Math.pow(t * i, 3)
+ );
+ }
+
+ pool.push(endPoint, controlPoint1, controlPoint2);
+ this.isDirty = true;
+ }
+
  /**
  * creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
  * @param {number} x - the x-axis coordinate of the rectangle's starting point.

src/geometries/toarccanvas.js

@@ -0,0 +1,94 @@
+import { degToRad, pow } from "./../math/math.js";
+
+function correctRadii(signedRx, signedRy, x1p, y1p) {
+ const prx = Math.abs(signedRx);
+ const pry = Math.abs(signedRy);
+
+ const A = pow(x1p) / pow(prx) + pow(y1p) / pow(pry);
+
+ const rx = A > 1 ? Math.sqrt(A) * prx : prx;
+ const ry = A > 1 ? Math.sqrt(A) * pry : pry;
+
+ return [rx, ry];
+}
+
+function mat2DotVec2([m00, m01, m10, m11], [vx, vy]) {
+ return [m00 * vx + m01 * vy, m10 * vx + m11 * vy];
+}
+
+function vec2Add([ux, uy], [vx, vy]) {
+ return [ux + vx, uy + vy];
+}
+
+function vec2Scale([a0, a1], scalar) {
+ return [a0 * scalar, a1 * scalar];
+}
+
+function vec2Dot([ux, uy], [vx, vy]) {
+ return ux * vx + uy * vy;
+}
+
+function vec2Mag([ux, uy]) {
+ return Math.sqrt(ux ** 2 + uy ** 2);
+}
+
+function vec2Angle(u, v) {
+ const [ux, uy] = u;
+ const [vx, vy] = v;
+ const sign = ux * vy - uy * vx >= 0 ? 1 : -1;
+ return sign * Math.acos(vec2Dot(u, v) / (vec2Mag(u) * vec2Mag(v)));
+}
+
+// From https://svgwg.org/svg2-draft/implnote.html#ArcConversionEndpointToCenter
+export function endpointToCenterParameterization(x1, y1, x2, y2, largeArcFlag, sweepFlag, srx, sry, xAxisRotationDeg) {
+ const xAxisRotation = degToRad(xAxisRotationDeg);
+
+ const cosphi = Math.cos(xAxisRotation);
+ const sinphi = Math.sin(xAxisRotation);
+
+ const [x1p, y1p] = mat2DotVec2(
+ [cosphi, sinphi, -sinphi, cosphi],
+ [(x1 - x2) / 2, (y1 - y2) / 2]
+ );
+
+ const [rx, ry] = correctRadii(srx, sry, x1p, y1p);
+
+ const sign = largeArcFlag !== sweepFlag ? 1 : -1;
+ const n = pow(rx) * pow(ry) - pow(rx) * pow(y1p) - pow(ry) * pow(x1p);
+ const d = pow(rx) * pow(y1p) + pow(ry) * pow(x1p);
+
+ const [cxp, cyp] = vec2Scale(
+ [(rx * y1p) / ry, (-ry * x1p) / rx],
+ sign * Math.sqrt(Math.abs(n / d))
+ );
+
+ const [cx, cy] = vec2Add(
+ mat2DotVec2([cosphi, -sinphi, sinphi, cosphi], [cxp, cyp]),
+ [(x1 + x2) / 2, (y1 + y2) / 2]
+ );
+
+ const a = [(x1p - cxp) / rx, (y1p - cyp) / ry];
+ const b = [(-x1p - cxp) / rx, (-y1p - cyp) / ry];
+ const startAngle = vec2Angle([1, 0], a);
+ const deltaAngle0 = vec2Angle(a, b) % (2 * Math.PI);
+
+ const deltaAngle =
+ !sweepFlag && deltaAngle0 > 0
+ ? deltaAngle0 - 2 * Math.PI
+ : sweepFlag && deltaAngle0 < 0
+ ? deltaAngle0 + 2 * Math.PI
+ : deltaAngle0;
+
+ const endAngle = startAngle + deltaAngle;
+
+ return {
+ cx,
+ cy,
+ rx,
+ ry,
+ startAngle,
+ endAngle,
+ xAxisRotation,
+ anticlockwise: deltaAngle < 0
+ };
+}

src/math/math.js

@@ -207,3 +207,13 @@ export function round(num, dec = 0) {
 export function toBeCloseTo(expected, actual, precision = 2) {
  return Math.abs(expected - actual) < (Math.pow(10, -precision) / 2);
 }
+
+
+/**
+ * Calculates the power of a number.
+ * @param {number} n - The number to be raised to the power of 2.
+ * @returns {number} The result of raising the number to the power of 2.
+ */
+export function pow(n) {
+ return Math.pow(n, 2);
+}