Primeramente enfoquemonos en que es Raphaël. Raphaël es una libreria Javascript para gráficos SVG destinados a todos los navegadores actuales incluyendo a Internet Explorer que como todos sabemos es el que mas problemas da a la hora de programar puesto que no es sencillo encontrar librerias que sean compatibles con este navegador.
Su modo de uso es sencillo primero debemos obtener la libreria que la descargamos de la pagina:
http://raphaeljs.com/ y ademas de esto necesitaremos jQuery (no imprescindible)
Para comenzar debemos colocar en nuestro código HTML las librerias a usarse para esto incluimos el siguiente codigo:
Luego debemos poner una funcion inicializadora en este caso hare uso de el inicializador de jQuery:
$(
function(){
...
}
);
Dentro del mismo podremos hacer uso de la libreria Raphaël y el conjunto de funciones de dibujo que deseemos.
Y para esto necesitamos primero crear el canvas de dibujo de Raphaël, procedemos a hacerlo con el siguiente codigo:
$(
function(){
var paper = Raphael(10, 50, 700, 700);
}
);
Donde paper es el objeto que contiene el canvas de dibujo para Raphaël, el cual esta posicionado en la posición 10,50 y tiene un tamaño tanto en alto como en ancho de 700px.
Para lograr dibujar cualquier objeto o interactuar con objetos de ahora en adelante usaremos el objeto paper.
Nuestro objetivo es dibujar solo cuatro objetos que nos den alguna forma mas o menos simétrica de un objeto, esto lo conseguimos asi:
//crear un circulo
var circle = paper.circle(200, 200, 100);
//dibujar un cuadrado
var square = paper.rect(200, 200, 100,100);
//crear un cuadrado
var squaretwo = paper.rect(100, 100, 100,100);
//poner un texto de hola mundo
var t = paper.text(150,150, "Hola Mundo con Raphaël...");
Y por ultimo procedemos a darle color para decorarlos con el siguiente código:
// poner un atributo de llenado de color del circulo
circle.attr("fill", "#f00");
// poner un atributo de linea de color #f77
circle.attr("stroke", "#f77");
// poner un atributo de llenado de color del cuadrado
square.attr("fill", "#ccc");
// poner un atributo de linea de color #f77
square.attr("stroke", "#f77");
// poner un atributo de llenado de color del cuadrado
squaretwo.attr("fill", "#ccc");
Y obtenemos un interesante resultado que podemos probar en algún navegador de internet.
