如何使我用鼠標繪制的矩形與鼠標指示的完全相同？

Question

這是小提琴： http : //jsfiddle.net/awguo/0fep62wr/4/

在這種情況下，我將上傳圖片，然后在其上方繪制一個畫布。

然后，我將拖動一個“區域”（記錄鼠標位置），然后在畫布上繪制一個矩形以表示我繪制的鼠標區域。

一切正常，除了矩形始終不完全適合我繪制的區域。

我在代碼中做錯了什么嗎？

謝謝！

代碼如下：

// get position
function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: (evt.clientX - rect.left),
    y: (evt.clientY - rect.top)
  };
}

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#blah').attr('src', e.target.result);
      $('#base64_output').val(e.target.result);
            var $cc = $('<canvas style="cursor:crosshair;width:100%;height:100%;position:absolute;top:0;left:0">');
      var cc = $cc[0];
      cc.addEventListener('mousedown', function(e) {
        window.mousePos1 = getMousePos(cc, e);

      }, false);
      cc.addEventListener('mouseup', function(e){
        window.mousePos2 = getMousePos(cc, e);
        var p1x = window.mousePos1.x;
        var p1y = window.mousePos1.y;
        var p2x = window.mousePos2.x;
        var p2y = window.mousePos2.y;
        if (p1x > p2x) {
          var tempx = p2x;
          p2x = p1x;
          p1x = tempx;
        }
        if (p1y > p2y) {
          var tempy = p2y;
          p2y = p1y;
          p1y = tempy;
        }
        var message = "area:" + p1x +',' + p1y + ',' + p2x + ',' + p2y;
        $('#data_output').val(message);

        // draw a preview rectangle:
        var w = p2x-p1x;var h = p2y-p1y;
        var ctx=cc.getContext("2d");
        ctx.rect(p1x,p1y,w,h);
        ctx.stroke();

      }, false);
      $('#wrapper').append($cc);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function(){
  readURL(this);
});

Answer 1

該問題與使用畫布的百分比縮放有關。 我並不是說您不能做到這一點，但您需要意識到它會帶來復雜性，例如需要手動匹配圖像大小，跟蹤寬度和高度比例或其他策略。 這個SO問答討論了這個問題，還有很多其他問題，包括堆棧溢出。

如果我沒記錯的話，我認為我需要確保在某些情況下也不會自動設置畫布比例因子。