Como hacer gráficos vectoriales con javascript con Raphael

Actualmente trabajo mucho con librerías javascript y hace poco me vi en la necesidad de crear un pequeño editor de gráficos web para un proyecto de un cliente.

Me decidí a trabajar con gráficos vectoriales por la facilidad de almacenarlos en base de datos y por las posibilidades que me ofrecía el formato svg.

Después de ver algunas herramientas web para generar gráficos creadas con javascript (como por ejemplo svg-edit), llegue a la que creo que es una muy buena librería javascript para trabajar con gráficos vectoriales. Os hablo de Raphael.

Combinándolo con Jquery he obtenido muy buenos resultados. Veamos un poco como empezar a usar Raphael y algunos ejemplos de lo que se puede llegar a hacer con esta librería javascript para gráficos vectoriales.

Añadiendo este js a nuestro sitio web ya podemos empezar a trabajar con Raphael.

Una vez añadida la librería Raphael podemos empezar a dibujar. Por ejemplo:

// Creamos un canvas de 320 × 200 en las coordenadas 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creamos un circulo en x = 50, y = 40, con radio 10
var circle = paper.circle(50, 40, 10);

// Coloreamos el contenido del circulo en rojo (#f00)
circle.attr("fill", "#f00");

// Establecemos el color del trazo en blanco
circle.attr("stroke", "#fff");

Os dejo algunos ejemplos de gráficos vectoriales diseñados con Raphael

Example Raphael 1

Raphael ejemplo 2

 

Ejemplo 3 Raphael

0 comentarios para Como hacer gráficos vectoriales con javascript con Raphael

Deja un comentario




Si le ha parecido interesante nuestro artículo Como hacer gráficos vectoriales con javascript con Raphael dentro de la categoría Plugins y Utilidades Webs recuerde que puede suscribirse a nuestra dirección RSS,a nuestro newsletter o seguirnos en las redes sociales