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

我遇到了一个问题，我无法通过Google解决这个问题，这是我在stackoverlow上的第一篇文章。 我有两个相互叠放的帆布元素，在我的公司网站上创建一个彩票类型刮擦function。 问题是，在Ipad上，如果我向下滚动页面甚至像素，触摸位置关闭等于滚动的高度。 我尝试了几种不同的路线来尝试解决这个偏移问题无济于事。

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

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

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

提前致谢。

Answer 1

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

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

Answer 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); } 

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

Answer 3

我发现通过在iframe中加载canvas，偏移问题变得无声。 因此无论滚动，方向，月球的重力是否有效。

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