0

オブジェクトをドラッグ アンド ドロップする方法については、多くのチュートリアルがあります。しかし、互いに属している複数のオブジェクトを移動するための何かが見つかりません。KinectJS を使用すると、複数のオブジェクトをグループ化できますが、KinectJS を使用せずにこのメソッドを使用するのが好きです。

私はこれをドラッグアンドドロップするのに慣れていました：http://simonsarris.com/blog/510-making-html5-canvas-useful

すべてうまく機能しますが、すべてのオブジェクトを一度にドラッグ アンド ドロップできるようにするにはどうすればよいでしょうか。

ありがとう！

4

1 に答える 1

0

「グループ化された」オブジェクトのドラッグは大きなトピックです。

非常に要約：

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-01T18:45:12.887 に答える