在Canvas内获取相对触摸坐标

Question

我最近几天一直在开发我的第一个HTML5游戏原型，并需要使其在台式机和移动设备上运行。问题是，我对Web开发完全不熟悉。

为了获取相对于画布的鼠标/触摸位置，我已经停用了“e.layerX”或“e.offsetX”，并开始使用这种方法。我甚至添加了<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">。

但即便如此，在旋转屏幕时，触摸坐标也会偏移，并且Dolphin也以非常奇怪的方式处理触摸事件。

有没有通用的方法来解决这个问题？我不熟悉这些技术，也许可以使用jQuery或类似的东西吗？

编辑：此外，“pageX”、“screenX”和“clientX”都返回相同的值。不知道为什么，我使用了“e.touches[0].clientX”。

编辑2：我认为我已经解决了这个问题。忘记了如果屏幕旋转，必须再次调用“findPos（obj）;”。我甚至不想在没有这个meta标签的情况下测试它，现在就像这样保留。

- Caio Faustino

Answer 1

我使用以下代码（通过 JQuery）获取鼠标在Canvas中的位置，相对于Canvas：

canvas.mousemove(function(e){
    mmouseX = e.pageX-canvas.position().left;
    mmouseY = e.pageY-canvas.position().top;
}

我在安卓自带的浏览器上试过，效果还不错，而且在桌面电脑上也可以。不过我没试过用海豚浏览器。

- Shivan Dragon