Präzise Touchbedienung für präzise Gesten

Matt Gaunt

Eine Änderung trat in die Implementierung der TouchEvents von Chrome in M37 ein (stabil seit 08/2014). Dadurch werden die gemeldeten Koordinaten in Gleitkommazahlen anstelle von Ganzzahlen geändert.

Vorher Nachher
clientX: 167
clientY: 196
SeiteX:   167
SeiteY:   196
radiusX: 26
RadiusY: 26
BildschirmX: 167
BildschirmY: 277
clientX: 167,33299255371094
clientY: 195.66700744628906
pageX: 167.33299255371094
pageY: 195.6670071094 36:6:52:51



Durch diese Änderung reagieren Sie reibungsloser auf die Touch-Gesten des Nutzers, da die Fingerposition genauer ist.

In der Demo von Rick Byers können Sie sehen, welchen großen Unterschied dies machen kann, wenn Sie langsam einen Wirbel ziehen.

Unterschiede bei Touch-Ereignissen.

Dies wirkt sich nur auf Bildschirme mit einer Pixeldichte größer als 1 aus. Gehen wir ein Beispiel durch, um den Grund dafür zu verstehen.

Angenommen, Sie haben ein 3 x 3-Raster aus CSS-Pixeln und die Bildschirmdichte beträgt 3, d. h. wir haben ein Raster von 9 x 9 physischen Pixeln und der Nutzer Gesten von oben links nach unten rechts.

CSS-Pixel und Bildschirmpixelraster

Ursprünglich haben wir die Berührungsposition auf das nächste CSS-Pixel gerundet, sodass Sie bei dieser Geste die folgenden Schritte ausführen mussten.

CSS-Pixelgenauigkeit bei Geste.

Wir verpassen dabei die Zwischenschritte, die die physischen Pixel anzeigen könnten, wenn der Nutzer seinen Finger bewegt.

Nun, da wir zu schwebenden Elementen gewechselt sind, kann unsere Geste so aussehen.

Präzision bei Bewegung schweben.

In den meisten Fällen sind dafür keine Änderungen an Ihrem Code erforderlich. Alle Animationen oder Bewegungen, die Sie infolge von TouchEvents ausführen, sind jedoch reibungsloser. Dies gilt insbesondere für langsame Touch-Gesten.

Es ist geplant, diese Verbesserung auch in Safari für Mobilgeräte bereitzustellen: https://bugs.webkit.org/show_bug.cgi?id=133180.