X和Y在帶有偏移的畫布中不匹配

我試圖在畫布中繪製圖像，然後嘗試用鼠標單擊圖像內部。但是X和Y的位置不正確，我考慮了偏移量並對其進行了修正，但它們仍然不正確。X和Y在帶有偏移的畫布中不匹配

我目前不知道如何解決它。我做了一個小提琴來複制包括畫布所在的父div在內的情況。

我使用的代碼，以彌補考慮，這似乎並不奏效：

function getxy(event,el){ 
    canvasX = event.pageX - el.offsetLeft, 
    canvasY = event.pageY - el.offsetTop; 
    return {x:canvasX, y:canvasY} 
//does not give the same answer as you would expect when using drawImage(); 
}

在撥弄畫布的左上角應0,0但它不是根據我使用的計算。

來源

2013-07-30 Sir

試圖在計算中去除保證金和邊框像素？ – rps

我還沒有 - 我認爲抵消了考慮= /我將如何納入他們？ – Sir

您的元素offsetLeft始終爲0，因爲您將餘裕應用於其父項......將其更改爲： 'canvasX = event.pageX - el.parentNode.offsetLeft，'http://jsfiddle.net/bX5Dr/9/ – JayMoretti

如建議here那麼使用element.getBoundingClientRect（）怎麼樣？

function getxy(event,el){ 
    var rect = el.getBoundingClientRect(); 
    canvasX = event.pageX - rect.left, 
    canvasY = event.pageY - rect.top; 
    return {x:canvasX, y:canvasY} 
}

來源

2013-07-30 05:46:59 Katona

它的工作原理，但我得到浮點數回報。這是正常的嗎？ – Sir

哇...非常真棒功能我從來不知道存在！ – JayMoretti

我傾向於給這個正確答案的結果僅僅是爲了在未來幫助他人，因爲這是更優雅的解決方案。 – Sir

你的元素offsetLeft始終爲0，因爲你申請的風格，它的父...

變化偏移目標：

canvasX = event.pageX - el.offsetParent.offsetLeft,

http://jsfiddle.net/bX5Dr/9

欲瞭解更多信息在計算相對於頁面的對象偏移時，考慮它的父節點，參見： http://www.quirksmode.org/js/findpos.html

來源

2013-07-30 05:45:30 JayMoretti

很好的鏈接！謝謝！ – Sir

我的意思是什麼，你可以彌補margin-left:20px和border:1px這樣;

canvasX = event.pageX - el.offsetLeft-21, 
canvasY = event.pageY - el.offsetTop-1;

但是啊，爲什麼跟孩子玩元素，當別人給予的解決方案來改變父母的偏移

來源

2013-07-30 05:54:01 rps

X和Y在帶有偏移的畫布中不匹配

回答

相關問題