多個項目的畫布拖放

我正在爲項目創建多個項目拖放，並且已到達牆壁。多個項目的畫布拖放

目前我已經添加到畫布上的5個方形項目，並且還將x，y，寬度，高度，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); 
         }); 
        } 
       } 

     }

問題是我需要變量命中來等於我選擇的項目。任何幫助將大大apprecaited。

來源

2013-07-02 tdh108

'event.target'是下目標對象時拖動的任何元件。也許你可以獲取對象的ID或名稱，並在你的移動函數中的items數組中傳遞它的通訊記錄 –

以下是如何拖動/與多個項目

您已經在對象中定義的方塊下降：

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});

所以，你可以點擊測試這樣的檢測哪些項目（S）將成爲拖動：

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-02 19:55:11 markE

多個項目的畫布拖放

回答

相關問題