旋轉在JavaScript界面​​的按鈕

Question

請看看this頁

嘗試點擊面板上的大按鈕之一，移動你的鼠標在y軸上。按鈕開始旋轉，因爲他們應該。現在，留下你的鼠標並再次點擊它們：爲什麼他們堅持要回到原來的位置？！

下面是與按鈕旋轉相關的代碼片段。請注意，在循環中執行的代碼每30ms調用一次。

// method 
Button.prototype.Rotate = function(yDrag){ 
this.rotation = - (yDrag - this.rotationYClick)/80 
} 

// draw loop 
function drawLoop() { 

if (buttons[n].roating == true && mousePressed == true) 
buttons[n].Rotate(mousePosition_y) 
else 
buttons[n].roating = false 
} // end draw loop 

// fired ONLY ONCE when mouse is clicked 
function mouseDown() { 
buttons[n].roating = true 
buttons[n].rotationYClick = mousePosition_y 
} 

我故意避免發佈大部分代碼，因爲我確定問題在於這些行。

代碼解釋：當你點擊一個按鈕時，鼠標的位置存儲在類Button的變量rotationYClick中。拖動鼠標時，鼠標位置會不斷與存儲的值進行比較：當前鼠標位置與單擊位置的距離將決定按鈕的旋轉量。問題是，當你再次點擊它時，旋轉被設置回零。怎麼解決？！

Here's我的失敗嘗試的一個改變方法

// method 
Button.prototype.Rotate = function(yDrag){ 
this.rotation += - (yDrag - this.rotationYClick)/80 
} 

非常感謝！

Answer 1

你在哪裏設置this.rotation。使用+ =而不是=

問題在於，您不必考慮按鈕的當前旋轉角度，而是在每次拖動時重新評估旋轉角度。

編輯

好了，所以它不是是簡單:) 基本上你就必須保持兩個變量。一個用於原始旋轉角度，另一個用於表示當前旋轉。因此，它成爲這樣的事情：

this.rotation = this._originalRotation - ((yDrag-this.rotationYClick)/80); 

和mouseDown變爲：

// fired ONLY ONCE when mouse is clicked 
function mouseDown() { 
    buttons[n].roating = true 
    buttons[n].rotationYClick = mousePosition_y 
    buttons[n]._originalRotation = this.rotation; 
}