1

请看看这个页面

尝试单击面板上的一个大按钮并在 y 轴上移动鼠标。按钮开始按应有的方式旋转。现在，离开你的鼠标并再次点击它们：他们为什么坚持要回到原来的位置？！

这是与按钮旋转相关的代码片段。请注意，在绘图循环中执行的代码每 30 毫秒调用一次。

// 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。当您拖动鼠标时，鼠标位置会不断与存储的值进行比较：当前鼠标位置与您单击的点的距离将决定按钮旋转多少。问题是，当您再次单击它时，旋转设置回零。怎么解决？！

这是我通过更改方法失败的尝试之一

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

非常感谢！

4

1 回答 1

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;
}
于 2012-10-07T00:13:06.867 回答