如何順時針或逆時針旋轉圖像，以較短者爲準？

我正在製作一個網頁，其中包含一個箭頭在中心的時鐘。當用戶點擊一小時時，箭頭旋轉指向他/她點擊的內容。如何順時針或逆時針旋轉圖像，以較短者爲準？

我正在使用jQuery圖像旋轉插件（jQueryRotate）來旋轉箭頭。

這裏是當前的代碼以計算的度數旋轉：

var numTiles = $("ul li").size(); // Number of tiles is however many are listed in the UL, which is 12 
var sel = 0; // Default hour selection 
var rot = 0; // Default rotation is at the top (0 degrees) 
var gap = 360/numTiles; // Degrees between each tile 

function rotateArrow(num) { 
    rot = num * gap; 
    $("#arrow").rotateAnimation(rot); 
    sel = num; 
}

當用戶點擊的一個小時，它通過NUM爲值1到12

它工作正常，但問題是如果箭頭指向1點，並且用戶點擊11點，則箭頭順時針旋轉300度，當逆時針旋轉60度時更有意義。

那麼，我該如何編寫一個方程來獲取當前小時數（num）和點擊小時數（sel），並將值作爲正數或負數輸出，該數值等於最需要旋轉的度數高效率，而不是隻在一個方向旋轉？

任何意見表示讚賞。如果您有任何問題，請告訴我。謝謝！

來源

2010-11-30 Wes

這確實相當枯燥的工作：

function diff(x, y) { 
    var a = (x * Math.PI/180) - Math.PI; 
    var b = (y * Math.PI/180) - Math.PI; 
    return Math.atan2(Math.sin(b - a), Math.cos(b - a)) * (180/Math.PI); 
}

它返回 - 180到180，取決於哪個旋轉將是最短的。

diff(360, 20) 
> 19.999999999999993 
diff(20, 360) 
> -19.999999999999993 
diff(0, 160) 
> 160 
diff(0, 190) 
> -170

來源

2010-11-30 04:19:21

伊沃，就是這樣！非常感謝！爲了將來的參考，我把一個Math.round（）放到一個整數中 – Wes 2010-11-30 07:14:42

基本上最接近的旋轉總是小於180度，所以如果你的角度大於180，就從它減去360得到負角度。以你自己的例子來說，如果你以300度結束，減去360得到-60度。

所以添加到您當前的代碼行：

rot = num * gap;

所有你需要的是：

if (rot > 180) 
    rot -= 360;

來源

2010-11-30 03:41:29 casablanca

如何順時針或逆時針旋轉圖像，以較短者爲準？

回答

相關問題