javascript - Javascript Canvas 中最干净的拖放代码

Question

我正在寻找一种最快速、最轻便的方法来将形状和 Sprite 拖放到 JS Canvas 上以用于游戏开发目的。

我首先使用当前鼠标位置和圆圈的原点进行距离检查。它可以工作，但是当它们重叠时我们会遇到问题，而且我不知道在每个“帧”上测试多个 Sprite 和其他形状时它的效果如何。

感谢任何关于更好方法的评论或指示!

我宁愿不使用像 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;
}

Answer 1

这是我用于拖动单个项目的设置。我不知道你是否想拖动多个东西，这是一个轻微的修改。

换句话说:在 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
}

我的 js 目前还很生疏，但这应该能说明问题。 dragOffsetX/Y 用于防止项目在单击时跳到光标处。您也可以只存储旧的鼠标坐标并向您的项目添加一个增量。

此外，您可以存储对它的引用，而不是存储拖动项的索引，或者可能是一个引用数组来拖动多个项目。而不是直接操作您的项目，您可以在它们上放置一个鼠标按下/拖动/向上界面，让它们处理它。这将使混入其他类型的项目变得更加容易。

我不确定的另一件事是您如何计算坐标。我做了一些不同的事情，但它是旧代码，我猜你的方法也一样。 -t