drag image after dropping it in canvas element

问题

To perform drag & drop functionality, with canvas element, I have to actually draw the image in the element of destination using this line,

ctx.drawImage(imgElement,dropX, dropY);

Because it's drawed, I found a difficulty in dragging it again. It's like I can't make it move anymore

I'm working on the basis of this code here : http://jsfiddle.net/m1erickson/cyur7/

What modifications do I have to make, in order to drag again a dropped image?

回答1:

Keep in mind that canvas is just a bitmap.

Once your images are drawn on the canvas they cannot be repositioned.

To reposition your image, you must clear the canvas and redraw your image in a new position.

To move and redraw your image, you will need to save at least this basic information about the image:

var image1={
    x:50,
    y:30,
    image:imageObject
}

You can let the user drag your image around the canvas by listening to mouse events

In mousedown, check if the mouse is over the image. If yes, start the drag.
In mousemove, add the distance the user dragged since the last mousemove to the images x,y position.
In mouseup, stop the drag.

Here's example code and a Demo: http://jsfiddle.net/m1erickson/L3VjK/

<!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 canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var isDown=false;
    var startX;
    var startY;
    var imgX=50;
    var imgY=50;
    var imgWidth,imgHeight;

    var img=new Image();img.onload=start;img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png";

    function start(){
        imgWidth=img.width;
        imgHeight=img.height;
        ctx.drawImage(img,imgX,imgY);
    }

    function handleMouseDown(e){
      e.preventDefault();
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      if(startX>=imgX && startX<=imgX+imgWidth && startY>=imgY && startY<=imgY+imgHeight){
          isDown=true;
      }
    }

    function handleMouseUp(e){
      e.preventDefault();
      isDown=false;
    }

    function handleMouseOut(e){
      e.preventDefault();
      isDown=false;
    }

    function handleMouseMove(e){
      if(!isDown){return;}
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      if(!isDown){return;}
      imgX+=mouseX-startX;
      imgY+=mouseY-startY;
      startX=mouseX;
      startY=mouseY;
      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.drawImage(img,imgX,imgY);
    }

    $("#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>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

来源：https://stackoverflow.com/questions/22304613/drag-image-after-dropping-it-in-canvas-element

标签

javascript

canvas

drag-and-drop