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

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
166700744628906
pageX: 167.33299255371094
pageY: 195.66700744628906
166700744628906


此项变更的结果意味着,您可以更顺畅地响应用户手势,因为这可以提高手指位置的精确度。

通过 Rick Byers 的演示,您可以了解在缓慢绘制旋涡时这会带来巨大影响。

触摸事件中的差异。

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

假设您有一个 3x3 CSS 像素网格,屏幕密度为 3,这意味着我们有一个 9x9 物理像素的网格,用户从左上方到右下方进行手势。

CSS 像素和屏幕像素网格。

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

手势期间的 CSS 像素精度。

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

现在,我们已切换到浮动模式,我们的手势可能如下所示。

手势时的浮动精度。

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

我们还计划在移动版 Safari 中也推出这项改进:https://bugs.webkit.org/show_bug.cgi?id=133180