Uso dell'angolo di rotazione e Raggio tocco

Paul Kinlan

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 prefisso come rotationAngle, rendendo la nostra implementazione più in linea con la specifica TouchEvent e Firefox.

Sebbene sia disponibile da un po' di tempo, vale la pena spiegare cos'è rotationAngle, in quanto consente un utilizzo più interessante dei gesti tattili, 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, bello, vero? (Va notato che ho scoperto solo che Chrome su Android non blocca i valori radiusX e radiusY a 64 px, ma li varia a seconda delle dimensioni di contatto dello schermo).

What does it actually mean?

Immaginalo come un modo per rappresentare con precisione le dimensioni, la forma e l'orientamento del dito dell'utente su uno schermo. Gli utenti non sempre toccano lo schermo con la punta del dito, ma spesso lo premono come se stessero lasciando un'impronta digitale alla polizia. Senza rotationAngle, otterresti semplicemente la larghezza e l'altezza del gesto di tocco. Con il rotationAngle, ottieni 90 gradi di rotazione (0 è verticale e 90 è orizzontale). Perché solo 90 gradi? Ti servono solo i 90 gradi perché, man mano che superi questi angoli, radiusX e radiusY cambieranno per adattarsi.

Un altro aspetto interessante è che l'area di contatto del dito dell'utente cambia a seconda del grado di pressione del dito sullo schermo. Non è un sostituto diretto di force, ma puoi distinguere tra tocchi leggeri sullo schermo perché avranno un'area di superficie più piccola rispetto a una pressione più forte.

In che modo è possibile utilizzarla?

Innanzitutto, hai bisogno di un dispositivo in grado di rilevare questo dato. Un Nexus 10 funzionerà correttamente. Un ottimo esempio è l'esempio di pittura di Rick Byers. Per non essere da meno, ecco 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 utilizzeresti questa funzionalità in pratica?

Ci sono alcuni casi evidenti in cui questo sarebbe un vantaggio immediato per l'utente:

  • Ad esempio, le app web di pittura e manipolazione delle immagini potrebbero utilizzare queste informazioni per modificare il tratto o gli effetti applicati al canvas. Potresti 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 dei gesti migliorato: se comprendi il valore di rotationAngle, puoi creare un gesto con un dito per far ruotare un oggetto.

Questa funzionalità è supportata da tutti i dispositivi?

No, non è ancora molto comune. Se hai un Nexus 10, vedrai qualcosa di simile a quanto segue,

Screenshot della rotazione dell'angolo di tocco

Attribuzione dell'immagine a 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 contatto corrente).

Perché dovresti farlo?

Ottima domanda. Come molte funzionalità sul web, si tratta di un'esperienza aggiuntiva.
Gli eventi touch 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 una tavoletta Wacom, ma quando è presente, molte applicazioni di pittura ne traggono vantaggio.

E gli eventi puntatore?

Si tratta semplicemente di garantire un'API per gli eventi touch completa per gli sviluppatori che la utilizzano. Vedi come ho evitato un po' la domanda… Più seriamente, se ti interessa seguire l'implementazione di PointerEvent di Blink, puoi aggiungere una stella al problema 471824 e leggere il documento di monitoraggio di Rick Byers.

Argomenti correlati