Capítulo 9 Dibujo en el canvas

Dibujo en el canvas Dicha aplicación se puede hacer muy compleja. Aquí veremos la forma de cambiar colores, anchos de línea y grabar la imagen utilizando AJAX y PHP. Tomando como partida los conocimientos que revisamos en el capítulo básico de canvas, iniciemos a desarrollar nuestra aplicación.

9.1 Dibujar una línea en el canvas con el ratón sostenido Una de las ventajas en esta aplicación es que el algoritmo en sí mismo es muy parecido al que utilizamos con otras herramientas, por ejemplo Flash. En esta sección mostraremos todo el listado, y en las siguientes sólo el código dentro del contexto. Abra el archivo canvasBase.html y guárdelo como canvasDibujo.html

Dibujar una línea con botón sostenido, archivo canvasDibujo.html

Dibujar una línea con botón sostenido, archivo canvasDibujo.html

Método getBoundingClientRect Cuando JavaScript detecta las coordenadas del movimiento del ratón, o de la zona en que es pulsado o levantado el botón, nos da las coordenas dentro del navegador, no dentro del canvas, lo cual complica los cálculos. La mejor manera de resolverlo es por medio del método getBoundingClientRect, que nos regresa a la posición relativa del objeto solicitado dentro de la página en un objeto. Este método tiene la desventaja de que funciona sólo en Safari 4, Firefox 3, Opera 9.5, e Internet Explorer 8 y versiones inferiores lo tienen mal implementado (o digamos, diferente). La buena noticia es que se ejecuta correctamente el canvas de HTML5 y no tenemos problema con el método.

Método getBoundingClientRect Una vez que detectamos las coordenadas, lo que resta es simplemente guardar el punto inicial en variables y cuando detectemos que se suelta el botón del ratón, procedemos a dibujar la línea. Tenemos comentado el detector de eventos para el movimiento del ratón, verá que se generan múltiples líneas a partir del origen, es decir, del punto donde pulsamos el ratón. Guarde su archivo.

9.2 Dibujar una línea continua con el ratón en el canvas En esta sección dibujaremos una línea continua cada vez que movamos el ratón sobre el canvas con el botón sostenido. Funcionará como un lápiz sobre nuestro lienzo. En esta parte de la aplicación, tendremos sólo un color (amarillo) y sólo un ancho. En las siguientes secciones usaremos diferentes colores. Abra el archivo de la sección anterior, canvasDibujo.html y guárdelo como ncanvasDibujoLineaContinua.html. Estamos utilizando una variable boleana llamada bandera, la cual nos indica si estamos dibujando o no. En realidad lo que estamos haciendo es dibujar pequeñas líneas rectas que lucen como una línea continua, y cuando lo realizamos, el punto final de la primera línea forma parte del punto inicial de la siguiente,

9.3 Cambiar los colores y el ancho de la línea Utilizaremos elementos HTML que se encuentran fuera del canvas para poder modificar el color de la línea su ancho, así como crear un botón para limpiar el lienzo. En el caso del siguiente listado, mostraremos (casi) todo el código, ya que existen varios cambios y añadimos algunos elementos HTML. Añadimos dos selectores: uno para el color, que regresa la cadena bcorrespondiente al mismo, y otro para el ancho de la línea, que simplemente regresa un número entre 1 y 5. Cada vez que el usuario selecciona una opción la modificamos en el canvas detectándola con el evento onchange y modificamos el valor en el script. Por medio del botón Borra todo ejecutamos el método clearRect() de toda el área.

9.4 Guardar la imagen del canvas Al tener nuestra herramienta básica de dibujo siempre existirá la inquietud de grabar nuestras obras de arte. Para ello necesitamos algunas herramientas que no son propiamente HTML5, como son AJAX y un poco de PHP. Es importante remarcar que esta funcionalidad sólo opera correctamente en un servidor Web, es decir, necesita instalar en su computadora local una herramienta tipo XAMPP, WAMP o MAMP, o subir este ejercicio a un servidor, ya que PHP sólo funciona en estos ambientes.

Métodos En la primera línea de la función recuperamos la información del canvas y la almacenamos en el objeto data. Creamos luego el objeto XMLHttpRequest y luego el detector de eventos cuando la carga se ha finalizado. Por medio del método open enviamos la información al archivo snapshot.php, que también se debe subir al servidor en la misma carpeta. Si usted cambia su ubicación debe de agregar la ruta.

Métodos Con el método setRequestHeader, le indicamos que vamos a enviar datos binarios y con el método send() le decimos que inicie la carga, enviando los datos del canvas. En la función de callback recibimos el nombre del archivo generado desde PHP. A continuación enlistamos el archivo PHP que recibe la información del canvas y la almacena en un archivo. Si usted cuenta con otro lenguaje de servidor, como ASP o similar, deberá sustituir al script y su llamado en la línea 10 del listado anterior.

Archivo para subir la imagen con PHP, archivo snapshot.php

Procedimiento En este script recibimos la información del canvas por medio de la función file_get_contents(), que es similar a la función file(), pero podemos indicarle un inicio y una longitud de los datos leídos. Si la lectura del archivo falla, regresará un valor booleano falso. Quitamos el encabezado de la información, que no es parte de la imagen, y lo convertimos al formato base64, que es como se manejan las imágenes. Generamos un nombre de archivo por medio de un número aleatorio grande y grabamos el archivo por medio del modo “wb” o escribir datos de tipo binario. Cerramos el archivo y regresamos el nombre del mismo a la página HTML. Si existió algún error en el proceso, regresamos a la cadena ERROR.

Ejecución en servidor web Como habíamos comentado, este ejercicio hay que ejecutarlo en algún servidor Web, ya sea remoto o local, para que PHP se pueda ejecutar. Al terminar, usted deberá tener su archivo PNG en la carpeta de imágenes, el cual también tendrá que crear en el servidor. http://javascript.info/tutorial/coordinates http://help.dottoro.com/ljvmcrrn.php https://developer.mozilla.org/es/docs/Web/API/Element/getBoundingClientRect http://php.net/manual/es/function.file-get-contents.php