rveciana/svg-path-properties

Tangents for points along Linear segments are backwards

scien opened this issue · 0 comments

scien commented

I had some paths that use a combination of Bezier Curves and Linear segments. Every time I reached a linear segment, the tangents would be pointing in the wrong direction.

let path = "M 930 197 L 639 904 L 462 828 L 751 118 Z M 555 183 L 249 896 L 70 810 L 385 96 Z";
let properties = new SVGPathProperties(path);
let p1 = properties.getPointAtLength(8);
let p2 = properties.getPointAtLength(10);
let dx = (p2.x - p1.x)
let dy = (p2.y - p1.y)
let length = Math.sqrt(dx*dx + dy*dy)
let expected = {x: dx/length, y: dy/length}
let actual = properties.getTangentAtLength(9);
console.log({expected, actual})

{
  expected: { x: -0.3806182308124968, y: 0.9247322652385203 },
  actual: { x: 0.38061823081246554, y: -0.9247322652385331 }
}

this is because getTangentAtLength for LinearPosition has negative signs on both the x and y component for some reason:

    return {
      x: -(this.x1 - this.x0) / module,
      y: -(this.y1 - this.y0) / module,
    };

Issue introduced in this commit on Sep 14, 2022: eab0526