将图像放入画布元素后拖动图像

drag image after dropping it in canvas element

本文关键字：图像 元素 拖动 布元素      更新时间：2023-09-26

拖动&canvas元素的拖放功能，我需要在目标元素中绘制图像使用这一行

ctx.drawImage(imgElement,dropX, dropY);

因为它已经画好了，我发现很难再拖动它。就好像我没法让它动了

我在这段代码的基础上工作:http://jsfiddle.net/m1erickson/cyur7/

我需要做什么修改，才能再次拖动一个被拖放的图像?

请记住，画布只是一个位图。

一旦你的图像被绘制在画布上，它们就不能被重新定位。

要重新定位图像，必须清除画布并在新位置重新绘制图像。

要移动和重新绘制图像，您至少需要保存以下关于图像的基本信息:

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

你可以让用户通过监听鼠标事件在画布上拖动你的图像

  • 在mousedown中，检查鼠标是否在图像上。是=>开始拖动

  • 在鼠标移动中，将用户自上次鼠标移动以来拖动的距离添加到图像的x,y位置。

  • 在mouseup中，停止拖动

下面是示例代码和演示: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>
相关文章：