javascript - 拖动放置在 Canvas 中的缩放图像

Question

我在拖动缩放图像时遇到问题。
我创建了 main_canvas，其中包含通过 bg_c​​anvas 分别表示的背景和图像。 img_canvas。然后我制作了背景坐标(panoramaX，panoramaY)和图像(imageX，imageY)来检查如果我单击其中一些并能够拖动它们。

图像放置在背景之上:

var drawToMain = function() 
{        
     // first clear the canvas
    main_ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.scale(scaleFactor, scaleFactor);
    // draw the background image
    main_ctx.drawImage(bg_canvas, panoramaX,panoramaY, 600, 300);
    // do the transforms
    main_ctx.translate( imageX+img_canvas.width/2,
                                            imageY+img_canvas.height/2);
    main_ctx.rotate(angle);
    main_ctx.translate( -(imageX+img_canvas.width/2),
                                            -(imageY+img_canvas.height/2));
    // draw the img with the transforms applied
    main_ctx.drawImage(img_canvas, imageX, imageY);
    // reset the transforms
    main_ctx.setTransform(1,0,0,1,0,0);
};

要拖动我正在测试的项目(如果我单击其中之一):

function hitImage(x, y) {
    if (x > imageX_hit && x < imageX_hit + img_canvas.width * scaleFactor &&
        y > imageY_hit && y < imageY_hit + img_canvas.height * scaleFactor)
          return 1;

    if (x > panoramaX && x < panoramaX + bg_canvas.width * scaleFactor &&
        y > panoramaY && y < panoramaY + bg_canvas.height * scaleFactor)
        return 2;

        return 0;
}

然后我制作了轮子事件来缩放 main_canvas 的内容(背景和图像，两者)，我的问题在哪里，我在那里更新图像坐标，但当我缩小图像时，它对我不起作用示例并尝试拖动它，它不会移动，当我缩放图像时，图像在背景中“移动”:

canvas.addEventListener("wheel", myFunction);
canvas.addEventListener('DOMMouseScroll', myFunction);
function myFunction(evt) {
    var delta = evt.wheelDelta ? evt.wheelDelta / 40 : evt.detail ? -evt.detail : 0;
    if (delta > 0)  scaleFactor = scaleFactor + 0.05;
    else            scaleFactor = scaleFactor - 0.05;
    imageX = imageX * scaleFactor;
    imageY = imageY * scaleFactor;
    imageX_hit = imageX_hit * scaleFactor;
    imageY_hit = imageY_hit * scaleFactor;
    drawToMain();
}

THERE这是我的问题的一个例子。
请问有什么解决办法吗？

Answer 1

这是代码(修复了 Slavik 的代码，更新 1):

