Usando Raphaël para dibujar algunas formas en multiples navegadores

08/Feb/2013 JavaScript , , , , Deja un comentario

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:

  1.  
  2. <script src="raphael-min.js"></script>
  3. <script src="jquery-1.8.3.js"></script>
  4.  

Luego debemos poner una funcion inicializadora en este caso hare uso de el inicializador de jQuery:

  1.  
  2. $(
  3. function(){
  4. ...
  5. }
  6. );

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:

  1. $(
  2. function(){
  3. var paper = Raphael(10, 50, 700, 700);
  4. }
  5. );

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:

  1. //crear un circulo
  2. var circle = paper.circle(200, 200, 100);
  3. //dibujar un cuadrado
  4. var square = paper.rect(200, 200, 100,100);
  5. //crear un cuadrado
  6. var squaretwo = paper.rect(100, 100, 100,100);
  7. //poner un texto de hola mundo
  8. 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:

  1. // poner un atributo de llenado de color del circulo
  2. circle.attr("fill", "#f00");
  3. // poner un atributo de linea de color #f77
  4. circle.attr("stroke", "#f77");
  5. // poner un atributo de llenado de color del cuadrado
  6. square.attr("fill", "#ccc");
  7. // poner un atributo de linea de color #f77
  8. square.attr("stroke", "#f77");
  9. // poner un atributo de llenado de color del cuadrado
  10. squaretwo.attr("fill", "#ccc");

Y obtenemos un interesante resultado que podemos probar en algún navegador de internet.

Vídeos sobre Javascript


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*