如何在邊界矩形框內旋轉圖像

Question

我有以下img我想拖動（通過拖動矩形頂部的圓圈）並旋轉圖像。

拖動時，我只想在矩形內旋轉圖像而不是矩形本身。 我不確定我是否正確這樣做，當我開始拖動時我有這個公式：

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)

（此時您正在計算從坐標原點到圓的方向）