3

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

  • 随着偏移量

    • Safari 接近正确（略高于）
    • 火狐略高于
    • 歌剧胜利
    • 铬正确

肯定有更好的办法

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

4

2 回答 2

2

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

#beta {
    position: absolute;
}

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

于 2011-03-21T18:37:48.160 回答
2

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

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

于 2011-03-21T18:52:30.993 回答