Ipad 或移动 Safari 浏览器上的 HTML5 Canvas 触摸事件偏移答案

【问题标题】：HTML5 Canvas touch event offset on Ipad or mobile safari browserIpad 或移动 Safari 浏览器上的 HTML5 Canvas 触摸事件偏移
【发布时间】：2011-12-15 20:52:46
【问题描述】：

我有一个问题，我无法通过谷歌搜索，这是我在 stackoverlow 上的第一篇文章。我有两个相互堆叠的画布元素，以在我的公司网站上创建彩票类型的刮板功能。问题是，在 Ipad 上，如果我向下滚动页面甚至一个像素，触摸位置就会关闭，等于滚动的高度。我尝试了几种不同的方法来尝试解决此偏移问题，但均无济于事。

使用的 JS 库：Jquery1.6.4 和 kinetic2d1.0.2 http://www.kineticjs.com/ 用于移动触摸事件检测。

我没有经常使用 safari mobile，所以我认为有一些属性或方法可以确定我不知道的偏移量。

我想要一个 JS 解决方案来解决这个问题，但是任何能让我到达终点线的 hack 都会获胜。

提前致谢。

【问题讨论】：

标签： jquery ipad mobile-safari html5-canvas

【解决方案1】：

这里没有 iPad 来测试它，但你看过jQuery Offset 吗？您可以使用它来获取画布元素相对于浏览器窗口的坐标，然后在计算中进行补偿，如下所示：

offset = $('#myCanvas').offset();
left = pageX - offset.left;
top = pageY - offset.top;

【讨论】：

是的，这是我尝试的第一件事。计算偏移量不是问题。

【解决方案2】：

使用这个函数来包裹你的触摸坐标 - 给这个函数添加一个 touchmove 监听器

function touchMove_event(event){
    var canvas = document.getElementById("yourCanvas");
    var coors = {
      x: event.targetTouches[0].pageX - canvas.clientLeft,
      y: event.targetTouches[0].pageY- canvas.clientTop
    };
    touchHandler(coors);
}

然后将其传递给您当前处理触摸事件的任何函数 - 使用 coord.x 和 coord.y

【讨论】：

【解决方案3】：

我发现通过将画布加载到 iframe 中，偏移问题变得无声。因此，无论月球的滚动、方向、重力如何，刮板都可以工作。

您可以通过网络、ipad 或智能手机Front Flip 查看实时版本。也下载该应用程序。它摇摆不定！

【讨论】：

这是一个巨大的 hack - 实施和维护有点痛苦，但似乎很有魅力