0

我试图在画布中绘制图像，然后尝试用鼠标在图像内部单击。但是 X 和 Y 位置不正确，我考虑了偏移并对此进行了纠正，但它们仍然不正确。

我目前不知道如何解决它。我做了一个小提琴来复制这种情况，包括画布所在的父 div。

http://jsfiddle.net/bX5Dr/8/

我曾经考虑过偏移的代码似乎不起作用：

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，但它不是根据我使用的计算。

4

3 回答 3

2

按照这里的建议使用 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-30T05:46:59.810 回答
1

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

将偏移目标更改为：

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

http://jsfiddle.net/bX5Dr/9

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

于 2013-07-30T05:45:30.427 回答
0

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

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

但是，是的，当其他人已经给出了改变父元素偏移量的解决方案时，为什么还要玩子元素

于 2013-07-30T05:54:01.673 回答