拖動放置在畫布中的縮放圖像

Question

我在拖動縮放圖像時遇到問題。
我創建了main_canvas，其中包含通過bg_canvas resp表示的背景和圖像。 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;
}

然后我做了wheel事件來縮放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();
}

這是我問題的一個例子。
請問有什么解決辦法嗎？

Answer 1

您不需要通過在scaleFactor相乘來更改imageX ， imageY和imageX_hit ， imageY_hit變量。 您可以按context.scale縮放圖像，因此無需更改坐標。 只要記住比例因子，並在hitImage使用它來檢查坐標即可。

如果這可以解決您的問題，我將嘗試編輯帖子並進行更清晰的說明：

https://jsfiddle.net/j1f306w5/1/

我的變更：

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

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

    return 0;
 }

和

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

Answer 2

這是代碼（固定的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';
});