Question

我正在为项目创建一个多项拖放，并且已经到达了墙。

目前我已经在画布中添加了5个正方形项目，并将x，y，width，height，bgcolour存储到名为items的数组中。我已经检测到鼠标选择其中一个方块并且可以拖动项目。不过我的问题是我拖动的项目总是相同的项目，第一个添加到画布。如果有人可以帮我弄清楚如何检测我选择的哪个项目会很棒。

有一段代码，所以我会尝试只发布所需的位。

//Items are added to canvas and values added to items[];
//a click event runs when the canvas is clicked, the following code is then run
var mouseCheck = function(e) {
            var length = items.length;

            var pos = $('#scalesPlatform').offset(),
                top = pos.top,
                left = pos.left,
                mx = e.pageX - left,
                my = e.pageY - top;

                var imagedata = ctx.getImageData(mx, my, 1, 1);

                if (imagedata.data[3] > 0) {
                    for (var i = length - 1; i >= 0; i--) {
                        var hit = items[i];
                        offsetX = mx - items[i].x;
                        offsetY = my - items[i].y;
                        hit.x = mx - offsetX;
                        hit.y = my - offsetY;


                        canvas.addEventListener('mousemove', function() {

                            move(hit, drag, items, event);
                        });
                        canvas.addEventListener('mouseup', function() {
                            drag = false;
                            move(hit, drag, event);
                        });
                    }
                }

        }

问题是我需要将变量命中等于我选择的项目。任何帮助都会得到很大的帮助。

Answer 1

以下是如何使用多个项目拖放

您在对象中定义了方块：

var items=[]
items.push({x:0,y:10,width:50,height:50,color:"red",isDragging:false});
items.push({x:70,y:10,width:50,height:50,color:"green",isDragging:false});
items.push({x:140,y:10,width:50,height:50,color:"blue",isDragging:false});

所以你可以点击这样的测试来检测哪些项目会被拖动：

function setDragging(x,y){
    for(var i=0;i<items.length;i++){
        var item=items[i];

        // if x/y hit this item, set it’s isDragging flag
        if(x>=item.x && x<=item.x+item.width && y>=item.y && y<=item.y+item.height){
            item.isDragging=true;
        }

    }
}

您的mousemove处理程序计算拖动的距离。

      dragX=mouseX-startX;
      dragY=mouseY-startY;

然后在draw（）函数中，您可以处理拖动和非拖动项目。

被拖动的项目将在其原始位置加上dragX / dragY。

if(item.isDragging){
    ctx.rect(item.x+dragX,item.y+dragY,item.width,item.height);
}else{
    ctx.rect(item.x,item.y,item.width,item.height);
}

以下是示例代码和小提琴：http://jsfiddle.net/m1erickson/62L9q/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var isMouseDown=false;
    var startX;
    var startY;
    var dragX;
    var dragY;

    var items=[]
    items.push({x:0,y:10,width:50,height:50,color:"red",isDragging:false});
    items.push({x:70,y:10,width:50,height:50,color:"green",isDragging:false});
    items.push({x:140,y:10,width:50,height:50,color:"blue",isDragging:false});

    draw();

    function draw(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(var i=0;i<items.length;i++){
            var item=items[i];
            if(isMouseDown){

            }
            ctx.beginPath();
            if(item.isDragging){
                ctx.rect(item.x+dragX,item.y+dragY,item.width,item.height);
            }else{
                ctx.rect(item.x,item.y,item.width,item.height);
            }
            ctx.fillStyle=item.color
            ctx.fill();
        }
    }


    function setDragging(x,y){
        for(var i=0;i<items.length;i++){
            var item=items[i];
            if(x>=item.x && x<=item.x+item.width && y>=item.y && y<=item.y+item.height){
                item.isDragging=true;
            }
        }
    }

    function clearDragging(x,y){
        for(var i=0;i<items.length;i++){
            var item=items[i];
            if(item.isDragging){
                items[i].isDragging=false;
                item.x+=dragX;
                item.y+=dragY;
            }
        }
    }

    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      startX=mouseX;
      startY=mouseY;
      setDragging(startX,startY);
      isMouseDown=true;
    }

    function handleMouseUp(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mouseup stuff here
      isMouseDown=false;
      clearDragging();
    }

    function handleMouseOut(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mouseOut stuff here
      isMouseDown=false;
      clearDragging();
    }

    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      if(isMouseDown){
          dragX=mouseX-startX;
          dragY=mouseY-startY;
          draw(mouseX,mouseY);
      }

    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

画布拖放多个项目

1 个答案: