Un cambio relativamente pequeño en la API de Touch en Chrome llegó a Chrome 39, que introdujo una versión en funcionamiento del atributo webkitRotationAngle en el objeto TouchEvent. Ahora, en Chrome 45 (beta en julio de 2015), no tiene el prefijo rotationAngle, lo que alinea nuestra implementación con las especificaciones de TouchEvent y Firefox.
Aunque existe un tiempo, vale la pena explicar qué es rotationAngle, ya que ofrece un uso más interesante de los gestos táctiles, 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 a 64 px, sino que varía según el tamaño del contacto de la pantalla).
¿Qué significa en realidad?
Considéralo una manera de representar con precisión el tamaño, la forma y la orientación del dedo del usuario en una pantalla. Los usuarios no siempre presionan la pantalla con la punta del dedo, sino que presionan con frecuencia la pantalla como si le estuvieran dando una huella dactilar a la policía. Sin el rotationAngle, obtendrías de forma sencilla el ancho y la altura del gesto táctil. Con la rotationAngle, obtienes 90 grados de rotación (0 son verticales y 90 son horizontales). ¿Por qué solo
90 grados? Solo necesitas los 90 grados porque, a medida que avanzas más allá de 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 a medida que varía el grado de presión del dedo en la pantalla. No es un reemplazo directo de force, pero puedes distinguir entre los pinceles claros en la pantalla porque tendrán un área de superficie más pequeña que cuando se presiona con fuerza.
¿Cómo puedo usarla?
Primero, necesitas un dispositivo que pueda detectar esto. Una Nexus 10 funcionará bien. Un excelente ejemplo es mirar directamente el ejemplo de pintura de Rick Byers. No hay que dejar de lado, aunque aquí hay 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 casos evidentes en los que esto sería un beneficio inmediato para el usuario:
- Las aplicaciones web de pintura y manipulación de imágenes, por ejemplo, podrían usar esta información para modificar el trazo o los efectos aplicados al lienzo. Puedes usar el radio táctil para modificar el tamaño del pincel y combinarlo en el ángulo de rotación para variar el ángulo de contacto del pincel en el lienzo.
- Reconocimiento de gestos mejorado: Si comprendes el valor de rotationAngle, puedes crear un solo gesto con el dedo para hacer girar un objeto.
¿Todos los dispositivos admiten esta función?
No. Aún no es muy común. Si tienes una Nexus 10, verás algo similar
Crédito de la imagen a Rick Byers.
Cuando un dispositivo no puede interpretar el ángulo de rotación de un toque, el valor de rotationAngle será 0, y los valores de radiusX y radiusY serán iguales (pero pueden variar según el área de superficie táctil actual).
¿Por qué molestarse?
Buena pregunta. Como muchas funciones de la Web, esta es una experiencia adicional.
Los eventos táctiles funcionarán cuando sean compatibles y, si los valores de radios y rotación están disponibles, puedes mejorar tu app para brindarle al usuario una experiencia con mayor capacidad. No todos los usuarios tienen una tableta Wacom,
pero muchas aplicaciones de pintura la aprovecharán.
¿Qué ocurre con los eventos de puntero?
Solo se trata de asegurarnos de tener una API de eventos táctiles completamente desarrollada para los desarrolladores que confían en ella. Mira cómo elude un poco la pregunta... Sin embargo, en serio, si te interesa seguir la implementación de PointerEvent de Blink, puedes destacar el Error 471824 y leer el documento de seguimiento de Rick Byers.