Drag and Drop Multiple Objects in HTML5 Canvas

后端未结

关注

 1  1809

I\'m trying to implement an application in which the user can drag and drop multiple objects inside a given area..I\'m using html5 canvas tag to implement this..When there i

相关标签:

1条回答

一整个雨季

2021-01-01 05:58

When moving 1 (or more) shapes, the procedure is:

Create objects that define each shape:

// an array of objects that define different rectangles
var rects=[];
rects.push({x:75-15,y:50-15,width:30,height:30,fill:"#444444",isDragging:false});
rects.push({x:75-25,y:50-25,width:30,height:30,fill:"#ff550d",isDragging:false});
rects.push({x:75-35,y:50-35,width:30,height:30,fill:"#800080",isDragging:false});
rects.push({x:75-45,y:50-45,width:30,height:30,fill:"#0c64e8",isDragging:false});

In mousedown:

get the current mouse position
set the isDragging flag on any shape that is under the mouse
save the current mouse position

In mousemove:

get the current mouse position
calculate how far the mouse has moved ( distance = newMousePosition-oldMousePosition )
add the distance to the position of any shape that isDragging
save the current mouse position
redraw the scene with shapes in their new positions

In mouseup:

clear all isDragging flags

Here's annotated code and a Demo: http://jsfiddle.net/m1erickson/qm9Eb/

<!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>
window.onload=function(){

    // get canvas related references
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var BB=canvas.getBoundingClientRect();
    var offsetX=BB.left;
    var offsetY=BB.top;
    var WIDTH = canvas.width;
    var HEIGHT = canvas.height;

    // drag related variables
    var dragok = false;
    var startX;
    var startY;

    // an array of objects that define different rectangles
    var rects=[];
    rects.push({x:75-15,y:50-15,width:30,height:30,fill:"#444444",isDragging:false});
    rects.push({x:75-25,y:50-25,width:30,height:30,fill:"#ff550d",isDragging:false});
    rects.push({x:75-35,y:50-35,width:30,height:30,fill:"#800080",isDragging:false});
    rects.push({x:75-45,y:50-45,width:30,height:30,fill:"#0c64e8",isDragging:false});

    // listen for mouse events
    canvas.onmousedown = myDown;
    canvas.onmouseup = myUp;
    canvas.onmousemove = myMove;

    // call to draw the scene
    draw();

    // draw a single rect
    function rect(x,y,w,h) {
     ctx.beginPath();
     ctx.rect(x,y,w,h);
     ctx.closePath();
     ctx.fill();
    }

    // clear the canvas
    function clear() {
     ctx.clearRect(0, 0, WIDTH, HEIGHT);
    }

    // redraw the scene
    function draw() {
        clear();
        ctx.fillStyle = "#FAF7F8";
        rect(0,0,WIDTH,HEIGHT);
        // redraw each rect in the rects[] array
        for(var i=0;i<rects.length;i++){
            var r=rects[i];
            ctx.fillStyle=r.fill;
            rect(r.x,r.y,r.width,r.height);
        }
    }


    // handle mousedown events
    function myDown(e){

        // tell the browser we're handling this mouse event
        e.preventDefault();
        e.stopPropagation();

        // get the current mouse position
        var mx=parseInt(e.clientX-offsetX);
        var my=parseInt(e.clientY-offsetY);

        // test each rect to see if mouse is inside
        dragok=false;
        for(var i=0;i<rects.length;i++){
            var r=rects[i];
            if(mx>r.x && mx<r.x+r.width && my>r.y && my<r.y+r.height){
                // if yes, set that rects isDragging=true
                dragok=true;
                r.isDragging=true;
            }
        }
        // save the current mouse position
        startX=mx;
        startY=my;
    }


    // handle mouseup events
    function myUp(e){
        // tell the browser we're handling this mouse event
        e.preventDefault();
        e.stopPropagation();

        // clear all the dragging flags
        dragok = false;
        for(var i=0;i<rects.length;i++){
            rects[i].isDragging=false;
        }
    }


    // handle mouse moves
    function myMove(e){
        // if we're dragging anything...
        if (dragok){

          // tell the browser we're handling this mouse event
          e.preventDefault();
          e.stopPropagation();

          // get the current mouse position
          var mx=parseInt(e.clientX-offsetX);
          var my=parseInt(e.clientY-offsetY);

          // calculate the distance the mouse has moved
          // since the last mousemove
          var dx=mx-startX;
          var dy=my-startY;

          // move each rect that isDragging 
          // by the distance the mouse has moved
          // since the last mousemove
          for(var i=0;i<rects.length;i++){
              var r=rects[i];
              if(r.isDragging){
                  r.x+=dx;
                  r.y+=dy;
              }
          }

          // redraw the scene with the new rect positions
          draw();

          // reset the starting mouse position for the next mousemove
          startX=mx;
          startY=my;

        }
    }

}; // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

0 讨论(0)