Una modifica relativamente piccola all'API Touch in Chrome è stata apportata in Chrome 39, che ha introdotto una versione funzionante dell'attributo webkitRotationAngle nell'oggetto TouchEvent. Ora in Chrome 45 (beta a luglio 2015), non ha il prefisso rotationAngle e la nostra implementazione è più in linea con le specifiche TouchEvent e Firefox.
Anche se è in uso da un po' di tempo, vale la pena spiegare cos'è rotationAngle perché offre un uso più interessante dei gesti tattili, soprattutto sui dispositivi mobili.
Tecnicamente, l'angolo di rotazione è il numero di gradi (compreso tra 0 e 90) dell'ellisse dell'area di contatto definita da Touch.radiusX e Touch.radiusY.
Ehm, fantastico, vero? Va detto che ho scoperto che Chrome su Android non blocca i valori radiusX e radiusY a 64 px, ma il valore varia a seconda delle dimensioni del contatto dello schermo.
Che cosa significa davvero?
Puoi considerarla come un modo per rappresentare con precisione le dimensioni, la forma e l'orientamento
del dito dell'utente su uno schermo. Gli utenti non toccano sempre lo schermo con la punta del dito, ma premono spesso lo schermo come se stessero dando un'impronta alla polizia. Senza rotationAngle, potresti semplicemente
aprire la larghezza e l'altezza del gesto del tocco. Con rotationAngle, ottieni 90 gradi di rotazione (0 corrisponde a verticale e 90 a orizzontale). Perché solo 90 gradi? Ti servono solo i 90 gradi perché, mentre ti sposti oltre questi angoli, radiusX e radiusY cambieranno per adattarsi.
Un'altra cosa interessante è che l'area di contatto del dito cambia
mentre l'utente cambia il grado di pressione del dito sullo schermo. Non si tratta di una
sostituzione diretta di force, ma puoi distinguere i pennelli chiari
sullo schermo perché avranno una superficie più piccola rispetto a una pressione più dura.
Come posso utilizzarla?
Innanzitutto, hai bisogno di un dispositivo in grado di rilevare questa situazione. Un Nexus 10 è sufficiente. Un ottimo esempio è guardare direttamente l'esempio di pittura di Rick Byers. Ma c'è un modo per usarla senza canvas.
var touchHandler = function(e) {
e.preventDefault();
var touches = e.changedTouches;
var touch = touches[0]; // only concerned about first touch.
var rotationAngle = touch.rotationAngle || touch.webkitRotationAngle || 0;
var radiusX = touch.radiusX || touch.webkitRadiusX || 1;
var radiusY = touch.radiusY || touch.webkitRadiusY || 1;
var force = touch.force || touch.webkitForce || 0;
// Use the rotationAngle to rotate the 'p' element.
p.style.width = radiusX * 2 + 'px';
p.style.height = radiusY * 2 + 'px';
p.style.transform = "rotate(" + rotationAngle + "deg)";
};
document.documentElement.ontouchstart = touchHandler;
document.documentElement.ontouchend = touchHandler;
document.documentElement.ontouchmove = touchHandler;
Dove la useresti nella pratica?
Ci sono alcuni punti evidenti in cui ciò potrebbe essere un vantaggio immediato per l'utente:
- Le app web per la pittura e la manipolazione delle immagini, ad esempio, potrebbero usare queste informazioni per modificare il tratto o gli effetti applicati alla tela. Puoi utilizzare il raggio di tocco per modificare le dimensioni del pennello e puoi combinare l'angolo di rotazione per variare l'angolo di contatto del pennello sulla tela.
- Riconoscimento gestuale migliorato: se comprendi l'angolo di rotazione, puoi creare un gesto con un dito per far ruotare l'oggetto.
Tutti i dispositivi supportano questa funzionalità?
No. Non è ancora molto comune. Se hai un Nexus 10 vedrai qualcosa come il seguente:
Attribuzione dell'immagine a Rick Byers.
Se un dispositivo non riesce a comprendere l'angolo di rotazione di un tocco, rotationAngle corrisponderà a 0, mentre i valori di radiusX e radiusY saranno uguali (ma potrebbero variare in base all'area corrente della superficie touch).
Perché preoccuparsi?
Ottima domanda. Come molte funzionalità sul web, si tratta di un'esperienza cumulativa.
Gli eventi tocco funzioneranno se supportati e, se sono disponibili valori di raggi e rotazione, puoi migliorare l'applicazione per offrire all'utente un'esperienza più completa. Non tutti gli utenti dispongono di un tablet Wacom, ma quando sono presenti molte applicazioni
di pittura ne potranno usufruire.
E gli eventi Puntatore?
Si tratta di assicurarci di disporre di un'API per gli eventi touch completamente ottimizzata per gli sviluppatori che fanno affidamento su questa API. Vedi come ho schivato un po' la domanda... Più seriamente, se ti interessa seguire l'implementazione di PointerEvent di Blink, puoi aggiungere a Speciali Issue 471824 e leggere il documento sul monitoraggio di Rick Byers.