thednp / svg-path-commander

Typescript tools for advanced processing of SVG path data.
https://thednp.github.io/svg-path-commander/
MIT License
222 stars 19 forks source link

path2Curve produces wrong result when converting L command #17

Closed xiaoiver closed 2 years ago

xiaoiver commented 2 years ago

Path for testing:

M57.063 -18.541L13.225 -18.203L0 -60L-13.225 -18.203L-57.063 -18.541L-21.399 6.953L-35.267 48.541L0 22.5L35.267 48.541L21.399 6.953Z

after toCurve, I changed some CSS style:

fill: none;
stroke: red;
截屏2022-06-21 下午3 04 24
thednp commented 2 years ago

Thanks for the report, I believe this must be related to the latest optimizations, but will look into it asap.

xiaoiver commented 2 years ago

Thanks for the report, I believe this must be related to the latest optimizations, but will look into it asap.

Thanks, I think the problem came from the following lines which calculate control points of cubic bezier: https://github.com/thednp/svg-path-commander/blob/master/src/process/lineToCubic.js#L24-L29

thednp commented 2 years ago

Exactly.

thednp commented 2 years ago

@xiaoiver please test latest master, it's solved for me.

thednp commented 2 years ago

@xiaoiver can you please confirm the fix? We're ready to push the next v1.0.5 now.

xiaoiver commented 2 years ago

@xiaoiver can you please confirm the fix? We're ready to push the next v1.0.5 now.

I found another bug about converting A command to C, this is my test path:

M7.34788079488412e-15,-120A120,120,0,0,1,95.46267154065043,-72.71092312934756L59.66416971290652,-45.44432695584223A75,75,0,0,0,4.592425496802574e-15,-75Z

It should look like this:

截屏2022-06-21 下午11 01 03

But after converting to curve, it became this:

截屏2022-06-21 下午11 01 53
thednp commented 2 years ago

I found the problem, it's the arcToCubic that's messing things up, also an issue introduced with the ES5->ES6 changes.

Will come back with a fix asap. Stay tuned.

thednp commented 2 years ago

@xiaoiver please test. Now this works for me

image