Ene 202013
 
Artículo HTML

En nuestro anterior artículo hemos visto cómo pintar con el ratón sobre un canvas HTML5. La solución que presentábamos en él no es aplicable si el usuario accede a la página desde un dispositivo móvil, porque en ese caso no existe el ratón. En su lugar, el usuario interacciona con la página tocando la pantalla.

En este artículo vamos a ver cómo se puede obtener una funcionalidad similar que permite pintar con el dedo sobre un dispositivo Android, iPhone o similar.

Eventos táctiles javascript

Cuando el usuario interacciona con un ordenador de sobremesa o portátil mediante el ratón, se generan eventos que en javascript pueden ser capturados y procesados por sus correspondientes manejadores de eventos: “onclick”, “onmousemove”, etc.

Del mismo modo, cuando el usuario interacciona con un dispositivo móvil tocando la pantalla táctil, se generan eventos análogos “touchstart”, “touchmove” y “touchend”. Básicamente, una aplicación javascript que utilizara los eventos de ratón puede convertirse a una aplicación para móvil sustituyendo los eventos de ratón por sus equivalentes eventos táctiles.

Inhibir el comportamiento por defecto

Pero por otra parte, en un dispositivo móvil, cuando el usuario toca y mueve el dedo sobre la pantalla en el navegador, el comportamiento por defecto es desplazar el contenido de la pantalla en la dirección indicada. Para controlar totalmente la interacción con el usuario, la aplicación javascript debe inhibir este comportamiento. Para ello se utiliza la función “preventDefault()” del evento.

Teniendo esto en cuenta, podemos reescribir nuestro código del artículo anterior para crear una versión para móviles.

Obtener el evento original a partir del evento jQuery. Array targetTouches

El código javascript del manejador de eventos para el evento “onclick” era anteriormente:

    $('#canvas').mousedown(function(e){
      pulsado = true;
      movimientos.push([e.pageX - this.offsetLeft,
          e.pageY - this.offsetTop,
          false]);
      repinta();
    });

En una aplicación para móviles, convertimos este código en:

        $('#canvas').bind('touchstart',function(event){
          var e = event.originalEvent;
          e.preventDefault();
          pulsado = true;
          movimientos.push([e.targetTouches[0].pageX - this.offsetLeft,
              e.targetTouches[0].pageY - this.offsetTop,
              false]);
          repinta();
        });

En este nuevo código podemos ver que la primera sentencia es una llamada a método “originalEvent” del objeto “event” que recibe el manejador de eventos. Esto es necesario porque jQuery realiza una normalización de los eventos para asegurar la compatibilidad entre distintos navegadores, y en esta normalización se pierden algunos atributos del evento. Pero en el manejador de eventos vamos a necesitar acceder al array “targetTouches”, que no está incluido en el evento”normalizado” por jQuery.

En un evento táctil, el atributo “targetTouches” es un array que contiene las coordenadas de los puntos en los que el usuario ha tocado la pantalla. Normalmente, el array contendrá un único elemento (de índice cero), con el que podemos obtener los valores (pageX,pageY) de las coordenadas de pantalla en las que se ha producido el toque.

Por otra parte, también podemos ver la llamada al método “preventDefault()” para evitar la acción por defecto.

Aplicando estas modificaciones al resto de los manejadores de eventos, podemos convertir el ejemplo de nuestro anterior artículo para que funcione en dispositivos móviles, y el resultado final es el siguiente:

Prueba a dibujar con el dedo sobre este área en un dispositivo móvil.

 Publicado por en 11:12 am

 Deja un comentario

(requerido)

(requerido)