2

（我更正了 mousedown 的事情..）

我想要实现的是在画布上拖动一个球，然后球将跟随鼠标并改变它的颜色。

一旦鼠标松开它，它的颜色就会变回原来的颜色。

我使用“break”是因为一次只能拖动一个球。

现在的问题是，

  1. “拖动”似乎很奇怪，似乎“拖动”了第一个球，但只有在第一个球之后才可以使用鼠标移动（没有鼠标按下）。
  2. 颜色不变

下面的主要功能（完整代码在这里 http://jsfiddle.net/nyTkU/1/）：

var mousePress = false;
var mouseEvent = function(){

$(canvas).mousedown(function(e){

    mousePress = true;

    $(canvas).mousemove(function(e){

            for(var i=0;i<figureNum;i++){

                var distX=e.pageX-balls[i].x;
                var distY=e.pageY-balls[i].y;
                var distance = Math.sqrt((distX*distX)+(distY*distY));

                if(distance<=20){
                    balls[i].x=e.pageX;
                    balls[i].y=e.pageY;
                    if(mousePress){
                       balls[i].c="#F05133";
                    }


                    break;
                }

                //else{balls[i].c="#FFED79";}

        }
    });
});


$(canvas).mouseup(function(e){

    mousePress=false;

    //for(var i=0;i<figureNum;i++){

    //  balls[i].c="#FFED79";

    //}
})

setTimeout(animate,speedMouse);
   }

非常感谢。

4

1 回答 1

1

你有两个 mouseDown 事件......也许第二个应该是 mouseUp？

我对您想要的功能仍然有些困惑。您是否希望球仅在 mouseDown=true 时移动，或者如果单击一次球应该移动？因为您应该在第二种情况下使用 click() 处理程序。

你的 mouseMove 似乎也很奇怪......你是否试图让某个距离 D 内的任何球绑定到鼠标坐标？这会产生一些奇怪的行为。

最好的方法是：

1) 在 mouseDown 上，检测是否选择了一个球并保存该 ID。（设置 mousePressed=true）

2) 在 mouseMove 上，如果选择了 mousePressed=true && 球，则将该球绑定到鼠标坐标。不要以任何速度更新（）这个球。

3) 在 mouseUp 上，设置 mousePressed=false 并清除任何选定的 Ball

于 2013-07-03T16:10:52.307 回答