Una modifica relativamente piccola all'API Touch in Chrome è stata introdotta 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 un prefisso come rotationAngle,
rendendo la nostra implementazione più in linea con la
specifica TouchEvent
e con Firefox.
Anche se è disponibile da un po' di tempo, vale la pena spiegare che cos'è rotationAngle, in quanto consente un utilizzo più interessante dei gesti touch, in particolare sui dispositivi mobili.
Tecnicamente, l'angolo di rotazione è il numero di gradi (tra 0 e 90) dell'ellisse dell'area di contatto definita da Touch.radiusX e Touch.radiusY.
Ehm, fantastico, giusto? (Tieni presente che ho scoperto solo che Chrome su Android non blocca i valori radiusX e radiusY su 64px, ma li varia in base alle dimensioni del contatto dello schermo).
Che cosa significa esattamente?
Pensalo come un modo per rappresentare con precisione le dimensioni, la forma e l'orientamento del dito dell'utente sullo schermo. Gli utenti non toccano sempre lo schermo con la punta del dito, ma spesso premono lo schermo come se stessero dando un'impronta alla polizia. Senza il rotationAngle, otterresti semplicemente
la larghezza e l'altezza del gesto tocco. Con rotationAngle, ottieni 90 gradi di rotazione (0 è verticale e 90 è orizzontale). Perché solo
90 gradi? Ti occorrono solo 90 gradi perché, man mano che superi questi angoli, radiusX e radiusY cambieranno per adattarsi.
Un'altra caratteristica interessante è che l'area di contatto del dito dell'utente cambia
man mano che varia il grado di pressione del dito sullo schermo. Non è un
sostituzione diretta di force, ma puoi distinguere tra i tratti leggeri
sullo schermo perché avranno una superficie più piccola rispetto a una pressione più forte.
Come faccio a utilizzarlo?
Innanzitutto, devi avere un dispositivo in grado di rilevare questo problema. Un Nexus 10 andrà benissimo. Un ottimo esempio è l'esempio di pittura di Rick Byers. Per non essere da meno, anche se è un modo per utilizzarlo 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 lo utilizzeresti in pratica?
Esistono alcuni luoghi evidenti in cui questo sarebbe un vantaggio immediato per l'utente:
- Ad esempio, le app web di pittura e manipolazione di immagini potrebbero utilizzare queste informazioni per modificare il tratto o gli effetti applicati alla tela. Puoi utilizzare il raggio del tocco per modificare le dimensioni del pennello e puoi combinarlo con rotationAngle per variare l'angolo di contatto del pennello sulla tela.
- Riconoscimento dei gesti migliorato: se conosci l'angolo di rotazione, puoi creare un gesto con un solo dito per ruotare un oggetto.
Tutti i dispositivi supportano questa funzionalità?
No. Non è ancora molto comune. Se hai un Nexus 10, vedrai un messaggio simile al seguente:
L'immagine è di Rick Byers.
Quando un dispositivo non riesce a comprendere l'angolo di rotazione di un tocco, rotationAngle sarà 0 e i valori radiusX e radiusY saranno uguali (ma possono variare a seconda dell'area della superficie di tocco corrente).
Perché preoccuparti?
Ottima domanda. Come molte funzionalità sul web, si tratta di un'esperienza aggiuntiva.
Gli eventi tocco funzioneranno se supportati e, se i valori di raggio e rotazione sono disponibili, puoi migliorare la tua applicazione per offrire all'utente un'esperienza più completa. Non tutti gli utenti hanno un tablet Wacom, ma se presente, molte applicazioni di pittura ne trarranno vantaggio.
E gli eventi relativi al cursore?
Si tratta semplicemente di assicurarci di avere un'API di eventi tocco completamente sviluppata per gli sviluppatori che la utilizzano. Hai notato come ho schivato un po' la domanda? Però, se ti interessa seguire l'implementazione di PointerEvent di Blink, puoi aggiungere una stella al Issue 471824 e leggere il documento di monitoraggio di Rick Byers.