Raphael.js Tutorial: Circulos, Cuadros y Textos

0

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:


<!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.

 


var paper = Raphael(0,0,320,200);

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).


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).


var paper = Raphael(0,0,320,200);
var circle = paper.circle(40,40,20);
circle.attr("fill","blue");
circle.attr("stroke","red");

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.


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");

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.

SHARE

LEAVE A REPLY

Time limit is exhausted. Please reload CAPTCHA.