Yqnn / svg-path-editor

Online editor to create and manipulate SVG paths
https://yqnn.github.io/svg-path-editor/
Apache License 2.0
4.11k stars 335 forks source link

Suggestion request: Ability to convert multiple commands at once. #44

Closed charliecjung closed 2 years ago

charliecjung commented 2 years ago

Hello there,

I was wondering if there was a way to convert multiple existing commands of the same type (e.g. L 100 200 L 300 400 -> Q ? ? ? ? Q ? ? ? ?) to another command of a different type.

I am currently working with an SVG path consisting of C's. However, I was hoping to try to convert all the C's into quadratic bezier curves at once instead of manually converting the commands one by one.

If there are any workarounds available, I am all ears.

Happy Halloween!

Regards, Charlie

danmarshall commented 2 years ago

Q's can be converted to C's, but C's cannot be converted to Q's. See https://pomax.github.io/bezierinfo/#reordering for a lot of math and a detailed explanation.

Also: https://stackoverflow.com/questions/3162645/convert-a-quadratic-bezier-to-a-cubic-one#:~:text=A%20quadratic%20Bezier%20is%20expressed%20as%3A%20Q%28t%29%20%3D,C1%281-t%29%C2%B2%20t%20%2B%203%20C2%281-t%29%20t%C2%B2%20%2B%20C3t%C2%B3

charliecjung commented 2 years ago

Ah I see. Thank you for your response.

I have been looking through the source code, but I cannot seem to find the logic to approximate a quadratic bezier curve from a cubic bezier curve. I know a 1:1 conversion cannot be done, but I really like this project's approximation from a C -> Q.

charliecjung commented 2 years ago

Hello again.

After some digging around in the tool, I found the solution to my problem. I was wondering how this program converted a current command (L or C) to a Q, and it seems like it just grabs the average of the last two values of the previous and current command to become the 2 first values for Q. Last 2 values for Q remain untouched.

E.g. M 2 1 C 1 1 4 5 3 3 ---> average of (2,1) and (3, 3) --> M 2 1 Q 2.5 2 3 3.

I will close this issue. Thank you @danmarshall for your response!