如何在边界矩形框内旋转图像

Question

I have the following img that I'd like to drag (by dragging a circle on top of rectangle) and rotate an image.

When dragging, I just want to rotate an image inside the rectangle and not the rectangle itself. I'm not sure I'm doing this correctly, I have this formula when I start dragging:

const newAngle = Math.atan(circleDrag.y, circleDrag.x) * (180 / Math.PI);

I'm getting the position of the circle from the top of the rectangle, but it's giving me something between 90 to 110 degrees only. Correct way of rotation angle would start from 0 I think, and should rotate between 0-360 degrees.

Could somebody direct me on how to calculate rotation angle?

Answer 1

If I understand your needs right, you have to measure angle of direction from the center point of rectangle to the circle center.

Math.atan(circleDrag.y - rectangleCenter.y, circleDrag.x - rectangleCenter.x)

(At this moment you are calculating direction from coordinate origin to the circle)