Your SlideShare is downloading. ×
Raphael.js présentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Raphael.js présentation

379

Published on

Raphael JS est une petite bibliothèque JavaScript qui permet de travailler avec des graphiques vectoriels. Elle utilise la recommandation du W3C SVG et VML.

Raphael JS est une petite bibliothèque JavaScript qui permet de travailler avec des graphiques vectoriels. Elle utilise la recommandation du W3C SVG et VML.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
379
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SVG - Javascript Rapaël-js A. DAAIF ENSET Université Hassan II Mohammedia-Casablanca aziz@daaif.net
  • 2. Les bibliothèques Javascript  Raphael.js  Bonsai.js  Snapsvg.js  D3.js  SVG.js  Fabric.js  …
  • 3. 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)
  • 4. 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>
  • 5. 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)
  • 6. Attributs SVG  Deux possibilités : // On crée notre objet var rec = paper.rect(10,10,30,10); // Un attribut à la fois rec.attr( 'fill', 'red'); // Ou Plusieurs attributs à la fois rec.attr({ fill : 'red', 'stroke-width' : 10 });  Ce sont les attributs SVG
  • 7. 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
  • 8. 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 "
  • 9. 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');
  • 10. Les transformations SVG  On agit sur l’attribut « transform » ou la méthode « transform() »  Les possibilités :  Translation (translate = t)  Exemple : t10,10  Rotation (rotate = r)  Exemple : r30  Echelle (scale = s)  Exemple : s2  Cisaillement ( utiliser la mtrice de transformation)
  • 11. 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'});
  • 12. Exemples Exemple 2 : paper.rect(20,20,60,20) .attr({'stroke-dasharray' : '-'}); // En utilisant les attributs paper.rect(20,20,60,20) .attr('fill', 'orange') .attr({'transform': 't50,50'}) .attr({'transform': '...r45'}) .attr({'transform': '...s2'}); // En utilisant les méthodes paper.rect(20,20,60,20) .attr('fill', 'orange') .transform('t50,50') .transform('...r45') .transform('...s2');
  • 13. 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');
  • 14. 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'), pa per.circle(65,45, 5).attr('fill', 'black') ); // Deuxième groupe var g2 = paper.set(); g2.push( paper.rect(80, 10, 60, 30).attr('fill', 'gray'), paper.circle(85,45, 5).attr('fill', 'black'), pa per.circle(135,45, 5).attr('fill', 'black') ); // Troisième groupe conient les 2 autres var g3 = paper.set(g1,g2) .translate(40) .rotate(15,0,0);
  • 15. 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)
  • 16. Les événements - Exemples var 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'); });
  • 17. 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!"); } ); });
  • 18. 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!"); } ); });
  • 19. 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>
  • 20. 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);

×