我知道查找相对于 Canvas 的点击位置的常用方法,如 documented before ,简单来说就是:
- 抓取
event.pageX
和event.pageY
值以获取相对于文档的点击位置 - 使用
canvasEl.offsetLeft
/canvas.El.offsetTop
或使用 jQuery 的$(canvasEl 减去页面上 Canvas 的 x 和 y 坐标).offset()
,必要时通过父级递归 - 减去页面和任何父元素(如果有)的滚动位置。
遗憾的是,当以下两个条件都成立时,这不起作用:
- Canvas 是 Polymer 元素的一部分(我假设任何其他可以填充 Shadow DOM 的 WebComponent 解决方案)元素
- Canvas 位于滚动父对象内。我对此进行了一些调查,看起来 Polymer 在跨越阴影边界时跳过了祖先,这意味着滚动偏移计算不正确。
最佳答案
每当我遇到这个问题时,即使在 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,这个答案都是一个很好的解决方案 - 碰巧这是我解决问题的方法,并且真正解决了问题。
关于javascript - 如何获取 Polymer/Web 组件中 Canvas 上单击/点击的坐标(在滚动容器内时),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31462452/