畫布相對位置

我一直在玩弄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

畫布相對位置

回答

相關問題