精密なタッチ操作で正確な操作が可能

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



この変更により、指の位置の精度が高くなり、ユーザーの操作に対する反応が滑らかになります。

Rick Byers のデモでは、渦巻きをゆっくりと描画した場合に大きな違いが生まれることがわかります。

タップイベントの違い

こうすると、ピクセル密度が 1 より大きい画面にのみ影響します。その理由を理解するために、例を交えて説明します。

CSS ピクセルの 3x3 グリッドがあり、画面密度が 3 であるとします。つまり、9x9 物理ピクセルのグリッドがあり、ユーザーが左上から右下に向かってジェスチャーを行うとします。

CSS ピクセルと画面のピクセル グリッド。

もともとは、タップの位置を最も近い CSS ピクセルに丸めていました。そのため、今回の操作では次の手順を行うことになります。

ジェスチャー時の CSS ピクセル精度。

ユーザーが指を動かすと、物理ピクセルで表示される可能性のある中間ステップが描画されません。

浮動小数点数に切り替えたので、ジェスチャーは次のようになります。

ジェスチャー時の浮動小数点精度。

ほとんどの場合、コードを変更する必要はありませんが、TouchEvents の結果として実行するアニメーションや動きが、特に遅いジェスチャーの場合はより滑らかになります。

モバイル版 Safari でもこの改善を行う予定です(https://bugs.webkit.org/show_bug.cgi?id=133180)。