从 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 像素,这意味着您在此手势中最终需要执行以下步骤。
因此,我们不会绘制用户移动手指时物理像素可能会显示的任何中间步骤。
现在,我们已经切换到浮点数,手势可能如下所示。
在大多数情况下,这不需要对代码进行任何更改,但这确实意味着您因触摸事件而执行的任何动画或移动都会更顺畅,尤其是对于缓慢手势。
我们还计划在移动版 Safari 中也推出这项改进:https://bugs.webkit.org/show_bug.cgi?id=133180。