En Chrome 39, se introdujo un cambio relativamente pequeño en la API de Touch, que incluyó una versión funcional del atributo webkitRotationAngle en el objeto TouchEvent. Ahora, en Chrome 45 (versión beta en julio de 2015), no tiene prefijo como rotationAngle,
lo que hace que nuestra implementación esté más en línea con la especificación
TouchEvent
y Firefox.
Aunque existe desde hace un tiempo, vale la pena explicar qué es
rotationAngle, ya que permite 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? (Cabe señalar que solo descubrí que Chrome en Android no bloquea los valores radiusX y radiusY en 64 px, sino que los varía según el tamaño de contacto de la pantalla).
¿Qué significa esto?
Piensa en esto 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 de los dedos, sino que, con frecuencia, la presionan como si estuvieran dándole una huella dactilar a la policía. Sin rotationAngle, solo obtendrías
el ancho y el alto 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 te muevas más allá de esos ángulos,
radiusX y radiusY cambiarán para adaptarse.
Otra característica interesante es que el área de contacto del dedo del usuario cambia
a medida que varía el grado de presión que ejerce sobre la pantalla. No es un reemplazo directo de force, pero puedes distinguir entre los toques ligeros 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 detectarlo. Un Nexus 10 funcionará bien. Un buen ejemplo es mirar directamente el ejemplo de pintura de Rick Byers. Sin embargo, para no quedarse atrás, aquí hay una forma de usarlo sin 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;
¿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 táctil para modificar el tamaño del pincel y puedes combinarlo con rotationAngle para variar el ángulo de contacto del pincel en el lienzo.
- Reconocimiento de gestos mejorado: Si comprendes el rotationAngle, puedes crear un gesto de un dedo para hacer girar un objeto.
¿Todos los dispositivos admiten esta función?
No. Todavía no es muy común. Si tienes una Nexus 10, verás algo como lo siguiente:
Crédito de la imagen para 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 de contacto actual).
¿Para qué te molestas…?
Buena pregunta. Al igual que muchas funciones de la Web, esta es una experiencia adicional.
Los eventos táctiles funcionarán cuando sean compatibles y, si los valores de radio y rotación están disponibles, podrás mejorar tu aplicación para brindar al usuario una experiencia más completa. No todos los usuarios tienen una tablet Wacom, pero, cuando está presente, muchas aplicaciones de pintura
la aprovechan.
¿Qué sucede con los eventos de puntero?
En realidad, se trata de asegurarnos de que tengamos una API de eventos táctiles completamente desarrollada para los desarrolladores que dependen de ella. Observa cómo esquivé un poco la pregunta… Sin embargo, 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.