Javascript 当图案可拖动时，如何调整图像图案的大小？

我用它来调整初始图像的大小，但当我尝试在拖放功能中使用相同的代码时，它无法正常工作（它创建了一个新图像，当我尝试拖动它时，它变得很奇怪-请参见下面的图像。“O”在拖放前有图像，“p”在拖放后有图像）

以下是我正在使用的代码：

function photos_create_preview_image(element)
{
  console.log(element.id);
  if(element.id.indexOf("canvas") != -1)
  {
    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() 
    {
      var tempCanvas = photos_create_temp_canvas(new_img);

      imgWidth = new_img.width;
      imgHeight = new_img.height;
      //var pattern = ctx.createPattern(new_img, "no-repeat");
      var pattern = ctx.createPattern(tempCanvas, "no-repeat");
      ctx.fillStyle = pattern;
      ctx.fill();

    };

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

    function photos_create_temp_canvas(new_img)
    {
      var tempCanvas = document.createElement("canvas"),
      tCtx = tempCanvas.getContext("2d");

      tempCanvas.width = new_img.width / 3; //TODO: Figure out what this should be, right now it is just a "magic number"
      tempCanvas.height = new_img.height / 3 ;
      tCtx.drawImage(new_img,0,0,new_img.width,new_img.height,0,0,new_img.width / 3,new_img.height / 3);
      return tempCanvas;
    }

    function handleMouseDown(e) 
    {
        e.preventDefault();
        startX = parseInt(e.pageX - window.scrollX);
        startY = parseInt(e.pageY - window.scrollY);
        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);

        if (!isDown) {
            return;
        }
        imgX += mouseX - startX;
        imgY += mouseY - startY;
        startX = mouseX;
        startY = mouseY;

        var tempCanvas = photos_create_temp_canvas(new_img);
        var pattern = ctx.createPattern(tempCanvas, "no-repeat");
        //var pattern = ctx.createPattern(new_img, "no-repeat");
        ctx.save();
        ctx.translate(imgX, imgY);
        ctx.fillStyle = pattern;
        ctx.fill();
        ctx.restore();
    }

    $("#" + 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 //You can ignore this - not relevant to the question
  {

    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);
}

这一部分是有效的，但现在它只允许我从底部移动图像。（见下图）

---

您需要在重新绘制之前清除画布：

function handleMouseMove(e) 
    {

      ...

        var tempCanvas = photos_create_temp_canvas(new_img);
        var pattern = ctx.createPattern(tempCanvas, "no-repeat");
        //var pattern = ctx.createPattern(new_img, "no-repeat");
        ctx.save();
        ctx.translate(imgX, imgY);
        ctx.fillStyle = pattern;
        ctx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
        ctx.fill();
        ctx.restore();
    }

---

你能给我们看一下JSFIDLE演示吗？我仍然得到类似的结果。如果我在save函数之前移动它，它会有点工作，但之后它也会清除字母。@AllisonC你能发一把小提琴吗？那我就可以调试了@艾莉森，我搞不懂你在这里想干什么。你会更新小提琴来反映错误吗？试着把它拖来拖去，你就会明白我的意思了。它只允许您从图像底部拖动，然后阻止您进一步拖动。@AllisonC发生这种情况是因为鼠标从元素移到容器中，并触发handleMouseOut事件。请看，我建议您将鼠标事件移动到DIV，并附加到要从此处移动的对象。

function handleMouseMove(e) 
    {

      ...

        var tempCanvas = photos_create_temp_canvas(new_img);
        var pattern = ctx.createPattern(tempCanvas, "no-repeat");
        //var pattern = ctx.createPattern(new_img, "no-repeat");
        ctx.save();
        ctx.translate(imgX, imgY);
        ctx.fillStyle = pattern;
        ctx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
        ctx.fill();
        ctx.restore();
    }