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

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

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

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

1 个答案: