小编Ver*_*rne的帖子

Javascript Canvas中最干净的拖放代码

我正在寻找最快最轻的方法来在JS Canvas上拖放形状和精灵以进行游戏开发.

我开始使用当前鼠标位置和圆圈的起点进行距离检查.它可以工作,但是当它们重叠时我们会遇到问题,而且我不知道在每个'框架'上测试多个精灵和其他形状时它的效果如何.

任何评论或指向更好的方法表示赞赏!

我宁愿不使用类似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;
        } …
Run Code Online (Sandbox Code Playgroud)

javascript html5 drag-and-drop canvas html5-canvas

7
推荐指数
1
解决办法
9838
查看次数

标签 统计

canvas ×1

drag-and-drop ×1

html5 ×1

html5-canvas ×1

javascript ×1