Raphael.js présentation

SVG - Javascript Rapaël-js

A. DAAIFENSET Université Hassan II

Mohammedia-Casablanca

[email protected]

Les bibliothèques Javascript

Raphael.js Bonsai.js Snapsvg.js D3.js SVG.js Fabric.js …

Pourquoi Raphael ?

Respect des spécifications SVG du W3C

Respect des spécifications VML Supporté par tous les navigateurs :

Firefox 3.0+, (svg) Safari 3.0+, (svg) Chrome 5.0+, (svg) Opera 9.5+, (svg) Internet Explorer 6.0+. (vml puis svg

dans les dernières versions)

Utilisation de base<!DOCTYPE html> <html> <head>

<script src="js/raphael-min.js"></script> <script>

// S'assurer que les éléments DOM sont chargés window.onload = function(){ // Créer un canvas 320 × 200 à l'intérieur de la div var paper = Raphael('draw', 320, 200); // Créer un cercle x = 20, y = 20, rayon de 10 var circle = paper.circle(20, 20, 10); // Régler le remplissage à (#f00) circle.attr("fill", "#f00"); }

</script> </head> <body>

<div id="draw"></div> </body> </html>

Eléments graphiques SVG

Utilisation des noms des éléments SVG.

Primitives graphiques :paper.rect(x, y, w, h, [r])paper.ellipse(cx, cy, rx, ry)paper.circle(cx, cy, r)paper.path("M10,10 …")paper.text("lorem ipsum")paper.image(src, x, y, w, h)

Attributs SVG

Deux possibilités :// On crée notre objetvar rec = paper.rect(10,10,30,10);// Un attribut à la foisrec.attr( 'fill', 'red');// Ou Plusieurs attributs à la foisrec.attr({fill : 'red','stroke-width' : 10

});

Ce sont les attributs SVG

Les couleurs unies

rec.attr('fill', couleur); « couleur » peut avoir l’une des

représentations suivantes : 'green' '#0F0' ou '#00FF00' 'rgb(0,255,0)‘ 'rgba(0,255,0, 1)‘Voir aussi : hsb, hsba, hsl, hsla

Les dégradés

rec.attr('fill', degrade);

Dégradé linéaire :"‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›"

Exemple : "90-#fff-#000"

Dégradé radial :"r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›"

Exemple : "r#fff-#000 "

Exemples

paper.rect(20,20,60,20)

.attr('fill', 'gray');

paper.rect(20,50,60,20)

.attr('fill', 'rgb(250,200,100)');

paper.rect(20,80,60,20)

.attr('fill', 'hsba(0.4,0.9,0.9,1)');

paper.rect(20,110,60,20)

.attr('fill', '0-red-yellow-green-blue-violet');

paper.rect(20,140,60,20)

.attr('fill', '0-#F00-#FF0-#0F0-#0FF-#00F');

paper.rect(20,170,60,20)

.attr('fill', '0-white-black');

paper.ellipse(50,210,30,10)

.attr('fill', 'rred-yellow');

Les transformations SVG

On agit sur l’attribut « transform » ou la méthode « transform() »

Les possibilités :Translation (translate = t)

Exemple : t10,10Rotation (rotate = r)

Exemple : r30Echelle (scale = s)

Exemple : s2Cisaillement ( utiliser la mtrice de

transformation)

Exemples

Exemple 1 :

paper.rect(20,20,60,20) .attr({'stroke': 'gray'});

paper.rect(20,20,60,20) .attr({ 'stroke': 'green',

'transform': 't50,50'});

paper.rect(20,20,60,20) .attr({ 'stroke': 'maroon',

'transform': 't50,50r45'});

paper.rect(20,20,60,20) .attr({ 'stroke': 'orange',

'transform': 't50,50r45s2'});

Exemples

Exemple 2 :paper.rect(20,20,60,20)

.attr({'stroke-dasharray' : '-'});// En utilisant les attributspaper.rect(20,20,60,20)

.attr('fill', 'orange')

.attr({'transform': 't50,50'}) .attr({'transform': '...r45'}) .attr({'transform': '...s2'});

// En utilisant les méthodespaper.rect(20,20,60,20)

.attr('fill', 'orange') .transform('t50,50') .transform('...r45') .transform('...s2');

Exemples

Exemple 3 :paper.rect(20,20,60,20)

.attr({'stroke-dasharray' : '-'});// Attention à l’ordre d’exéction

paper.rect(20,20,60,20) .attr('fill', 'orange') .transform('t50,50r45');

paper.rect(20,20,60,20) .attr('fill', 'green') .transform('r45t50,50');

Les groupements (<g>)

// On utilise l’objet Set// Premier groupe var g1 = paper.set(); g1.push(

paper.rect(10, 10, 60, 30).attr('fill', 'gray'), paper.circle(15,45, 5).attr('fill', 'black'), paper.circle(65,45, 5).attr('fill', 'black') );

// Deuxième groupevar g2 = paper.set(); g2.push(

paper.rect(80, 10, 60, 30).attr('fill', 'gray'), paper.circle(85,45, 5).attr('fill', 'black'), paper.circle(135,45, 5).attr('fill', 'black') );

// Troisième groupe conient les 2 autresvar g3 = paper.set(g1,g2)

.translate(40)

.rotate(15,0,0);

Les événements

Une multitude d’événements sont gérés par Raphael.js

Voici quelques uns : Element.click() Element.drag() Element.mousedown() Element.mouseover() Element.mouseout() Element.hover() …

Il s’attendent tous à une (ou +) callback comme paramètre (s)

Les événements - Exemplesvar c = paper.circle(50,50,20)

.attr('fill', "#F77")

.hover(function(){ this.attr({ fill: '#FF7', cursor : 'pointer' }); }, function(){ this.attr({ fill: '#F77', cursor : '' }); })

.click(function(){ alert('c\'est bien vu');

});

Les animations - Exemple 1

var c = paper.circle(50,50,20) .attr('fill', "#F77") .click(function(){

this.animate({ // ici les valeurs finales des // paramètres animés cx : 300, fill : '#77F' }, 3000, // 3000 millisecondes 'bounce', // rebondir function(){

// Qu'est-ce qu'on fait à la fin ? console.log("C’est

terminée!"); } );

});

Les animations - Exemple 2

var c = paper.circle(50,50,20) .attr('fill', "#F77") .click(function(){

this.animate({ // Animation de cx cx : 300, // Animation d’une transformation transform: ‘r45,100,100' }, 3000, // 3000 millisecondes 'bounce', // rebondir function(){

// Qu'est-ce qu'on fait à la fin ? console.log("C’est

terminée!"); } );

});

Les images – Exemple 1

<html> <head> <script src="js/raphael-min.js"></script> <script>

window.onload = function(){ var paper = Raphael('draw', 600, 400); var f1 = document.getElementById('f1'); var f2 = document.getElementById('f2'); var im1 = paper.image(f1.src, 20,20, 200,

125); var im2 = paper.image(f2.src, 120,75, 200,

125); }

</script> </head> <body> <img id="f1" src="flower_1.jpg" style="display: none" /> <img id="f2" src="flower_2.jpg" style="display: none" />

<div id="draw"></div> </body>

</html>

var f1 = document.getElementById('f1');

var f2 = document.getElementById('f2');

paper.image(f2.src, 20, 20, 200,

125) .rotate(5);

paper.image(f1.src, 20, 20, 200,

125) .attr('opacity', 0.7)

.rotate(-5);

Technology

Raphael.js présentation