PDF de programación - Librerías JS - Raphaël.js

Imágen de pdf Librerías JS - Raphaël.js

Librerías JS - Raphaël.jsgráfica de visualizaciones

Publicado el 28 de Octubre del 2019
257 visualizaciones desde el 28 de Octubre del 2019
221,1 KB
13 paginas
Creado hace 7a (19/06/2014)
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/
  • Links de descarga
http://lwp-l.com/pdf16792

Comentarios de: Librerías JS - Raphaël.js (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad