How to rotate a shape?

Question

JavaScript

Hello,
the task is to implement the rotation of the figure around its axis, similar to how in PowerPoint.

I'm trying to implement by analogy .
It does not work. The figure twitches, does not turn to the desired angle. What am I doing wrong?
JSFiddle
Thank you very much!

Answer 1

You need three points. The first is the starting position of the corner you're dragging, the second is the position of the pointer, and the third is the center of the shape. Determine the value of the angle of the center of the figure, there will be a value from 0 to 360. Thus, you will have to add (subtract) this value to the initial value of the rotation. If in radians, then convert to them accordingly. Determining the direction of movement of the pointer is not difficult, start from its initial position.

Answer 2

Basically just take the angle between the pivot point, usually the center of the shape, and the mouse coordinates. Here is an example