Tocco di precisione per gesti precisi

Matt Gaunt

Una modifica è stata introdotta nell'implementazione di TouchEvents di Chrome a partire dalla versione M37 (stabile dall'8/2014), che modifica le coordinate segnalate in numeri in virgola mobile invece dei numeri interi.

Prima Dopo
clienteX: 167
clienteY: 196
paginaX:   167
paginaY:   196
raggioX: 26
raggioY: 26
screenX: 167
screenY: 277
clientX: 167,33299255371094
clientY: 195,66700744628906
pageX: 167.33299255371094
pageY: 195.66700744628906



Il risultato di questa modifica consente di avere una risposta più fluida ai gesti degli utenti, in quanto aumenta la precisione della posizione delle dita.

Utilizzando la demo di Rick Byers, puoi scoprire l'enorme differenza che questo può fare se disegni lentamente un vortice.

Differenze negli eventi touch.

Questa operazione interesserà solo gli schermi con una densità di pixel maggiore di 1. Per capire perché, vediamo un esempio.

Immagina di avere una griglia 3 x 3 di pixel CSS e che la densità dello schermo sia 3, ovvero una griglia di pixel fisici 9 x 9 e l'utente gestirà i gesti dall'alto a sinistra verso il basso a destra.

Pixel CSS e la griglia dei pixel dello schermo.

All'inizio, stavamo arrotondando la posizione dei tocchi al pixel CSS più vicino, il che significava che con questo gesto avresti ottenuto i seguenti passaggi.

Precisione del pixel CSS durante il gesto.

Non riusciamo a tracciare nessuno dei passaggi intermedi che i pixel fisici potrebbero mostrare mentre l'utente muove il dito.

Ora che siamo passati ai valori mobili, il nostro gesto può avere questo aspetto.

Precisione del numero mobile durante il gesto.

Nella maggior parte dei casi, non richiede alcuna modifica al codice, ma significa che tutte le animazioni o i movimenti eseguiti come risultato di TouchEvents saranno più fluidi, in particolare per i gesti lenti.

Prevediamo di introdurre questo miglioramento anche su Safari per dispositivi mobili: https://bugs.webkit.org/show_bug.cgi?id=133180.