Javascript 如何使图像图案可拖动？

将图像拖到画布元素（或另一个div）上时，将调用此函数。如果元素是canvas元素，它将使用pattern创建填充，否则它将附加图像。当它附加图像时，我可以调用jquery的draggable函数。我希望使用canvas元素实现相同的功能。我该怎么做呢

以下是相关代码：

function photos_create_preview_image(element)
{
  console.log(element.id);
  if(element.id.indexOf("canvas") != -1)
  {
    console.log("canvas element");
    var canvas = document.getElementById(element.id); 
    ctx = canvas.getContext("2d");

    new_img = new Image();
    new_img.onload = function() {
      this.width /= 3; //TODO: Figure out what this should be, right now it is just a "magic number"
      this.height /= 3;

      var pattern = ctx.createPattern(new_img, "no-repeat");
      ctx.fillStyle = pattern;
      ctx.fill();
      //TODO: Make image draggable
    };

    new_img.src = SITE_URL + "/system/photo/cf_preview/" + selected_fid;
  }
  else
  {

    new_img = new Image();
    new_img.onload = function() {
      this.width /= 3; //TODO: Figure out what this should be, right now it is just a "magic number"
      this.height /= 3;

      element.appendChild(new_img);
      $(new_img).draggable({ containment: "parent" });
    };

    new_img.src = SITE_URL + "/system/photo/cf_preview/" + selected_fid;
  }
  console.log("new image: " + new_img.src);
}

以下是MarkE解决方案的新代码：

function photos_create_preview_image(element)
{
  console.log(element.id);
  if(element.id.indexOf("canvas") != -1)
  {
    console.log("canvas element");
    var canvas = document.getElementById(element.id); 
    var ctx = canvas.getContext("2d");

    var canvasOffset = $("#" + element.id).offset();
    var offsetX = canvasOffset.left;
    var offsetY = canvasOffset.top;
    var isDown = false;
    var startX;
    var startY;
    var imgX = 0;
    var imgY = 0;
    var imgWidth, imgHeight;
    var mouseX, mouseY;


    var new_img = new Image();
    new_img.onload = function() {
      //this.width /= 3; //TODO: Figure out what this should be, right now it is just a "magic number"
    // this.height /= 3;

      /*var pattern = ctx.createPattern(new_img, "no-repeat");
      ctx.fillStyle = pattern;
      ctx.fill();*/
      imgWidth = new_img.width;
      imgHeight = new_img.height;
      ctx.drawImage(new_img, imgX, imgY);
      //TODO: Make image draggable


    };

    new_img.src = SITE_URL + "/system/photo/cf_preview/" + selected_fid;

    function handleMouseDown(e) {
        e.preventDefault();
        //startX = parseInt(e.clientX - offsetX);
        //startY = parseInt(e.clientY - offsetY);
        startX = parseInt(e.pageX - window.scrollX);
        startY = parseInt(e.pageY - window.scrollY);

        // 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(new_img, imgX, imgY);
    }

    $("#" + element.id).mousedown(function (e) {
        handleMouseDown(e);
    });
    $("#" + element.id).mousemove(function (e) {
        handleMouseMove(e);
    });
    $("#" + element.id).mouseup(function (e) {
        handleMouseUp(e);
    });
    $("#" + element.id).mouseout(function (e) {
        handleMouseOut(e);
    });
  }
  else
  {

    new_img = new Image();
    new_img.onload = function() {
      this.width /= 3; //TODO: Figure out what this should be, right now it is just a "magic number"
      this.height /= 3;

      element.appendChild(new_img);
      $(new_img).draggable({ containment: "parent" });
    };

    new_img.src = SITE_URL + "/system/photo/cf_preview/" + selected_fid;
  }
  console.log("new image: " + new_img.src);
}

功能照片\u创建\u预览\u图像（元素）
{
console.log（element.id）；
if（element.id.indexOf（“canvas”）！=-1）
{
log（“canvas元素”）；
var canvas=document.getElementById（element.id）；
var ctx=canvas.getContext（“2d”）；
var canvasOffset=$（“#”+element.id）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var isDown=假；
var-startX；
var startY；
var-imgX=0；
var-imgY=0；
var imgWidth，imgHeight；
var mouseX，mouseY；
var new_img=新图像（）；
new_img.onload=函数（）{
//this.width/=3；//TODO:弄清楚这应该是什么，现在它只是一个“幻数”
//这个高度/=3；
/*var pattern=ctx.createPattern（新的“无重复”）；
ctx.fillStyle=图案；
ctx.fill（）*/
imgWidth=新的img.width；
imgHeight=新高度；
ctx.drawImage（新的img、imgX、imgY）；
//TODO:使图像可拖动
};
new_img.src=SITE_URL+“/system/photo/cf_preview/”+selected_fid；
功能手柄向下（e）{
e、 预防默认值（）；
//startX=parseInt（e.clientX-offsetX）；
//startY=parseInt（e.clientY-offsetY）；
startX=parseInt（e.pageX-window.scrollX）；
startY=parseInt（e.pageY-window.scrollY）；
//把你的鼠标下的东西放在这里
如果（startX>=imgX&&startX=imgY&&startY，您可以通过监听鼠标事件来拖动图像（或填充图案）

演示：

鼠标向下移动：


获取鼠标位置
检查鼠标是否在图像中
如果在内部，则设置isDown标志以指示拖动已开始

在鼠标移动中：


获取鼠标位置
计算自上次鼠标移动以来鼠标已拖动的距离
按拖动的量更改图像位置
在新位置重新绘制图像

在鼠标上或鼠标下：


清除isDown标志以指示拖动结束

下面是示例代码：

<!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="house32x32.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>


正文{背景色：象牙；}
#画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var isDown=假；
var-startX；
var startY；
var imgX=50；
var-imgY=50；
var imgWidth，imgHeight；
var img=new Image（）；img.onload=start；img.src=“house32x32.png”；
函数start（）{
imgWidth=img.宽度；
img高度=img高度；
ctx.drawImage（img、imgX、imgY）；
}
功能手柄向下（e）{
e、 预防默认值（）；
startX=parseInt（e.clientX-offsetX）；
startY=parseInt（e.clientY-offsetY）；
//把你的鼠标下的东西放在这里
如果（startX>=imgX&&startX=imgY&&starty图像的宽度/高度是只读的。在绘制图案之前，您需要将图像绘制到画布上，或者使用scale来缩放上下文。当我实现您的代码时，它在Firefox中适用，但在Chrome中不适用，知道为什么吗？在Chrome中，事件处理程序正在启动，但imag正在启动e不会移动。另外，我需要它是一个模式，而不是drawImage，因为我用它填充的路径来绘制字母。在Chrome中，当我在handleMouseDown中输出startY时，它会给我一个负数，而在Firefox中，它不会。通过在中使用答案，我能够让它工作。我使用了第二个解决方案h，而不是clearRect和drawImageere:var pattern=ctx.createPattern（new_img，“no repeat”）；ctx.save（）；ctx.translate（imgX，imgY）；ctx.fillStyle=pattern；ctx.fill（）；ctx.restore（）；感谢您的帮助