使用精准触控功能实现精准手势

Matt Gaunt

从 M37 开始(2014 年 8 月发布稳定版),Chrome 的 TouchEvents 实现中进行了更改,将报告的坐标更改为浮点数(而非整数)。

之前 之后
clientX: 167
clientY: 196
pageX:   167
pageY:   196
radiusX: 26
radiusY: 26
screenX: 167
screenY: 277
clientX: 167.33299255371094
clientY: 195.66700744628906
pageX:   167.33299255371094
pageY:   195.66700744628906
radiusX: 25.843116760253906
radiusY: 25.843116760253906
screenX: 167.33334350585938
screenY: 276.66668701171875

这项更改的结果是,您可以更准确地确定手指位置,从而更流畅地响应用户手势。

通过 Rick Byers 的演示,您可以了解在缓慢绘制漩涡时,这会产生多么巨大的影响。

触摸事件的差异。

这只会影响像素密度大于 1 的屏幕。为了了解原因,我们来看一个示例。

假设您有一个 3x3 的 CSS 像素网格,且屏幕密度为 3,这意味着我们有一个 9x9 的实际像素网格,并且用户手势从左上角向右下角滑动。

CSS 像素和屏幕像素网格。

最初,我们会将触摸位置舍入到最近的 CSS 像素,这意味着在此手势中,您最终会执行以下步骤。

手势期间的 CSS 像素精度。

我们错过了在用户移动手指时物理像素可以显示的任何中间步骤。

现在,我们已改用浮点数,我们的手势可以如下所示。

手势期间的浮点精度。

在大多数情况下,这无需您更改任何代码,但这意味着,您因 TouchEvent 而执行的任何动画或移动都会更流畅,尤其是对于缓慢的手势。

我们还计划将此改进引入到移动版 Safari:https://bugs.webkit.org/show_bug.cgi?id=133180