如何使用鼠標動作圍繞固定點旋轉HTML畫布對象？

Question

例如，它可以用於手動調節時鍾指針的應用中。 我想這可能涉及平移針頭（使針頭的端點成為旋轉中心），然后旋轉針頭，然后再次平移針頭。

但是由於指針一直在監聽鼠標事件，因此將捕獲第一個鼠標事件。 結果是針頭最終被平移並且完全不旋轉。 鼠標事件也無法調試...

我可以參考任何想法或代碼片段嗎？ 使用Javascript或CSS都可以旋轉。

Answer 1

在您的示例中，您將需要計算鍾面中心（黑點）與當前鼠標位置（紅點）之間相對於Y軸（如果您想到羅盤，則為北向）的夾角。

如果我沒記錯我的觸發器，則可以使用以下方法進行計算：

var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;

// alter the angle to be relative to Y axis instead of X
angle += 90;
if(angle < 0) { angle = 360 + angle; }

在公式中，x和y是兩個點的坐標，您將知道其中一個（它是鍾面的中心），而另一個可以從鼠標移動事件中獲得。

一旦有了角度，您就可以平移到圓心，將畫布旋轉計算出的量，然后繪制手。

更新：我創建了一個jsfiddle來說明角度計算：

http://jsfiddle.net/DAEpy/1/