Raphael.js Tutorial: Circulos, Cuadros y Textos
Raphael.js es una libreria Javascript para crear Graficos en Aplicaciones Web usando HTML5, en este tutorial les mostrare como hacer circulos, cuadros, textos y animaciones facilmente usando esta libreria.
Introduccion
Lo primero que vamos a hacer es descargar la libreria Raphael.js desde su pagina web: http://raphaeljs.com/
El archivo que se descargara sera un archivo javascript llamado raphael-min.js.
Y la vamos a incluir en nuestro documento html, y quedara de la siguiente manera:
[code language=”html”]<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="raphael-min.js"></script>
</head>
<body>
<script>
</script>
</body>
</html>
Ahora todo el codigo que sigue lo vamos a escribir dentro de la etiqueta script que esta en body.
Inicializacion
Debemos crear un objeto Raphael y lo guardaremos en una variable normalmente llamada paper, pero ustedes pueden poner la que quieran.
[code language=”javascript”]
var paper = Raphael(0,0,320,200);
[/code]Son 4 parametros, los primeros 2 son las posicion x,y en la que se colocara el cuadro de dibujo y los otros 2 son las medidas x,y del lienzo de dibujo.
En este caso utilizaremos un lienzo de dibujo de 320×200 empezando en las coordenadas 0,0 del documento.
Cuadros
Hablar de cuadros no solo es hablar de cuadrados, sino de figuras con 4 lados, esto cubre cuadrados y rectangulos.
Para construir un cuadro o rect necesitamos cuatro parametros, la sintaxis rect(x,y,w,h), es decir, posicion x,y y medidas width y height.
Una vez creado cuadro guardamos el objeto para despues cambiar el color de relleno y de borde (fill y stroke respectivamente).
[code language=”javascript”]var paper = Raphael(0,0,320,200);
var cuadro1 = paper.rect(10,10,40,60);
cuadro1.attr("fill","yellow");
cuadro1.attr("stroke","red");
En el ejemplo podemos ver como guardamos el objeto del cuadro en la variable cuadro1, despues usamos cuadro1 para modificar el atributo fill y stroke.
Circulos
Para crear circulos con Raphael.js haremos uso dela funcion Raphael.circle(x,y,r), es decir, la posicion x ,la posicion y y el radio del circulo.
Una vez creado circulo guardamos el objeto para despues cambiar el color de relleno y de borde (fill y stroke respectivamente).
[code language=”javascript”]var paper = Raphael(0,0,320,200);
var circle = paper.circle(40,40,20);
circle.attr("fill","blue");
circle.attr("stroke","red");
[/code]
Textos
Para los textos usaremos la funcion Raphael.text(x,y,t), que toma como parametros la posicion x,y y el texto a mostrar.
Una vez creado un objeto text lo podemos guardar en una variable para poder interactuar con el y asi cambiarle el tama~o del texto, el color de relleno o el color de borde.
[code language=”javascript”]var paper = Raphael(0,0,320,200);
var txt1 = paper.text(50,50,"Hola, Mundo!!");
txt1.attr({"font-size": 20});
txt1.attr("fill","yellow");
txt1.attr("stroke","black");
[/code]
Con este ejemplo podemos ver un texto de 20px(font-size) con color de relleno(fill) amarillo y color de borde(stroke) amarillo.
Colores
Para el uso de colores podemos usar :
- Valores en ingles: red, blue, yellow, lime, green, pink, black, white, gray, …
- Valores en hexhadecimal: #ff0000, #ffff00, #3498db, …
- Valores con la funcion rgb(r,g,b): rgb(255,0,0), rgb(255,255,0), …
Conclusion
Espero que con esta pincelada basica ya puedan empezar, aunque sea con lo basico, a desarrollar cosas usando Raphael.js.