如何在聚合物/WebComponent中获得点击/点击画布的坐标(当在滚动容器内时)

How to get the coordinates of click/tap on canvas in Polymer/WebComponent (when inside scrolled container)

本文关键字：滚动 坐标 WebComponent 聚合物      更新时间：2023-09-26

我知道查找相对于画布的单击位置的常用方法，正如之前记录的那样，简单地说就是:

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

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

  1. 画布是聚合物的一部分(我假设任何其他WebComponent解决方案填充阴影DOM)元素
  2. 画布位于滚动的父元素中。我对此做了一些调查，看起来像聚合物在跨越阴影边界时跳过祖先，这意味着滚动偏移量没有正确计算。

每当我遇到这个问题时，即使在WebComponents之外，我的第一反应总是为什么在画布上获得点击的坐标如此困难?这当然很重要吧?坐标不是已经算好了吗?

事实证明，他们几乎做到了。正如在SO的其他地方所描述的，画布API有一个方法getBoundingClientRect()，它返回一个DOMRect (Chrome中的ClientRect):

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

那么下面的代码将可靠地获得点击/点击相对于画布元素的坐标，来滚动或高水位:

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上测试过。

我希望这对其他人有用——过去几个月我都快被它逼疯了。非常感谢链接到这里的问题和答案。

最后，这个答案是一个整洁的解决方案，无论你是否使用聚合物/WebComponents -它只是碰巧，这是我的道路上的问题，并真正使问题得到缓解。

相关文章：