画布相对位置

我一直在玩弄HTML5中的canvas元素，并且试图获取canvas的相对位置。画布相对位置

我使用了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：

在歌剧光标是一个指针和位置是通过默认正确。

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

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

其中return false;
- Safari浏览器上鼠标按下/移动光标仍然是一个指针，但位置是关闭
- 火狐保持相同，而不返回假
- 奥普拉仍然赢得
- Chrome光标保持“鼠标光标”，位置关闭。
随着偏移
- Safari是接近正确（略高于）
- 火狐略高于
- 奥普拉WIN
- 铬正确

Ť这里必须有更好的方式

PS我不能测试IE浏览器等等，任何结果将是很好

来源

2011-03-21 austinbv

layerX和layerY回偏移相对于整个文档，除非该事件postioned元素内发生。最简单的解决办法是增加：

#beta { 
    position: absolute; 
}

或者，你可以先获取文档的canvas的位置，并计算出你的偏移量相对于这些坐标，在此以前的答案描述：

Tracking mouse position in canvas when no surrounding element exists

来源

2011-03-21 18:37:48

这是啊...我不喜欢但它的作品可能有一个更好的方式来获取相对于画布的鼠标位置，所以位置不一定是绝对的。 – austinbv 2011-03-21 18:50:26

@zobgib - 是的，有。请参阅此解决方案的以前答案：http://stackoverflow.com/questions/5085689/tracking-mouse-position-in-canvas/5086147#5086147 – 2011-03-21 18:55:43

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

因此，点的距离是从画布左上角到页面左上角的距离。您需要通过从X和Y坐标中减去canvas.offset（）。left和canvas.offset（）。top的值来解决此问题。

来源

2011-03-21 18:52:30

画布相对位置

回答

相关问题