Question

我是画布的新手，我需要知道点击鼠标的坐标。我成功了：

var canvas = document.getElementById('MainMap');

canvas.addEventListener('mousedown', onMapMouseDown, false);

当我尝试获得正确的坐标时问题就出现了。我试过了

var x = ev.x - canvas.offsetLeft;

var y = ev.y - canvas.offsetTop;

除了canvas.offsetLeft = 0和canvas.offsetTop = 40.（实际上它是正确的，因为画布放在div中的那个位置）。 div位于div中的另一个div中，等等。

获得正确位置的解决方案是通过getParentNode（）在递归函数中添加偏移量; 问题是。我现在如何到达顶级节点。可以是文档或顶级div或表。

Answer 1

您不需要遍历每个节点。 offsetLeft和offsetTop表示元素与offset parent的距离。什么是offsetParent？嗯，它是position与static不同的节点的第一个祖先（这是relative，absolute或fixed）

幸运的是，DOM元素包含一个名为offsetParent的属性，它指示祖先是偏移父级的，所以......

var offset = {x: 0, y: 0};
var node = canvas;
while (node) {
    offset.x += node.offsetLeft;
    offset.y += node.offsetTop;
    node = node.offsetParent;
}

这一直持续到node是文档，它位于（0,0）。

另一种更快捷的方法是使用jQuery：

var offset = $('#MainMap').offset();

Answer 2

我相信你需要使用'screen'宽度和高度。像Kinetic.js这样的脚本库让你更容易。不过，如果你坚持自己编写功能，我发现本教程非常有用：

http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

或者这篇博文：

http://miloq.blogspot.be/2011/05/coordinates-mouse-click-canvas.html

画布鼠标单击，偏移和父节点

2 个答案: