rveciana / svg-path-properties

Pure Javascript alternative to path.getPointAtLength(t) and getTotalLength() functions. Works with Canvas & Node

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

getTangentAtLength / getPropertiesAtLength return wrong values for elleptical arcs

eltapir opened this issue · comments

The functions getTangentAtLength() and getPropertiesAtLength() seem to return wrong values when use in combination with elliptical arcs. To demonstrate the issue I put a link below to a codepen. You could use it (whith some minor adaptations) as a work around as well.

https://codepen.io/krisheyse/pen/ZEGPzZr

It needs more testing, but this seems to work.
I changed the getTangentAtLength() function in arc.ts with the following:

`
public getTangentAtLength = (fractionLength: number): Point => {

const point_dist = 0.05; // needs testing    
const p1 = this.getPointAtLength(fractionLength);
let p2: Point;

if (fractionLength < 0) {
  fractionLength = 0;
} else if (fractionLength > this.length) {      
  fractionLength = this.length;
}

if (fractionLength < this.length - point_dist) {
  p2 = this.getPointAtLength(fractionLength + point_dist);
} else {
  p2 = this.getPointAtLength(fractionLength - point_dist);
}

const xDist = p2.x - p1.x;
const yDist = p2.y - p1.y;
const dist = Math.sqrt(xDist * xDist + yDist * yDist);

if (fractionLength < this.length - point_dist) {
  return { x: -xDist / dist, y: -yDist / dist };
} else {
  return { x: xDist / dist, y: yDist / dist };
}

};

`

Thank you, I changed it and now it works. Using the normals instead of tngents makes it simpler to see.

Version 1.0.4 include the changes