Tocco di precisione per gesti precisi

Matt Gaunt

È stata apportata una modifica nell'implementazione di TouchEvents di Chrome a partire dalla versione M37 (stabile a partire dall'8/08/2014), che modifica le coordinate dei report in numeri in virgola mobile anziché in numeri interi.

Prima Dopo
clientX: 167
clientY: 196
pageX:   167
paginaY:   196
raggioX: 26
raggioY: 26
screenX: 167
screenY: 277
clientX: 167.33299255371094
clientY: 195.66700744628906
pageX: 167.33299255371094
pageY: 195.667007446528906
628906


Il risultato di questa modifica significa che hai una risposta più fluida ai gesti degli utenti, in quanto offre una maggiore precisione della posizione delle dita.

Utilizzando la demo di Rick Byers, puoi vedere l'enorme differenza che può fare quando si disegna lentamente un vortice.

Differenze negli eventi tocco.

Questa operazione interesserà solo le schermate con una densità dei pixel maggiore di 1. Per capire il perché, analizziamo un esempio.

Immagina di avere una griglia 3 x 3 di pixel CSS e la densità dello schermo è 3, ovvero una griglia di pixel fisici 9 x 9 e gesti dell'utente dall'angolo in alto a sinistra a quello in basso a destra.

Griglia di pixel dello schermo e pixel dello schermo.

All'inizio, abbiamo arrotondato la posizione del tocco al pixel CSS più vicino, il che significava che in questo gesto avresti ottenuto i seguenti passaggi.

Precisione dei pixel CSS durante il gesto.

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

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

Precisione di fluttuazione durante il gesto.

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

Abbiamo intenzione di apportare questo miglioramento anche a Safari per dispositivi mobili: https://bugs.webkit.org/show_bug.cgi?id=133180.