画布相对位置

Question

我一直在玩弄 HTML5 中的画布元素，我正在尝试获取画布的相对位置。

我正在使用 layerX 和 layerY，这似乎是最明显的解决方案，但出于某种原因，也许这就是它的工作原理，即 layerX/Y 看到的点位于指针的左角。 我的代码如下

function ev_canvas (ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

它只是将 _x/y 元素添加到 ev 对象，以便我可以在绘图表面上使用它们。

这是发生在我身上的视频：

http://img.zobgib.com/2011-03-21_1413.swf

如果你想自己玩，你可以在http://research.zobgib.com/beta

我只需要设置一个手动偏移量，还是 layerX/Y 错误？

编辑：

我可以添加一个手动偏移量，但这似乎是将 x/y 位置放在正确位置的错误方法。

偏移量的代码只是：

...
ev._x = ev.layerX-10;
ev._y = ev.layerY-13;
...

编辑 2：

在 Opera 中，光标是一个指针，默认情况下位置是正确的。

在 Chrome 和 Safari 中，当您单击（默认情况下，不返回 false）时，光标将变为文本选择器并且位置位于文本选择器的底部。

在 Firefox 中，光标是一个指针，但位置在手的中心。

• 哪一个return false;

  • 鼠标按下/移动光标上的 Safari 仍然是指针，但位置已关闭
  • Firefox 和没有 return false 一样
  • 歌剧仍然赢
  • Chrome 光标仍然是“鼠标光标”，并且该位置已关闭。

• 随着偏移量

  • Safari 接近正确（略高于）
  • Firefox略高于
  • 歌剧赢
  • 铬正确

一定会有更好的办法

PS 我无法测试 IE，所以任何结果都很好

Answer 1

layerX和layerY返回相对于整个文档的偏移量，除非事件发生在定位元素内。 最简单的解决方案是添加：

#beta {
    position: absolute;
}

或者，您可以先获取canvas在文档中的位置，然后计算相对于这些坐标的偏移量，如上一个答案中所述：

• 当不存在周围元素时跟踪画布中的鼠标位置

Answer 2

坐标是相对于页面的，但它们是相对于画布绘制的。

因此，这些点偏离了从画布左上角到页面左上角的距离。 您需要通过从 X 和 Y 坐标中减去 canvas.offset().left 和 canvas.offset().top 的值来纠正这一点。