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在带有偏移的画布中不匹配

回答

相关问题