The cause is that the arrow function which Point.transform passes to Point.mapPoints modifies the value of its parameter x (which should hold the x-coordinate of the original point), and then uses the modified x (instead of using the original x) to compute the y-coordinate of the transformed point in its second line.
The fix is straightforward: e.g., introduce variables tx and ty for the transformed point:
return this.mapPoints((x, y) => {
const tx = m0 * x + m2 * y + m4;
const ty = m1 * x + m3 * y + m5;
return [tx, ty];
});
When rotating a Path with
Path.rotate(angle)
, the resulting path is distorted.https://github.com/foliojs/fontkit/blob/417af0c79c5664271a07a783574ec7fac7ebad0c/src/glyph/Path.js#L202-L208
The cause is that the arrow function which
Point.transform
passes toPoint.mapPoints
modifies the value of its parameterx
(which should hold the x-coordinate of the original point), and then uses the modifiedx
(instead of using the originalx
) to compute the y-coordinate of the transformed point in its second line.The fix is straightforward: e.g., introduce variables
tx
andty
for the transformed point: