HTML5 / Javascript - 是否可以在浏览器中的Macbook Trackpad上获取触摸事件的绝对坐标?

时间:2015-04-01 06:51:47

标签: javascript html5 touch trackpad

我想在浏览器中写一些东西,在触控板上记录手势。

由于我希望能够跟踪所有动作而不必担心指针离开窗口,我首先研究了这个问题并使用MDN Pointer Lock API demo作为起点。

但是我注意到在MacBook上使用这个演示时,如果我抬起手指并在触控板上的其他位置开始新的拖动,它会忽略我的手指在空中移动的距离,它只计算我的手指完成时的动作触摸触控板。这与使用触控板在操作系统中移动鼠标指针的方式一致。

但是对于我的具体应用,我希望我的手指的绝对 x和y位于触控板上。是否可以构建上面链接的演示变体,其中红点对应于手指的绝对位置?例如,如果你举起手指然后把它放在左上角,那么红点总会跳到画布的左上方?

我知道javascript Touch Events API,它在平板电脑上使用时会给出绝对坐标,但demo在Firefox下运行MacBook时不会注册任何触控板输入(v36) )或Chrome(v41)。

我还读过可以在Chrome中启用触控仿真,虽然我找不到在我的版本下执行此操作的复选框(可能只有特殊的开发人员版本才有这个),并且从阅读中了解它,它看起来它更像是一个鼠标触摸翻译,所以我很怀疑这种模拟会对触控板有特定的支持。

有没有办法通过HTML / Javascript获取MacBook触控板上触摸事件的绝对x,y坐标?

1 个答案:

答案 0 :(得分:0)

我真的不相信你能够让触控板以你想要的方式工作。记住,触控板应该充当鼠标,它就像一个扁平的轨迹球。想象一下,就好像每当你用手指轻扫手指时手指按住光标,然后每当你按下触控板时光标都会在手指下方居中。

除非你能够将触控板1:1映射到屏幕,就像Wacom平板电脑那样,触控板与屏幕无关;它只知道鼠标。

Chrome(版本号46.0.2490.71 m)中,您可以通过在仿真模式下启用触摸事件来模拟触摸事件:

  1. 打开开发工具 F12
  2. 点击左上方的电话图标或按 Esc
  3. 打开更好的控制台
  4. 点击模拟标签
  5. 转到Sensors面板
  6. 检查Emulate touch screen
  7. Enable Emulation in Chrome