Question

我遇到了一个问题，我无法通过Google解决这个问题，这是我在stackoverlow上的第一篇文章。我有两个相互叠放的帆布元素，在我的公司网站上创建一个彩票类型刮擦功能。问题是，在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);
}

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

Answer 3

我发现通过在iframe中加载画布，偏移问题变成了静音。所以无论滚动，方向，月球的重力是否有效。

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

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

3 个答案: