Adding rotation handles in Interact JS
The documentation of Interact JS doesn't mention anything about rotating interactable elements. I will show you how you can implement rotation handles using Interact JS.
Concept¶
Here's a general outline of how it works:
- Create a separate interactable object which we will use as rotation handle.
- When this rotation handle is dragged, instead of changing its position, we will change its parent's rotation angle.
Demo¶
Here's a fiddle containing the demo:
Link to the fiddle: https://jsfiddle.net/axnyfuj8/1/.
Credits¶
I didn't come up with this solution all on my own. Most of the important code which does the trigonometric calculations to find the angle has been borrowed from this Codepen.