Se implementó un cambio relativamente pequeño en la API de Touch en Chrome 39, que presentó una versión funcional del atributo webkitRotationAngle en el objeto TouchEvent. Ahora, en Chrome 45 (beta en julio de 2015), no tiene prefijo como rotationAngle, lo que hace que nuestra implementación sea más compatible con la especificación de TouchEvent y Firefox.
Aunque lleva un tiempo disponible, vale la pena explicar qué es rotationAngle, ya que abre un uso más interesante de los gestos táctiles, en especial 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? (Cabe señalar que solo descubrí que Chrome en Android no bloquea los valores de radiusX y radiusY en 64 px, sino que los 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 del dedo del usuario en una pantalla. Los usuarios no siempre presionan la pantalla con la punta del dedo, sino que, con frecuencia, presionan la pantalla como si le estuvieran dando una huella dactilar a la policía. Sin rotationAngle, solo obtendrías el ancho y la altura del gesto táctil. Con rotationAngle, obtienes 90 grados de rotación (0 es vertical y 90 es horizontal). ¿Por qué solo 90 grados? Solo necesitas los 90 grados porque, a medida que superas esos ángulos, radiusX y radiusY cambiarán para adaptarse.
Otra característica 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 una presión más fuerte.
¿Cómo puedo usarlo?
En primer lugar, necesitas un dispositivo que pueda detectar esto. Un Nexus 10 funcionará bien. Un buen ejemplo es mirar directamente el ejemplo de pintura de Rick Byers. Sin embargo, 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 lugares obvios en los que esto sería un beneficio inmediato para el usuario:
- Por ejemplo, las apps web de pintura y manipulación de imágenes podrían usar esta información para alterar el trazo o los efectos aplicados al lienzo. Puedes usar el radio de trazo para alterar el tamaño del pincel y combinarlo en rotationAngle para variar el ángulo de contacto del pincel en el lienzo.
- Reconocimiento de gestos mejorado: Si comprendes el objeto rotationAngle, puedes crear un gesto de un solo dedo para hacer girar un objeto.
¿Todos los dispositivos son compatibles con esta función?
No. Aún no es muy común. Si tienes un Nexus 10, verás algo similar a lo siguiente:
Crédito de la imagen: Rick Byers.
Cuando un dispositivo no puede comprender el ángulo de rotación de un toque, rotationAngle será 0 y los valores de radiusX y radiusY serán iguales (pero pueden variar según el área de la superficie táctil actual).
¿Por qué debería hacerlo?
Buena pregunta. Al igual que muchas funciones de la Web, esta es una experiencia complementaria.
Los eventos táctiles funcionarán cuando sean compatibles y, si los valores de radio y rotación están
disponibles, puedes mejorar tu aplicación para brindarle al usuario una experiencia más capaz. No todos los usuarios tienen una tablet Wacom, pero cuando está presente, muchas aplicaciones de pintura la aprovechan.
¿Qué sucede con los eventos del puntero?
En realidad, se trata de asegurarnos de tener una API de eventos táctiles completamente desarrollada para los desarrolladores que la usan. ¿Ves cómo esquivé un poco la pregunta? Sin embargo, si te interesa seguir la implementación de PointerEvent de Blink, puedes destacar el problema 471824 y leer el documento de seguimiento de Rick Byers.