javascript - 如何为 Canvas 上的对象编写 "drag"事件？

Question

(我纠正了 mousedown 的事情..)

我想实现的是在 Canvas 上拖动一个球，然后球会跟随鼠标改变颜色。

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

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

现在的问题是，

1. “拖动”看起来很奇怪，似乎“拖动”了第一个球，但是在第一个球之后只有 mousemove(没有鼠标按下)是可以的。
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);
   }

非常感谢。

Answer 1

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

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

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

最好的方法是:

1) 在 mouseDown 上，检测是否已选择球并保存该 ID。 (设置 mousePressed=true)

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

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