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

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.66700744628907: radius.5658383838383838565656565683838385656565656565656565656565656565656565656565656565656565656565656565656565656565656565638



这一变更的结果意味着您可以更流畅地响应用户手势,因为它可以提高手指位置的准确度。

通过 Rick Byers 的演示,您可以看出慢速绘制旋涡会产生什么样的巨大变化。

触摸事件之间的差异。

这只会影响像素密度大于 1 的屏幕。为了理解原因,让我们通过一个示例来逐步说明一下原因。

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

CSS 像素和屏幕像素网格。

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

手势期间的 CSS 像素精确度。

因此,我们不会绘制用户移动手指时物理像素可能会显示的任何中间步骤。

现在,我们已经切换到浮点数,手势可能如下所示。

手势过程中的浮动精度。

在大多数情况下,这不需要对代码进行任何更改,但这确实意味着您因触摸事件而执行的任何动画或移动都会更顺畅,尤其是对于缓慢手势。

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