单击 Canvas 偏移三个像素

Question

我花了一整天的时间试图点击我的 canvas 到 return 像素 xy 偏移。这是一项多么艰巨的任务！

这就是我最终得到的结果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

  <div id="logX">x</div>
  <div id="logY">y</div>

  <div style="margin-left:100px">
    <div style="margin-left:100px">
      <canvas id="myCanvas" width="100" height="1000" style="border:20px solid #000000;"></canvas>
    </div>
  </div>

  <script>
  var canvas = document.getElementById('myCanvas');
  canvas.addEventListener('click', on_canvas_click, false);

  function getNumericStyleProperty(style, prop) {
    return parseInt(style.getPropertyValue(prop),10);
  }

  function on_canvas_click(ev) {
    var boundingRect = ev.target.getBoundingClientRect();

    var x = ev.clientX - boundingRect.left,
        y = ev.clientY - boundingRect.top;

    var style = getComputedStyle(canvas, null);

    x -= getNumericStyleProperty(style, "margin-left");
    y -= getNumericStyleProperty(style, "margin-top");

    x -= getNumericStyleProperty(style, "border-left-width");
    y -= getNumericStyleProperty(style, "border-top-width");

    x -= getNumericStyleProperty(style, "padding-left");
    y -= getNumericStyleProperty(style, "padding-top");

    $("#logX").text(        ev.target.getBoundingClientRect().left
                   + ", " + ev.clientX
                   + ", " + canvas.offsetLeft
                   + ", " + x
                  );

    $("#logY").text(        ev.target.getBoundingClientRect().top
                   + ", " + ev.clientY
                   + ", " + canvas.offsetTop
                   + ", " + y
                  );
  }

  //$( document ).on( "mousemove", function( event ) {
  //$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
  //});
</script>
</body>
</html>

http://jsbin.com/xajeluxija/2/

它在粗黑边框内产生白色 canvas。

在canvas内点击，会显示XY坐标。

如您所见，我故意创建了一个 canvas，它需要滚动，并且没有左对齐。这是为了强制一个健壮的解决方案。（测试用例可以改进吗？）

它几乎可以工作了！但是，如果您尝试单击左上角，您将得到 (1,2)。

应该是(0,0).

出了什么问题？

编辑：getting mouse position relative to content area of an element——这个问题有一个很好的答案（连同实例）仍然表现出相同的偏移问题。

How do I get the coordinates of a mouse click on a canvas element? <-- 这个问题非常混乱。

http://miloq.blogspot.in/2011/05/coordinates-mouse-click-canvas.html <-- 也表现出相同的行为。

Getting cursor position in a canvas without jQuery <-- 使用 document.documentElement 这可能是替代 CSS margin/border/padding(?)

编辑：现在是 2,2 而不是 2,1！这是不一致的！啊！我用相机拍了照片：

编辑：在 Firefox 上我得到 0.75, 1.91667...

编辑 4 月 15 日：此处尝试两次：
http://jsfiddle.net/Skz8g/47/
http://jsbin.com/taceso/1/

Answer 1

如您所见，在计算鼠标位置时会计算边框大小。

因此，将您的 canvas 包裹在容器 div 中，容器 div 的边框为 20px。

如果边框位于 canvas 本身，这会消除所需的额外计算。

注意：我将#borderDiv 和#myCanvas 的样式放在页眉的样式部分。

var canvas = document.getElementById('myCanvas');
canvas.addEventListener('click', on_canvas_click, false);

var context=canvas.getContext('2d');

context.fillStyle='red';
context.fillRect(0,0,10,1);
context.fillRect(0,0,1,10);

function getNumericStyleProperty(style, prop) {
  return parseInt(style.getPropertyValue(prop),10);
}

function on_canvas_click(ev) {
  var boundingRect = ev.target.getBoundingClientRect();
  var x = ev.clientX - boundingRect.left,
      y = ev.clientY - boundingRect.top;

  $("#logX").text("x="+x);
  $("#logY").text("y="+y);
}

#borderDiv{margin:0px; width:100px; height:1000px; border:20px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="logX">x</div>
<div id="logY">y</div>

<div style="margin-left:100px">
  <div style="margin-left:100px">
    <div id='borderDiv'>
      <canvas id="myCanvas" width=100 height=1000 style="cursor:crosshair"></canvas>
    </div>
  </div>
</div>

单击 Canvas 偏移三个像素

Click in Canvas is three pixels off

html

coordinates

mouseclick-event

html5-canvas