Question

我尝试在画布上绘制图像，然后尝试用鼠标在图像内部单击。但是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，但这不符合我使用的计算。

Answer 1

如建议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}
}

Answer 2

您的元素offsetLeft始终为0，因为您正在将样式应用于其父级...

将偏移目标更改为：

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

http://jsfiddle.net/bX5Dr/9

有关计算相对于页面的对象偏移量的更多信息，请考虑它的父节点，请参阅： http://www.quirksmode.org/js/findpos.html

Answer 3

我的意思是你可以像这样补偿margin-left:20px和border:1px;

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

但是，当别人给出解决方案来改变父母的偏移时，为什么要使用子元素

X和Y在画布中与偏移不匹配

3 个答案: