Comunidad de diseño web y desarrollo en internet online

Dibujo y animación vectorial HTML5 con Raphael.js y SVG

Este tutorial es una introducción a raphael.js, una librería de Javascript que permite usar el elemento SVG de HTML5 de forma fácil e intuitiva, por lo que podrás usar gráficos vectoriales en tus aplicaciones web.

Dificultad: Media-Baja
(Lo mejor de Raphaël es que lo hace jodidamente fácil)
Compatibilidad: Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ y Internet Explorer 6.0+
(WTF!?, compatible con IE6+?!)


Introducción a SVG


SVG significa Gráfico Vectorial Escalable (Scalable Vector Graphics) y se trata de un "formato" de imagen vectorial, como las imágenes de Illustrator (archivos .ai) o las de Autocad (.dwg).

Si abres un archivo SVG con un editor de texto plano verás un lenguaje de marcado, algo similar a HTML o XML.

Aunque la recomendación de la W3C sobre SVG es de hace 10 años a nadie le importó un carajo hasta que llegó HTML5 su logo 'cool' con sus importantes mejoras.

La diferencia con Canvas es que SVG maneja vectores y canvas mapas de bits. SVG sería Illustrator y canvas Photoshop.

Raphaël, javascript para vectores


Raphaël es una librería Javascript que permite manejar los elementos SVG 'like a boss'. Para usarla en nuestro proyecto sólo tenemos que descargarla de la página oficial (sólo 31kb con gzip) y cargarla en nuestro HTML como cualquier archivo js:

Código :

<script src='http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js'></script>


El objeto Raphael

Lo primero que tenemos que crear es el objeto Raphael. Este genera un elemento SVG donde crearemos los objetos vectoriales:

Código :

window.onload = function(){
   var mesa = new Raphael(10, 15, 300, 400);
}

Así creamos un elemento SVG que estará a 10px de la izquierda y a 15px de la parte superior de la página (en posición absoluta) y que mide 300px de ancho y 400px de alto.

Si tenemos un elemento creado donde queramos embeber nuestro SVG, el constructor también acepta esta forma:

Código :

   var contenedor = document.getElementById('contenedor');
   var mesa = new Raphael(contenedor, 200, 100);

Así introduce el elemento SVG dentro de la capa con id 'contenedor' con dimensiones 200px por 100px. El objeto Raphael tiene muchos métodos para manejar sus hijos, como .getById(), .remove(), o .getElementByPoint().


Los elementos

Gracias al objeto Raphael podemos crear elementos vectoriales dentro del SVG.
Importante Las coordenadas que utiliza Raphael para los elementos son relativas al SVG creado, y entiende como punto 0,0 la esquina superior izquierda. Cuanto mayor es x, mayor es la distancia con el extremo izquierdo, y cuanto mayor es y, mayor es la distancia con el superior.

Existen varias formas predefinidas, por ejemplo:

  • Círculo, pasándole posición "x", posición "y" y radio

    Código :

    var circulo = mesa.circle(30, 30, 10);

  • Rectángulo, pasándole las posiciones "x" e "y" de la esquina superior izquierda y de la inferior derecha

    Código :

    var rectangulo = mesa.rect(10, 20, 50, 50);

    Si le pasamos un 5º valor, indicamos el radio del borde

  • Elipse, pasándole posición "x", posición "y" y los radios horizontal y vertical

    Código :

    var elipse = mesa.ellipse(100, 100, 50, 30);

También podemos crear un elemento "path". Los paths son polilíneas de mayor complejidad que las formas básicas. Estas polilíneas se definen como Strings de la siguiente forma:

Código :

var polilinea = mesa.path('M 50 80 120 10 230 110 130 280 z');

"M" es un comando que significa "mover a" y sitúa nuestro "cursor invisible" en el punto definido por los pares de puntos que vienen a continuación. Cada par indica la posición x e y. Los pares del ejemplo serían 50 80, 120 10, 230 110 y 130 280. "z" indica que se cierra la polilínea.

Podemos utilizar todos comandos indicados en la documentación de paths SVG de la W3C.


Atributos

Los elementos que hemos creando son elementos del DOM y podemos acceder a ellos por Javascript. Raphael nos permite cambiar los atributos de estos elementos muy fácil:

Código :

var cir = mesa.circle(200, 200, 30);
cir.attr('fill', 'red');

Este código hará que nuestro círculo tenga relleno rojo. Si queremos cambiar varios atributos a la vez lo haremos así:

Código :

cir.attr({'stroke-width': 10,'stroke': 'red'});

Tienes una lista de atributos en la documentación de Raphael.


Eventos y animaciones

Con Raphael.js tenemos podemos aplicar eventos a los elementos, como .click(), .dblclick(), .hover(), etc. que funcionan parecidos a los eventos de jQuery. Por ejemplo:

Código :

cir.click(function(){
   alert('Has hecho click en el círculo');
});

Además de los eventos, con Raphael tenemos un control sencillo y potente de las animaciones. Primero declaramos la animación en sí:

Código :

var anim = new Raphael.animation({cx: 10, cy: 20}, 400, "bounce");

El primer parámetro que le pasamos son los atributos a los que queremos aplicar la animación. En este caso hemos usado cx y cy que son las variables de posición. Podríamos haber utilizado atributos como los que habíamos visto antes, por ejemplo:

Código :

var anim = new Raphael.animation({"stroke-width":12, cx: 10, cy: 20}, 400, "bounce");

El segundo parámetro es la duración en milisegundos. El tercero la función de easing que quieras usar. Por último podemos, opcionalmente, añadir un callback.

En la web del autor hay gran cantidad de ejemplos increibles

Una vez tengamos nuestra animación, la podemos aplicar usando el método .animate() del elemento.

Código :

cir.animate(anim);


Este es un ejemplo sencillo de todo lo que hemos visto.

En resumen


Tardé 1 hora en escribir este tutorial y 3 en reducirlo a un tamaño "normal" para un blog. Son tantas las opciones que permite Raphael y en general el SVG que podrían llenar varios capítulos de un libro. Pretendo que te sirva de introducción y que descubras con la práctica, los ejemplos y la genial documentación de la librería todo su potencial.


Bonus

En http://readysetraphael.com/ puedes convertir archivos vectoriales .SVG en Raphael.


Bonus 2

En http://g.raphaeljs.com/ encontrarás también las librerías gRaphael para la creación de gráficas a partir de raphael.js.

Si tenéis alguna duda o queréis saber más acerca de SVG y Raphaël, no dudéis en preguntarme aquí o en twitter: @ajnavajas

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate