在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
}

我故意避免发布大部分代码，因为我确定问题出在这些方面。

代码说明：当您单击按钮时，鼠标的位置将存储在类rotationYClick的变量Button中。拖动鼠标时，鼠标位置会不断与存储值进行比较：当前鼠标位置与您单击的点之间的距离将决定按钮旋转的程度。问题是，当你再次点击它时，旋转被设置回零。怎么解决？！

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;
}