logo-antoiba

Antonio Ibáñez Programming

Pinch Events o Eventos para hacer Zoom en móviles con jQuery

HTML5 JavaScript jQuery

Siguiendo el último artículo que escribí, vamos a ver como crear funciones para escuchar diferentes tipos de eventos que contengan más de un dedo sobre la pantalla. Esto en principio parece trivial, pero durante el transcurso de crear las funciones pueden surgir algunos problemas pues el uso de este tipo de eventos para JavaScript muchas veces no están muy estudiados por nuestra parte.

En el artículo anterior vimos que los eventos de ratón para pantallas táctiles no están (como es lógico) integrados y por ello se deben de programar separadamente. Para hacerlo se puede usar una función para comprobar que el dispositivo es una pantalla táctil.



var move_event = 'mousemove';
var up_event = 'mouseup';
var down_event = 'mousedown';

if ("ontouchstart" in window) {
move_event = 'touchmove';
up_event = 'touchend';
down_event = 'touchstart';
}

Para usar las coordenadas del puntero del ratón o del dedo sobre la pantalla se deben de realizar la comprobación de manera separada.



rxStart = "ontouchstart" in window ? e.targetTouches[0].pageX : e.screenX;
ryStart = "ontouchstart" in window ? e.targetTouches[0].pageY : e.screenY;

Y ahora viene lo bueno para detectar cuantos dedos hay sobre la pantalla. El objeto "event" de JavaScript en pantallas táctiles permite conocer la cantidad de dedos sobre la pantalla táctil, sobre el objeto DOM y sobre evento actual. Es decir, dan información de sobra para manejar los distintos tipos de eventos que existen.

Cada toque en la pantalla da la información de:

  • touches: Una lista de todos los dedos sobre la pantalla actualmente.
  • targetTouches: Una lista de los dedos sobre un elemento DOM.
  • changedTouches: Una lista de los dedos utilizados en el evento actual, por ejemplo en un evento de Zoom.

Gracias a estas propiedades podemos hacer cosas como esta. En este ejemplo, utilizando la propiedad touches, comprobamos si los dedos sobre la pantalla son dos y cogemos la posición del segundo dedo.



if (e.touches.length == 2) {
var xStart = "ontouchstart" in window ? e.targetTouches[1].pageX : 0;
var yStart = "ontouchstart" in window ? e.targetTouches[1].pageY : 0;
}

Es decir, se puede saber cuántos dedos hay en una pantalla para tratar eventos como el zoom. Para ello se puede crear esta función.



var prevDiff = -1;
var scaling = false;

//Con touchstart
if ("ontouchstart" in window) {
//var touches = e.changedTouches;
if (e.touches.length != 2) {
//Aquí hacemos lo que se tenga que hacer cuando se usa un dedo
}
if (e.touches.length == 2) {
scaling = true;
}
}
//Con touchmove
if(scaling) {
// Calculate the distance between the two pointers
var curDiff = Math.abs(ev.targetTouches[0].pageX - ev.targetTouches[1].pageX);
if (prevDiff > 0) {
if (curDiff > prevDiff) {
// The distance between the two pointers has decreased
zoomMas();
}
if (curDiff < prevDiff) {
// The distance between the two pointers has increased
zoomMenos();
}
}
// Cache the distance for the next move event
prevDiff = curDiff;
}
//Con touchend
if(scaling) {
zoomEnd(e);
prevDiff = -1;
scaling = false;
}

Ya una vez que se haga el gesto de los dedos acercándose o alejándose y se capture, se crean las funciones convenientes para que tu aplicación web haga lo que tú desees. Y como véis es bastante fácil, solo es investigar un poco. Si necesitáis más información, Mozilla pone a disposición de todo el valiente que sepa inglés su documentación para capturar y usar estos eventos.

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Multi-touch_interaction


Escribe un comentario

Anterior Usando imagemagick y bash para reducir imágenes

Está web utiliza cookies para asegurarse de una mejor experiencia de nuestra página webMás información sobre las cookies