search

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

Reflection of points across a user-defined line #117

Open Fjara-h opened 1 year ago

Fjara-h commented 1 year ago

This works with absolute values every nicely, each point will reflect across the defined line exactly. The result is a little unexpected, not sure if (un)desirable, when a relative MoveTo is after another path, it will calculate the position using the previous path's values.

The MoveTo override was made for relative if it is the very first point in the entire input then it will be properly reflected across the line.

Feel free to change anything. I did some testing but it is possible I missed some edge cases. I was not sure what code style is preferred so I kept passing x1,y1,x2,y2 instead of passing calculated values.

Fjara-h commented 1 year ago

I also wanted to add a display of line created by the two points when hovering over the Reflect button without it actually making it an editable path (but maybe that is also a viable option), but that is way beyond my current ability.

Yqnn commented 1 year ago

Thanks for the contribution 👍 .

Few remarks: That could be implemented with much less code by reusing translate, rotate and scaleoperations. Basically:

translate(-x1, -y1)
rotate(0, 0, angle(x1-x2, y1-y2))
scale(1, -1)
rotate(0, 0, -angle(x1-x2, y1-y2))
translate(x1, y1)

And with a bit of math, it should be achievable with only 1 operation of each type.

However I'm not convinced by the UX: the PATH OPERATIONS menu is already crowded. I will try to find a way to make it lighter before adding new items in it.