javascript - 如何获取 Polymer/Web 组件中 Canvas 上单击/点击的坐标(在滚动容器内时)

Question

我知道查找相对于 Canvas 的点击位置的常用方法，如 documented before ，简单来说就是:

1. 抓取 event.pageX 和 event.pageY 值以获取相对于文档的点击位置
2. 使用 canvasEl.offsetLeft/canvas.El.offsetTop 或使用 jQuery 的 $(canvasEl 减去页面上 Canvas 的 x 和 y 坐标).offset()，必要时通过父级递归
3. 减去页面和任何父元素(如果有)的滚动位置。

遗憾的是，当以下两个条件都成立时，这不起作用:

1. Canvas 是 Polymer 元素的一部分(我假设任何其他可以填充 Shadow DOM 的 WebComponent 解决方案)元素
2. Canvas 位于滚动父对象内。我对此进行了一些调查，看起来 Polymer 在跨越阴影边界时跳过了祖先，这意味着滚动偏移计算不正确。

Answer 1

每当我遇到这个问题时，即使在 WebComponents 之外，我的第一 react 始终是为什么获取 Canvas 上的点击坐标如此困难？这当然非常重要吗？坐标不是应该已经帮你计算了吗？

事实证明，他们几乎做到了。如上所述elsewhere on SO , canvas API 有一个方法 getBoundingClientRect()，它返回一个 DOMRect(Chrome 中的 ClientRect):

{
    x: 348,
    y: 180.35000610351562,
    width: 128,
    height: 128,
    top: 180.35000610351562,
    right: 476,
    bottom: 308.3500061035156,
    left: 348
}

因此，以下内容将可靠地获取相对于 Canvas 元素的点击/单击坐标，无论是滚动还是高水位:

var x = event.pageX,
    y = event.pageY; // (or your preferred method, e.g. jQuery)
    bounds = event.target.getBoundingClientRect();

x = x - bounds.left;
y = y - bounds.top;

以上内容来自Firefox；我发现 Chrome 不包含 x 和 y 属性，因此最好坚持使用 left 和 top 。我还没有在 IE 或 Safari 上测试过。

我希望这对其他人有用 - 在过去的几个月里它一直让我发疯。非常感谢此处链接的问题和解答。

最后，无论您是否使用 Polymer/WebComponents，这个答案都是一个很好的解决方案 - 碰巧这是我解决问题的方法，并且真正解决了问题。