0

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

目前，我有 5 个方形项目已添加到画布中，并将 x、y、宽度、高度、bgcolor 存储在名为 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);
                        });
                    }
                }

        }

问题是我需要变量 hit 等于我选择的项目。任何帮助将不胜感激。

4

1 回答 1

0

这是拖放多个项目的方法

您在对象中定义了正方形：

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>
于 2013-07-02T19:55:11.210 回答