如何使我（用鼠标）绘制的矩形与鼠标指示的矩形完全相同？答案

【问题标题】：How to make the rectangle I draw (with mouse) exactly the same as my mouse indicates?如何使我（用鼠标）绘制的矩形与鼠标指示的矩形完全相同？
【发布时间】：2017-02-16 01:19:13
【问题描述】：

这里是小提琴：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);
});

【问题讨论】：

标签： javascript canvas

【解决方案1】：

问题与使用画布的百分比缩放有关。我并不是说你不能这样做，但你需要意识到它会导致复杂性，例如需要手动匹配图像大小，或者跟踪宽度和高度比，或者其他一些策略。 This SO Q & A 讨论了这个问题，还有很多其他问题，在 Stack Overflow 内外。

如果我没记错的话，我认为我需要确保画布比例因子在某些情况下也不会自动设置。

【讨论】：