thednp / svg-path-commander

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

pathToCurve 2 consecutive arcs produces different shape #4

Closed neslho closed 2 years ago

neslho commented 2 years ago

Using the pathToCurve function to convert 2 consecutive arcs produces a different shape.

Here you can see the result of 2 arcs that form an ellipse converted to cubic beziers: https://codepen.io/danohlsen/pen/GREgoMo

2arcs

PS very useful lib BTW! 💙

thednp commented 2 years ago

Hello. Unfortunately I don't remember how to determine the arc flags right now, but I will have a look. Meanwhile, can you test if Raphael / similar library produce the same effect? At least I can know what/where to look for :)

It's possible we might have missed a typo during the war with the old code.

thednp commented 2 years ago

Eh problem solved. A single character needed to be changed.

Will commit to the clouds once I'm done with its TypeScript and JSDoc.

thednp commented 2 years ago

Proof everything is working:

image

Paste computed value:

M20 50C20.000000000000004 57.69800358919501 45 62.509255832441895 65 58.66025403784439C74.2820323027551 56.87392608830357 80 53.57265589908164 80 50C80 42.30199641080499 55.00000000000001 37.490744167558105 35.00000000000001 41.33974596215561C25.717967697244916 43.12607391169643 20 46.42734410091836 20 50C20 50 20 50 20 50

I'm almost done with SVGPathCommander, expect the update to drop on NPM shortly.

thednp commented 2 years ago

Ok you can test the master for now, if anything, but if you confirm, we can push it to NPM asap.

Thanks

neslho commented 2 years ago

Looks good on my end.

arc-test

Thanks for the fast fix!