畫布拖放多個項目

Question

我正在為一個項目創建一個多項目拖放操作，並且碰到了牆。

目前，我有5個正方形項目已添加到畫布中，並且還在其中將x，y，寬度，高度，bgcolour存儲在稱為項目的數組中。 我檢測到鼠標何時選擇了這些正方形之一，並且可以拖動一個項目。 但是我的問題是，我拖動的項目始終是同一項目，第一個添加到畫布。 如果有人可以幫助我確定如何檢測到我特別選擇的項目，那就太好了。

有很多代碼，所以我將嘗試僅發布所需的位。

//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 個解決方案

解決方案1
0 2013-07-02 19:55:11

畫布拖放多個項目

問題描述

1 個解決方案

解決方案1 0 2013-07-02 19:55:11

解決方案1
0 2013-07-02 19:55:11