首页 文章

如何获取Polymer / WebComponent中画布上点击/点击的坐标（当在滚动容器内时）

提问于
浏览 次
0

我知道找到相对于画布的点击位置的常用方法，如documented before，简而言之：

  • 抓取 event.pageX 和 event.pageY 值以获取相对于文档的点击位置

  • 使用 canvasEl.offsetLeft / canvas.El.offsetTop 或使用jQuery的 $(canvasEl).offset() 减去页面上画布的x和y坐标，必要时通过父级递归

  • 减去页面的滚动位置和任何父元素（如果有） .

遗憾的是，当以下两种情况都成立时，这不起作用：

  • 画布是Polymer的一部分（我假设任何其他WebComponent解决方案polyfills Shadow DOM）元素

  • 画布位于滚动父级中 . 我做了一些调查，看起来像聚合物在穿过阴影边界时跳过一个祖先，这意味着滚动偏移没有正确计算 .

javascript html5 canvas polymer web-component

1 回答

  • 1

    每当我遇到这个问题时，即使在WebComponents之外，我最初的反应一直是为什么在画布上获得点击的坐标是如此困难？当然，'s pretty crucial? Shouldn' t坐标是否已经计算好了？

    事实证明，他们几乎拥有 . 如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元素的tap / click的坐标，滚动或高水位：

    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，这个答案都是一个简洁的解决方案 - 恰好这是我在解决这个问题的过程中，并且真正解决了这个问题 .

    回复于

相关问题