$(document).ready(function() {
// x, y to place image
  var imageX = 80,
    imageY = 80;

  var imageX_hit = 80,
    imageY_hit = 80;
    // x, y to place background image
  var panoramaX = 0,
    panoramaY = 0;

  var startX,
    startY,
    dragImage;
  // mouse coordinates in canvas
  var mouseX,
    mouseY;
// number represents scale of image and background
  var scaleFactor = 1,
        angle = 0;

    // main canvas
  var canvas = document.createElement('canvas');
  canvas.width = 600;
  canvas.height = 300;
  document.body.appendChild(canvas);
  var ctx = canvas.getContext('2d');

  var canvasOffset = $(canvas).offset();
  var offsetX = canvasOffset.left;
  var offsetY = canvasOffset.top;


  var main_ctx = canvas.getContext('2d');
  var bg_canvas = canvas.cloneNode(); // canvas for image
  var img_canvas = canvas.cloneNode();// canvas for background

  var angle = 0;

  // draw on the main canvas, and only on the main canvas
  var drawToMain = function() 
{        
     // first clear the canvas
    main_ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.scale(scaleFactor, scaleFactor);
    // draw the background image
    main_ctx.drawImage(bg_canvas, panoramaX,panoramaY, 600, 300);
    // do the transforms
    main_ctx.translate( imageX+img_canvas.width/2,
                                            imageY+img_canvas.height/2);
    main_ctx.rotate(angle);
    main_ctx.translate( -(imageX+img_canvas.width/2),
                                            -(imageY+img_canvas.height/2));
    // draw the img with the transforms applied
    main_ctx.drawImage(img_canvas, imageX, imageY);
    // reset the transforms
    main_ctx.setTransform(1,0,0,1,0,0);
  };

  // I changed the event to a simple onclick
  $(canvas).mousedown(function(e) {
    switch (e.which) {
      case 1:
        // mouse position and test if image is hit
        startX = parseInt(e.clientX - offsetX);
        startY = parseInt(e.clientY - offsetY);
        dragImage = hitImage(startX, startY);
        break;
      default:
        break;
    }
  });

  $(canvas).mousemove(function(e) {
      // Im moving with image
      mouseX = parseInt(e.clientX - offsetX);
      mouseY = parseInt(e.clientY - offsetY);
      // move image by the amount of the latest drag
      var dx = (mouseX - startX)/scaleFactor;
      var dy = (mouseY - startY)/scaleFactor;
    if (dragImage == 1) {

      imageX += dx;
      imageY += dy;

      imageX_hit += dx;
      imageY_hit += dy;
      // reset the startXY for next time
      startX = mouseX;
      startY = mouseY;
      drawToMain();
    } 
  else if (dragImage == 2) {

      panoramaX += dx;
      panoramaY += dy;

      imageX += dx;
      imageY += dy;

      imageX_hit += dx;
      imageY_hit += dy;

      // reset the startXY for next time
      startX = mouseX;
      startY = mouseY;

      drawToMain();
    }
  });

  $(canvas).mouseup(function(e) {
    switch (e.which) {
      case 1:
        dragImage = 0;
        break;
      default:
        break;
    }
  });

    // ZOOM-IN or ZOOM-OUT
  canvas.addEventListener("wheel", myFunction);
  canvas.addEventListener('DOMMouseScroll', myFunction);
    // COMPUTING scaleFactor - zoom
  function myFunction(evt) {
    var delta = evt.wheelDelta ? evt.wheelDelta / 40 : evt.detail ? -evt.detail : 0;
    if (delta > 0)  scaleFactor = scaleFactor + 0.05;
    else                        scaleFactor = scaleFactor - 0.05;
    //imageX = imageX * scaleFactor;
    //imageY = imageY * scaleFactor;
  //console.log(imageX, imageY);
    //imageX_hit = imageX_hit * scaleFactor;
    //imageY_hit = imageY_hit * scaleFactor;      
    drawToMain();
  }

  // test if I user clicked image or panorama
  function hitImage(x, y) { 
    x=x/scaleFactor;
    y=y/scaleFactor;

      if (x > imageX_hit && x < imageX_hit  + img_canvas.width &&
            y > imageY_hit && y < imageY_hit  + img_canvas.height)
            return 1;

    if (x > panoramaX && x < panoramaX + bg_canvas.width &&
        y > panoramaY && y < panoramaY + bg_canvas.height)
        return 2;

        return 0;
  }

    // loading images into canvas
  var img = new Image();
  img.onload = function() {
    var this_canvas = img_canvas;
    this_canvas.width = 150;
    this_canvas.height = 150;
    this_canvas.getContext('2d').drawImage(this, 0, 
                                                                                    0, this_canvas.width,
                                            this_canvas.height);
    drawToMain();
  };
  img.src = 'http://pgmagick.readthedocs.org/en/latest/_images/lena_scale.jpg';

  var bg = new Image();
  bg.onload = function() {
    var this_canvas = bg_canvas;
    this_canvas.getContext('2d').drawImage(this, panoramaX, 
                                                                                    panoramaY, 600, 300);
    drawToMain();
  };
  bg.src = 'http://www.ansteorra.org/graphics/background/bg_image.jpg';
});