SVG - Javascript Rapaël-js
A. DAAIFENSET Université Hassan II
Mohammedia-Casablanca
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);