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

Question

我使用此调整大小的图像与javascript在画布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();
    }