javascript - Canvas 相对位置

Question

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

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

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 保持不变，不返回 false
  • 歌剧仍然胜出
  • Chrome 光标仍然是“鼠标光标”并且位置已关闭。

• 用偏移量

  • Safari 接近正确(略高于)
  • Firefox 略高于
  • 歌剧获胜
  • Chrome 正确

一定有更好的方法

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

Answer 1

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

#beta {
    position: absolute;
}

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

• Tracking mouse position in canvas when no surrounding element exists