Una modifica relativamente piccola all'API Touch in Chrome è arrivata
Chrome 39, che
ha introdotto una versione funzionante dell'attributo webkitRotationAngle in
Oggetto TouchEvent. Ora in Chrome 45 (beta a luglio 2015), il suo prefisso è rotationAngle,
per allineare la nostra implementazione
TouchEvent
Specifiche e Firefox.
È in giro da un po', ma è bene spiegare cosa
rotationAngle è perché consente di usare il tocco in modo più interessante
in particolare sui dispositivi mobili.
Tecnicamente, l'angolo di rotazione è il numero di gradi (compreso tra 0 e 90) di
l'ellisse dell'area di contatto definita
Touch.radiusX
e
Touch.radiusY.
Ehm, fantastico, vero? (Devo notare che ho scoperto che Chrome su
Android non blocca i valori radiusX e radiusY a 64 px ma
varia in base alle dimensioni del contatto dello schermo).
Che cosa significa concretamente?
Consideralo un modo per rappresentare con precisione la dimensione, la forma e l'orientamento di
il dito dell'utente su uno schermo. Gli utenti non sempre toccano lo schermo con il pennino
della punta del dito, ma piuttosto spesso premono lo schermo come se
alla polizia un'impronta. Senza rotationAngle, si ottiene
la larghezza e l'altezza del gesto di tocco. Con rotationAngle,
ottenere 90 gradi di rotazione (0 corrisponde a verticale e 90 a orizzontale). Solo perché
90 gradi? Ti servono solo 90 gradi perché mentre ti sposti oltre quegli angoli
radiusX e radiusY verranno modificati per adattarsi.
Un altro aspetto interessante è che l'area di contatto del dito dell'utente cambia
poiché variano il grado di pressione del dito sullo schermo. Non è un
sostituzione diretta di force, ma puoi distinguere tra pennelli chiari
sullo schermo perché avranno una superficie minore rispetto a una pressione più dura.
Come posso utilizzarlo?
Innanzitutto devi avere un dispositivo in grado di rilevare questi comportamenti. Un Nexus 10 andrà bene. R un ottimo esempio è esaminare direttamente Esempio di dipinto di Rick Byers. Da non essere da meno anche se ecco un modo per usarlo 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 useresti nella pratica?
In alcuni punti evidenti questo potrebbe essere un vantaggio immediato per utente:
- Ad esempio, le app web per la pittura e la manipolazione delle immagini potrebbero usare questa informazioni per modificare il tratto o gli effetti applicati al canvas. Potresti usa il raggio di tocco per modificare le dimensioni del pennello e puoi combinarlo rotazioneAngolo per variare l'angolo di contatto del pennello sull'area di lavoro.
- Riconoscimento dei gesti avanzato: se comprendi l'angolo di rotazione, puoi crea un gesto con un dito per far ruotare un oggetto.
Tutti i dispositivi supportano questa funzionalità?
No, per il momento non è molto comune. Se hai un Nexus 10 vedrai qualcosa di simile a questo:
Immagine attribuita a Rick Byers.
Se un dispositivo non è in grado di comprendere l'angolo di rotazione di un tocco, il
rotationAngle sarà 0, mentre i valori radiusX e radiusY saranno
uguale (ma potrebbe variare a seconda dell'area della superficie di tocco corrente).
Perché preoccuparsi?
Ottima domanda. Come molte funzionalità sul web, anche questa è un'esperienza aggiuntiva.
Gli eventi di tocco funzioneranno se supportati e se i valori dei raggi e di rotazione sono
puoi migliorare la tua applicazione per offrire all'utente una maggiore
un'esperienza senza intervento manuale. Non tutti gli utenti possiedono un tablet Wacom, ma quando sono presenti molti quadri
le applicazioni ne trarranno vantaggio.
Cosa sono gli eventi Puntatore?
Si tratta soltanto di assicurarci che ci sia un evento touch completo per gli sviluppatori che la utilizzano. Guarda come ho aggirato un po' la domanda... Altro seriamente, se ti interessa seguire l'evento PointerEvent di Blink puoi aggiungere il problema 471824 a Speciali e leggi Rick Byers" di monitoraggio.