Question

有很多关于如何拖放对象的教程。但我找不到能够移动属于彼此的多个物体的东西。使用KinectJS，您可以对多个对象进行分组，但我喜欢使用此方法而不使用KinectJS。

我曾经拖放过这个：http://simonsarris.com/blog/510-making-html5-canvas-useful

它的效果非常好，但你怎么能让它一次拖放所有物体呢？

谢谢！

Answer 1

拖动“分组”对象是一个很大的主题！

非常总结：

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>

如何将组或数组中的所有对象移动到coördinate？

1 个答案: