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

Question

我使用这个Resize an image with javascript for use inside a canvas createPattern来调整初始图像的大小，但是当我尝试在拖放功能中添加相同的代码时，它无法正常工作（它会创建一个新图像，当我尝试拖动时它变得奇怪 - 见下图。“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);
}

我将代码更改为：

...
ctx.fillStyle = "#BFBFBF";
ctx.fill();

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

ctx.fill();
ctx.restore();
...

那部分有效，但现在只让我从底部移动图像。 （见下图）

Answer 1

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

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