Javascript画布中最干净的拖放代码

我正在寻找最快、最轻的方式在JS画布上拖放形状和精灵，用于游戏开发

首先，我使用当前鼠标位置和圆的原点进行距离检查。这是可行的，但当它们重叠时，我们会遇到问题，我不知道在每个“帧”上测试多个精灵和其他形状时，这会起多大作用

任何关于更好方法的评论或建议都将不胜感激

我不想使用jQuery这样的库，因为我追求的是纯粹的速度和轻巧，当然也要学习实际的方法！这就是我所处的位置：

//add the canvas listeners and functions

canvas.addEventListener("mousemove",mousemove);
canvas.addEventListener("mousedown",mousedown);
canvas.addEventListener("mouseup",mouseup);

function mousemove(e){
    mouseX = e.layerX - canvas.offsetLeft;
    mouseY = e.layerY - canvas.offsetTop;

//for each circle stored in my array of Circle objects, is my mouse within its'           
//bounds? If so, set the circles' (X,Y) to my mouse's (X,Y)

    for(i=0;i<circArray.length;i++){
        dx = mouseX - circArray[i].x;
        dy = mouseY - circArray[i].y;
        dist = Math.sqrt((dx*dx) + (dy*dy));
        if(draggable && dist < circArray[i].r){         
            circArray[i].x = mouseX;
            circArray[i].y = mouseY;
        }
    }
}

function mousedown(){
        draggable = true;
}

function mouseup(){
        draggable = false;
}

//添加画布侦听器和函数
canvas.addEventListener（“mousemove”，mousemove）；
canvas.addEventListener（“mousedown”，mousedown）；
canvas.addEventListener（“mouseup”，mouseup）；
函数mousemove（e）{
mouseX=e.layerX-canvas.offsetLeft；
mouseY=e.layerY-canvas.offsetTop；
//对于存储在圆形对象数组中的每个圆形，鼠标是否在其
//边界？如果是，将圆圈（X，Y）设置为鼠标的（X，Y）
对于（i=0；i这是我用于拖动单个项目的设置。我无法确定是否要拖动多个项目，这只是一个小小的修改

换句话说：在mousedown搜索一个命中对象时，按照您绘制对象的保留顺序（因此最上面的项目首先被命中），存储该命中项目，然后mousedrag只是将坐标/增量管道传输到该项目

//start with only the mousedown event attached
canvas.addEventListener("mousedown",mousedown);

//and some vars to track the dragged item
var dragIdx = -1;
var dragOffsetX, dragOffsetY;

function mousedown(e){
    //...calc coords into mouseX, mouseY
    for(i=circArray.length; i>=0; i--){ //loop in reverse draw order
        dx = mouseX - circArray[i].x;
        dy = mouseY - circArray[i].y;
        if (Math.sqrt((dx*dx) + (dy*dy)) < circArray[i].r) {         
            //we've hit an item
            dragIdx = i; //store the item being dragged
            dragOffsetX = dx; //store offsets so item doesn't 'jump'
            dragOffsetY = dy;
            canvas.addEventListener("mousemove",mousemove); //start dragging
            canvas.addEventListener("mouseup",mouseup);
            return;
        }
    }
}

function mousemove(e) {
     //...calc coords
     circArray[dragIdx].x = mouseX + dragOffsetX; //drag your item
     circArray[dragIdx].y = mouseY + dragOffsetY;
     //...repaint();
}

function mouseup(e) {
     dragIdx = -1; //reset for next mousedown
     canvas.removeListener(.... //remove the move/up events when done
}

//仅从附加的mousedown事件开始
canvas.addEventListener（“mousedown”，mousedown）；
//和一些变量来跟踪拖动的项目
var dragIdx=-1；
变量dragOffsetX，dragOffsetY；
功能鼠标向下（e）{
//…计算出mouseX的坐标，mouseY
对于（i=circArray.length；i>=0；i--）{//以相反的绘制顺序循环
dx=mouseX-circArray[i].x；
dy=mouseY-circArray[i].y；
如果（Math.sqrt（（dx*dx）+（dy*dy））

我的js现在已经生锈了，但这应该能说明问题。dragOffsetX/Y用于防止项目在单击时跳转到光标。你也可以只存储旧的鼠标坐标，然后在项目中添加一个增量

此外，您可以存储对拖动项的引用，也可以存储对拖动项的引用数组，而不是存储拖动项的索引。您可以在拖动项上放置鼠标向下/拖动/向上界面，让它们处理拖动项。这样可以更容易地混合其他类型的项

另一件我不确定的事情是你如何计算你的坐标。我做了一些不同的事情，但它是旧代码，我猜你的方法也可以测量。-t
你在考虑jQuery UI Dragables（）。即使你不使用jQuery，我也强烈建议你检查一个未统一的版本，看看他们会做什么。开发人员肯定已经考虑了其中的一些性能问题。由于许可证的开放，你可能会删除一小部分代码库。你可能想看一下。下面是一个演示：我非常确定
circArray[dragIdx].x=mouseX+dragOffsetX；
实际上应该是“circArray[dragIdx].x=mouseX-dragOffsetX；”。这样就可以从鼠标位置减去dragOffset。