如何將組或數組中的所有對象移動到coördinate？

有很多關於如何拖放對象的教程。但我找不到要移動屬於彼此的多個對象的東西。使用KinectJS，您可以將多個對象分組，但我喜歡使用此方法而不使用KinectJS。如何將組或數組中的所有對象移動到coördinate？

我已經使用拖放這一個：http://simonsarris.com/blog/510-making-html5-canvas-useful

而且它的工作原理都非常好，但你怎麼能讓它，你可以拖動並立即刪除所有對象？

謝謝！

2013-03-01 Martijn Hoogers

拖動「分組」對象是一個很大的話題！

非常概括：

1. The user starts dragging the 「group」. 
2. Use canvas.context.translate(x,y) to move to the X/Y 
    where you want the group to be drawn. 
3. Redraw each item in the group. 
4. Keep track of how much the group has moved in total (sumTranslateX/sumTranslateY). 
5. When the user drags again, repeat at step#1. 
    (remember to translate by the current drag length PLUS the sumTranslateXY)

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/VezHW/

<!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 img = new Image(); 
    img.onload = function(){ 
     boundingBoxWidth=this.width/2+100; // add rocket+sun widths 
     boundingBoxHeight=this.height/2+100; // add rocket+sun heights 
     ctx.save(); 
     drawBoundingBox(); 
     drawRocket(); 
     drawSun(); 
     ctx.restore(); 
    }; 
    img.src = "http://images.christmastimeclipart.com/images/2/1271716593176_1788/img_1271716593176_17881.jpg"; 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    var canvasWidth=canvas.width; 
    var canvasHeight=canvas.height; 
    var startingX; 
    var startingY 
    var boundingBoxWidth; 
    var boundingBoxHeight; 
    var sumTranslateX=0; 
    var sumTranslateY=0; 
    var deltaX=0; 
    var deltaY=0; 
    var isDragging=false; 

    function handleMouseDown(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 

     // Put your mousedown stuff here 
     if(mouseIsInBoundingBox()){ 
      startingX=canMouseX; 
      startingY=canMouseY; 
      isDragging=true; 
     } 
    } 

    function mouseIsInBoundingBox(){ 
     return(canMouseX>sumTranslateX && 
       canMouseX<boundingBoxWidth+sumTranslateX && 
       canMouseY>sumTranslateY && 
       canMouseY<boundingBoxHeight+sumTranslateY); 
    } 

    function handleMouseUp(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 

     // Put your mouseup stuff here 
     if(isDragging){ 
      isDragging=false; 
      sumTranslateX+=deltaX; 
      sumTranslateY+=deltaY; 
      console.log(sumTranslateX+"/"+sumTranslateY); 
     } 
    } 

    function handleMouseOut(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 

     // Put your mouseOut stuff here 
     if(isDragging){ 
      isDragging=false; 
      sumTranslateX+=deltaX; 
      sumTranslateY+=deltaY; 
      console.log(sumTranslateX+"/"+sumTranslateY); 
     } 
    } 

    function handleMouseMove(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 

     // Put your mousemove stuff here 
     if(isDragging){ 
      deltaX=canMouseX-startingX; 
      deltaY=canMouseY-startingY 
      ctx.save(); 
      ctx.clearRect(0,0,canvas.width,canvas.height); 
      ctx.translate(sumTranslateX+deltaX,sumTranslateY+deltaY); 
      drawBoundingBox(); 
      drawRocket(); 
      drawSun(); 
      ctx.restore(); 
     } 
    } 

    function drawRocket(){ 
     ctx.drawImage(img,0,0,img.width,img.height,0,100,img.width/2,img.height/2); 
    } 

    function drawSun(){ 
     ctx.beginPath(); 
     ctx.arc(img.width/2+50,50, 50, 0, 2 * Math.PI, false); 
     ctx.fillStyle = 'yellow'; 
     ctx.fill(); 
    } 

    function drawBoundingBox(){ 
     ctx.beginPath(); 
     ctx.strokeStyle="blue"; 
     ctx.strokeRect(0,0,boundingBoxWidth,boundingBoxHeight); 
     ctx.stroke(); 
    } 

    $("#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> 

    <br/><p>The canvas has 2 objects "grouped" together (rocket & sun)</p> 
    <p>Drag the "group"</p> 
    <canvas id="canvas" width=400 height=400></canvas> 

</body> 
</html>

來源

2013-03-01 18:45:12 markE

很好的解釋和解決方案，謝謝！ – 2013-03-04 09:44:38

如何將組或數組中的所有對象移動到coördinate？

回答

相關問題