javascript 画布相对位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5381831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Canvas relative position
提问by austinbv
I have been playing around with the canvas element in HTML5 and I am trying to get the canvas relative position.
我一直在玩 HTML5 中的画布元素，我试图获得画布的相对位置。
I am using the layerX and layerY which seems like the most obvious solution but for some reason, and maybe this is just how it works the point that the layerX/Y sees is at the left corner of the pointer. my code is as follows
我正在使用 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;
}
It just adds the _x/y elements to the ev object so I can use them on a drawing surface.
它只是将 _x/y 元素添加到 ev 对象，以便我可以在绘图表面上使用它们。
Here is a video of what is happening to me:
这是发生在我身上的视频：
http://img.zobgib.com/2011-03-21_1413.swf
http://img.zobgib.com/2011-03-21_1413.swf
If you want to play with it yourself you can at http://research.zobgib.com/beta
如果你想自己玩，你可以在http://research.zobgib.com/beta
Do I just need to set a manual offset, or is layerX/Y wrong?
我只需要设置手动偏移，还是 layerX/Y 错误？
Edit:
编辑：
I can add a manual offset but this seems like the WRONG way to go about putting the x/y positions in the proper place.
我可以添加手动偏移，但这似乎是将 x/y 位置放在正确位置的错误方法。
The code for the offset is just:
偏移量的代码只是：
...
ev._x = ev.layerX-10;
ev._y = ev.layerY-13;
...
EDIT 2:
编辑2：
In Opera the cursor is a pointer and the position is correct by default.
在 Opera 中，光标是一个指针，默认位置是正确的。
In Chrome and Safari when you click (by default, without returning false) the cursor turns to a text selector and position is at the bottom of the text selector.
在 Chrome 和 Safari 中，当您单击（默认情况下，不返回 false）时，光标会变为文本选择器，并且位置位于文本选择器的底部。
In Firefox the cursor is a pointer but the position is in the center of the hand.
在 Firefox 中，光标是一个指针，但位置在手的中心。
Which a
return false;- Safari on the mousedown/move the cursor remains a pointer but the position is off
- Firefox remains the same as without return false
- Opera still wins
- Chrome the cursor remains a "mouse cursor" and the position is off.
With the offset
- Safari is close to correct (slightly above)
- Firefox slightly above
- Opera WIN
- Chrome correct
哪一个
return false;- Safari 上的鼠标按下/移动光标仍然是一个指针，但位置已关闭
- Firefox 保持不变，不返回 false
- 歌剧还是赢了
- Chrome 光标仍然是“鼠标光标”并且位置关闭。
随着偏移
- Safari 接近正确（略高于）
- 火狐略高于
- 歌剧赢
- 铬正确
There must be a better way
一定会有更好的办法
P.S. I cannot test IE so any results on that would be nice
PS我无法测试IE所以任何结果都会很好
采纳答案by Wayne
layerXand layerYreturn offsets relative to the entire document, unless the event occurs inside a postioned element. The simplest solution is to add:
layerX并layerY返回相对于整个文档的偏移量，除非事件发生在定位元素内。最简单的解决方案是添加：
#beta {
position: absolute;
}
Alternatively, you can first get the position of the canvasin the document and calculate your offsets relative to those coordinates, as described in this previous answer:
或者，您可以先获取canvas文档中的位置并计算相对于这些坐标的偏移量，如上一个答案中所述：
回答by Devon_C_Miller
The coordinates are relative to the page, but they are being plotted relative to the canvas.
坐标是相对于页面的，但它们是相对于画布绘制的。
Thus, the points are off by the distance from the upper left corner of the canvas to the upper left corner of the page. You need to correct for this by subtracting the values of canvas.offset().left and canvas.offset().top from the X and Y coordinates.
因此，这些点偏离了从画布左上角到页面左上角的距离。您需要通过从 X 和 Y 坐标中减去 canvas.offset().left 和 canvas.offset().top 的值来对此进行校正。
