Librerías JavaScript –
Raphaël.js
Programación Multimedia.
G.I.M.
Francisco Grimaldo, Inmaculada Coma
1
Índice
Raphael.js
Plantilla de uso básica
Polilíneas – Paths
Atributos, animación y morphing
Interacción
Visualización de datos
2
Raphael.js (1/2)
http://raphaeljs.com
Crea gráficos vectoriales en web.
Usa SVG + VML (compatibilidad IE).
Es ligera (31 Kb) y bien documentada (API).
Soportado por: Firefox 3.0+, Chrome 5.0+,
Opera 9.5+, Safari 3.0+ e IE 6.0+.
Mantenida por Dmitry Baranovskiy,
trabajador de Adobe desde mayo de 2012.
Raphael.js (2/2)
Ventajas
Creación de imágenes escalables, dinámicas e
interactivas (estilo Flash).
Soporte para navegadores antiguos.
Objetos gráficos como objetos del DOM.
Desventajas:
Visualización en dispositivos móviles.
(+/-) Conversión imágenes SVG a Javascript:
Edición SVG: Inkscape, svg-edit, Adobe Illustrator
Paso a código Raphael.js: Ready Set Raphael
Plantilla de uso básica (1/2)
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Plantilla Raphael</title>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="plantilla.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Plantilla de uso básica (2/2)
Código JavaScript (*.js):
window.onload = function() {
var paper = new Raphael('container', 500, 500);
paper.safari();
var circle = paper.circle(100, 100, 80);
for(var i = 0; i < 5; i+=1) {
var multiplier = i*5;
paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier)
}
var rectangle = paper.rect(200, 200, 250, 100);
var ellipse = paper.ellipse(200, 400, 100, 50);
}
Polilíneas - Paths
Formato texto para definir formas complejas:
http://raphaeljs.com/reference.html#Paper.path
Comandos en mayúsculas: valores absolutos.
Comandos en minúsculas: valores relativos.
paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z")
M: Mueve sin pintar
l: Dibuja una línea recta hasta el punto indicado.
Atributos
http://raphaeljs.com/reference.html#Element.attr
window.onload = function() {
var paper = new Raphael("container", 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0
50 l -50 0 l 0 50 z");
tetronimo.attr(
{
gradient: '90-#526c7a-#64a0c1',
stroke: '#3b4449',
'stroke-width': 10,
'stroke-linejoin': 'round‘,
}
);
}
transform: ‘r-90’
Animación
http://raphaeljs.com/reference.html#Element.animate
tetronimo.animate(
transform: ‘r0’
{
'stroke-width': 1,
stroke: 'red‘,
},
2000,
'bounce',
function() { /* invocada al acabar la animación */
});
stroke: '#3b4449',
'stroke-width': 10
}, 1000);
this.animate({
Morphing
Probad el efecto del siguiente código:
obj.animate({'stroke-width': 1, stroke: 'red‘, transform: ‘r0’},
2000, 'bounce',
Cambiar path para que la pieza crezca:
{stroke: '#3b4449', 'stroke-width': 10 },
1000,
function() {
});
function() {
});
this.animate(
this.animate(
{path: "M 250 250 l 0 -100 l -150 0 l 0 100 z"},
5000);
Hacer coincidir en el número de puntos.
Interacción
Eventos de ratón:
click, dblclick, hover, mousedown, mousemove…
Ordenación: Element.toBack(), Element.toFront()
Añadid el siguiente código al ejemplo anterior:
tetronimo.dblclick(function(){
alert('Has hecho click en el objeto');
});
Eventos de teclado:
Mediante JavaScript normal.
Visualización de datos
Ejemplos:
Analizar el ejemplo “Australia” de las demos del
sitio oficial de Raphaël.js.
gRaphaël:
Facilita el dibujado de gráficos y diagramas.
Tipos en el API: barras, sectores, leyenda…
Ejercicio:
Modificar el ejemplo “piechart2” de las demos del
sitio oficial de gRaphaël para que muestre los
porcentajes de evaluación de la asignatura..
Referencias Raphaël.js
Raphael.js: Sitio oficial con el API de programación,
recursos y ejemplos descargables.
http://raphaeljs.com
Dmitry Baranovskiy: Blog del creador de Raphael.js.
http://dmitry.baranovskiy.com
Ready Set Raphael: Conversor SVG a Raphael.
http://readysetraphael.com
gRaphael: Creación de gráficos con Raphael.js.
http://g.raphaeljs.com
Tutoriales y ejemplos en Raphael:
http://cancerbero.mbarreneche.com/raphaeltut/
http://www.irunmywebsite.com/raphael/additionalhelp.php
http://return-true.com/2011/06/using-raphaeljs-to-create-a-map/
Crear cuenta
Comentarios de: Librerías JS - Raphaël.js (0)
No hay comentarios