그룹 또는 배열의 모든 객체를 어떻게 병합 할 수 있습니까?

개체를 끌어서 놓는 방법에 대한 많은 자습서가 있습니다. 그러나 나는 서로에게 속한 여러 물건을 움직일 무언가를 찾을 수 없다. KinectJS를 사용하면 여러 객체를 그룹화 할 수 있지만 KinectJS를 사용하지 않고이 방법을 사용하는 것이 좋습니다.그룹 또는 배열의 모든 객체를 어떻게 병합 할 수 있습니까?

I 드래그 앤이 한 방울하는 데 사용한 : 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

좋은 설명 및 솔루션, 감사합니다! –

그룹 또는 배열의 모든 객체를 어떻게 병합 할 수 있습니까?

답변

관련 문제