Un cambio relativamente pequeño en la API de Touch en Chrome llegó
Chrome 39, que
se introdujo una versión funcional del atributo webkitRotationAngle en el
TouchEvent. Ahora, en Chrome 45 (beta en julio de 2015), no tiene el prefijo rotationAngle,
que la implementación esté más alineada con el
TouchEvent
Spec y Firefox.
Aunque ya existe hace un tiempo, vale la pena explicar
rotationAngle es que permite un uso más interesante del tacto
especialmente en dispositivos móviles.
Técnicamente, el ángulo de rotación es la cantidad de grados (entre 0 y 90) de
la elipse del área de contacto definida por
Touch.radiusX
y
Touch.radiusY:
Genial, ¿no? (Ten en cuenta que solo descubrí que Chrome en
Android no bloquea los valores radiusX y radiusY en 64 px, sino que
varía según el tamaño de contacto de la pantalla).
¿Qué significa realmente?
Piensa en ello como una forma de representar con precisión el tamaño, la forma y la orientación de
el dedo del usuario en una pantalla. Los usuarios no siempre presionan la pantalla con la punta
de la punta del dedo, sino que presionan
con frecuencia la pantalla como si estuvieran
una huella dactilar. Sin el rotationAngle, obtendrás fácilmente
qué tan ancho y alto era el gesto táctil. Con el rotationAngle, puedes
obtener 90 grados de rotación (0 en vertical y 90 en horizontal). ¿Por qué solo
¿90 grados? Solo necesitas los 90 grados porque,
a medida que pasas esos ángulos,
radiusX y radiusY cambiarán para adaptarse.
Otro aspecto interesante de esto es que el área de contacto del dedo del usuario cambia
ya que varían el grado de presión del dedo sobre la pantalla. No es un
reemplazo directo de force, pero puedes distinguir entre pinceles ligeros
sobre la pantalla porque tendrá una superficie más pequeña que si presionas con más fuerza.
¿Cómo puedo usarla?
Primero, necesitas un dispositivo que pueda detectar esto. Un Nexus 10 funcionará bien. R un buen ejemplo es mirar directamente Ejemplo de pintura de Rick Byers. No se debe superar aunque esta es una forma de usarlo sin lienzo.
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;
¿Dónde usarías esto en la práctica?
Hay algunos lugares obvios donde esto sería un beneficio inmediato para usuario:
- Por ejemplo, las aplicaciones web de pintura y manipulación de imágenes podrían usar esto. para modificar el trazo o los efectos aplicados al lienzo. Podrías usa el radio táctil para modificar el tamaño del pincel y puedes combinarlo en la rotaciónAngula para variar el ángulo de contacto del pincel sobre el lienzo.
- Reconocimiento de gestos mejorado: Si comprendes el RotationAngle, puedes crear un gesto con un solo dedo para girar un objeto.
¿Todos los dispositivos son compatibles?
No. Por el momento, no es muy común. Si tienes una Nexus 10, verás algo como lo siguiente:
Crédito de la imagen a Rick Byers.
Cuando un dispositivo no puede comprender el ángulo de rotación de un toque, el
rotationAngle será 0, y los valores radiusX y radiusY serán
iguales (pero pueden variar según el área de superficie táctil actual).
¿Por qué preocuparse?
Buena pregunta. Al igual que muchas funciones de la Web, esta es una experiencia aditiva.
Los eventos táctiles funcionarán cuando sean compatibles y si los valores de radio y rotación
puedes mejorar tu aplicación para darle al usuario una forma
una experiencia fluida a los desarrolladores. No todos los usuarios tienen una tablet Wacom, pero cuando hay muchas pinturas
y aplicaciones lo aprovecharán.
¿Qué ocurre con los eventos de puntero?
Se trata de hacer un evento táctil completamente desarrollado para los desarrolladores que confían en ella. Mira cómo esquité un poco la pregunta... Más pero si te interesa seguir el evento PointerEvent de Blink para la implementación, puedes destacar el error 471824 y leer Rick Byers' documento de seguimiento.