ZingTouch: amplio reconocimiento de gestos a través de JavaScript

La posibilidad de que se acceda a su sitio web a través de un teléfono inteligente o tableta aumenta constantemente. El uso de Internet móvil está creciendo, lo que hace que sea cada vez más importante tener en cuenta la usabilidad a través de la pantalla táctil al diseñar su sitio web. Aparte de los simples toques, se han establecido muchos gestos utilizados para controlar dispositivos móviles. ZingTouch es una extensa biblioteca de JavaScript que puede utilizar para facilitar el control de su sitio web mediante gestos.

Gestos estándar para varios dedos

Generalmente, JavaScript proporciona todas las opciones para interpretar diferentes gestos. Por ejemplo, los eventos táctiles le permiten reaccionar a los toques en la pantalla, así como grabar movimientos. Aquí, es posible reconocer varios dedos que están en la pantalla al mismo tiempo.

ZingTouch está ahí para permitirle captar y procesar todos esos diferentes gestos comunes. La biblioteca de JavaScript es capaz de interpretar tanto toques simples como toques con varios dedos, además de reaccionar de manera diferente a cada uno.

ZingTouch también reconoce rotaciones en la pantalla, o pellizcar y soltar los dedos.

Ejemplos en CodePen

Integrar ZingTouch y reconocer gestos

Para utilizar ZingTouch, la biblioteca debe integrarse primero en su documento HTML. Posteriormente, cree una llamada región, que se supone que reacciona a un determinado gesto. Tal región podría ser cualquier elemento HTML.

var region = ZingTouch.Region(document.getElementById("container"));

En nuestro ejemplo, el elemento HTML con el ID «contenedor» se asigna a la variable «región» a través de «ZingTouch.Region ()». En el siguiente paso, se define un gesto al que se supone que reacciona la región.

var geste = new ZingTouch.Tap({
  numInputs: 2,
  maxDelay: 1000
});

Aquí, un toque se define usando «ZingTouch.Tap ()». Puede asignarle diferentes parámetros. “NumInputs” determina la cantidad de puntos de encuentro que deben ocurrir en la región. Además, «maxDelay» define la duración máxima del grifo en milisegundos.

Por lo tanto, en este caso específico, dos dedos deben estar en la región durante un máximo de un segundo. En el paso final, el gesto se vincula a la región mediante «bind ()» y se determina una función que se inicia después de que un gesto ejecutado con éxito.

region.bind(document.getElementById("container"), gesture, function(e) {
  console.log("Tapped.");
});

Este sencillo ejemplo garantiza que un toque con dos dedos provoque «Tocado». para ser escrito en el elemento con el ID «contenedor» en la consola.

Seis gestos personalizables individualmente

Girar gesto

Aparte de los gestos de toque bastante simples, hay cinco gestos más disponibles. Puede realizar gestos de rotación, gestos de expansión y pellizco, gestos de panorámica y gestos de deslizamiento clásicos.

Hay diferentes opciones de personalización para cada gesto. Con el gesto de deslizar, por ejemplo, puede ingresar la velocidad con la que debe ejecutarse el gesto.

new ZingTouch.Swipe({
  escapeVelocity: 0.25,
});

Cada gesto también tiene valores de retorno que se pueden leer y evaluar. El gesto de deslizar muestra un ángulo que representa la dirección del gesto.

region.bind(document.getElementById("container"), "swipe", function(e) {
  console.log(e.detail.data[0].currentDirection";
});

En este ejemplo, el gesto simplemente se transfiere al método «bind ()» sin ningún parámetro adicional. El ángulo de dirección «currentDirection» se escribe en la consola tras la ejecución exitosa del gesto.

Documentación extensa

Documentación extensa y vívida

ZingTouch es una herramienta completa que le permite cubrir todos los gestos comunes e implementarlos en sus propios proyectos web móviles sin mucho esfuerzo. Hay una documentación detallada con muchos ejemplos disponibles en CodePen.

La biblioteca se distribuye bajo la licencia gratuita MIT. Por lo tanto, también puede utilizar ZingTouch con fines comerciales.

(dpe)