rveciana / svg-path-properties

Pure Javascript alternative to path.getPointAtLength(t) and getTotalLength() functions. Works with Canvas & Node
MIT License
256 stars 22 forks source link

getPropertiesAtLength in a bezier part returns x coordinate for both x and y #43

Closed logi closed 3 years ago

logi commented 3 years ago

There is a pretty obvious error on this line:

https://github.com/rveciana/svg-path-properties/blob/7f2466ca0a9097cbe7f6bcfb76c5a69a761cff08/src/bezier.ts#L101

I'm not set up for typescript development so I'm not in a hurry to make a PR for this.

logi commented 3 years ago

The jest tests in my project to verify that the library doing the wrong thing:

describe('svgPathProperties', () => {

    const spp = require('svg-path-properties');
    const pathStr = 'M224,32C153,195,69,366,76,544C77,567,97,585,105,606C133,683,137,768,175,840C193,875,225,902,250,932';

    it('returns point at length', () => {
        const pathProps = spp.svgPathProperties(pathStr);
        const point = pathProps.getPointAtLength(300);
        expect(point).toEqual({
            x: 111.7377391058728,
            y: 310.0179550672576,
        });
    });
    it('returns tangent at length', () => {
        const pathProps = spp.svgPathProperties(pathStr);
        const tangent = pathProps.getTangentAtLength(300);
        expect(tangent).toEqual({
            x: -0.29770950875462776,
            y: 0.9546565080682572,
        });
    });
    it.skip('returns properties at length', () => {  // Fails because of https://github.com/rveciana/svg-path-properties/issues/43
        const pathProps = spp.svgPathProperties(pathStr);
        const props = pathProps.getPropertiesAtLength(300);
        expect(props).toEqual({
                x: 111.7377391058728,
                y: 310.0179550672576,  // This is incorrectly equal to 111.7377391058728 
                tangentX: -0.29770950875462776,
                tangentY: 0.9546565080682572,
            },
        );
    });

});
rveciana commented 3 years ago

I'll take a look, thank you.

logi commented 3 years ago

Just to be obvious, the second xs passed to this.getPoint should be xy. Although I'd probably replace every xy in that file with ys as well.

rveciana commented 3 years ago

Solved and npm version bumped. Thanks a lot