Как повернуть изображение внутри ограничивающего прямоугольника

Question

У меня есть следующее изображение, которое я хотел бы перетащить (перетаскивая круг поверх прямоугольника) и повернуть изображение.

При перетаскивании я простохотите повернуть изображение внутри прямоугольника, а не сам прямоугольник.Я не уверен, что я делаю это правильно, у меня есть эта формула, когда я начинаю перетаскивать:

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

Я получаю положение круга сверхупрямоугольник, но это дает мне что-то между 90 до 110 градусов.Правильный угол поворота будет начинаться с 0 Я думаю, и должен вращаться между 0-360 градусами.

Может кто-нибудь подсказать мне, как рассчитать угол поворота?

Answer 1

Если я правильно понимаю ваши потребности, вы должны измерить угол направления от центральной точки прямоугольника к центру круга.

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

(В данный момент вы рассчитываете направление от начала координат до круга)