Raphael JS

Intégration dans une page Web

Les primitives SVG

• paper.rect(x, y, w, h, r)
• paper.circle(cx, cy, r)
• paper.ellipse(cx, cy, rx, ry)
• paper.text(x, y, text )
• paper.image(src, x, y, w, h)
• paper.path('M10,10 c18....z')

Exemple 1

Exemple 2

Exemple 3

Attributs SVG

La méthode attr()

• Elle est appelée pour lire ou modifier un attribut.
• En fonction du type de primitive, chaque objet va avoir ses propres attributs
• Tout les attributs correspondent à ceux de SVG

                            rect1.attr('stroke-width', 12); // Ecriture d'un attribut
var couleur = rect2.attr('fill'); // Lecture d'un attribut
// Ecriture de plusieurs attributs à la fois
rect3.attr({
            stroke : '#bada07',
            'stroke-width' : 20
          });
                        

Représentation de la couleur

Pulsieurs possiblités

                            var couleur = 'red';
couleur = 'rgb(255,0,0)';
couleur = 'rgb(100%,0%,0%)';
couleur = 'rgba(255,0,0,0.7)'; // a = canal alpha 0 -> 1
couleur = 'hsb(0,1,0.5)'; // hue, saturation et brightness
couleur = 'hsba(0,1,0.5,0.8)'; // canal alpha
couleur = 'hsl(0,1,0.5)'; // hue, saturation et lightness
couleur = 'hsla(0,1,0.5,0.8)'; // canal alpha
                            
                        

Exemple 1

Les dégradés

La création des dégradés est simplifiée :

    // Syntaxe des dégradés linéaires
//  "‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›"
// Exemples :
var deg1 = '90-#fff-#000';
var deg2 = '45-red-orange-yellow-green-blue-violet';

// Syntaxe des dégradés radiaux
// "r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›"
// Exemples :
var deg3 = 'r#fff-#000';
var deg4 = 'r(0.25, 0.75)#fff-#000';

Exemple 2

Exemple 3

Styles des lignes

Les transformations SVG

• Raphael JS expose la méthode transform() pour les transformations suivantes :
  
  • Translation
  • Rotation
  • Mise à l'échelle
• L'objet Matrix permet toutes les transformations SVG

Particularités Raphael JS

Toutes les transformations s'effectuent par rapport au centre de l'objet

Raphael JS utilise une notation particulière

• (T) ou (t) pour translate
• (R) ou (r) pour rotate
• (S) ou (s) pour scale

Transformations absolues

Transformations absolues

Transformations relatives

Transformations relatives

Cumuler les transformations

Groupement d'éléments

• L'équivalent de l'élément <g> de SVG

• var group = paper.set();
  group.push(paper.rect(10,10,10,10), paper.circle(50,50,10));
  // On peut biensur imbriquer les groupes
                          

• Ici, on ajoute deux éléments dans le groupe
• On peut alors transformer ou animer le groupe

Exemple

Profondeur

• Quand les élements se chevauchent, les derniers apparaissent au premier plan
• Deux méthodes pour mettre au premier ou en arrière plan :
  • toBack()
  • toFront()

Exemple

Les événements

Prend en charge :

tout les évenements de la sourie :

• click()
• mousemove()
• mousedown()
• ...

le drag and drop :

• drag()
• onDragOver()

Les événements du clavier peuvent être ajoutés à l'aide JS

Exemple

Les animations

Les animations sont réalisées en altérant un ou pluiseurs attributs des élément au cours du temps.

On peut animer un élément ou un groupe d'éléments en utilisant la méthode animate(). Cette méthode peut être appelée de plusieurs façons :

• En lui passant les paramètres de l'animation
• En lui passant un objet de type Raphael.animation.

Exemple

Controller le début de l'animation

Passage d'un objet animation

L'avantage ici, est que l'animation peut être appliquée à n'importe quel objet.

Synchronisation des animations

Aller plus loin

• Retrouver le rectangle circonscrit d'un élément ou d'un groupe d'éléments
• Quelle est la longueur d'un chemin path
• Obtenir les coordonnées d'un point sur un chemin à une distance donnée.
• Zoomer et/ou défiler un graphique

Rectangle circonscrit

Position dans un chemin

Zoomer

Apprendre en s'amusant

• Un monde en bulles
• Bombardier