Voici une présentation rapide de RaphaelJs, une librairie Javascript permettant d'effectuer des dessins vectoriels dans une page web et de l'afficher dans les principaux navigateurs web ... même Internet Explorer 6 !!! Pour cela, RaphaelJs sait gérer les 2 principaux formats de dessin vectoriel: SVG, standard et adopté par la plupart des navigateurs et VML le format de Microsoft. Cette lib est assez facile d'utilisation et permet de réaliser des dessins et des animations sympas.
Un 1er exemple
Pour créer un dessin, il faut tout d'abord créer un canvas que l'on attache ici à un noeud du DOM et auquel on donne une largeur et une hauteur. On dispose ensuite de méthodes pour créer des éléments cercles, rectangles, chemins... dont on peut changer des attributs.
Dans ce 1er exemple, on crée un rectangle arrondi en lui donnant ses coordonnées et sa taille. On définit des attributs pour changer la couleur de fond que l'épaisseur et la couleur du trait.
ex1 = Raphael("exemple1", 400, 100);
ex1.rect(1, 1, 80, 80 , 10).attr({fill: "yellow", stroke: "red", "stroke-width": 2});
Des attributs pour changer l'affichage
On peut aussi à l'aide des attributs donner des effets comme ici un gradient ou une transparence
ex2 = Raphael("exemple2", 400, 100);
ex2.rect(1, 1, 80, 80 , 10).attr({fill: "90-yellow-red", stroke: "red", "stroke-width": 2});
ex2.rect(160, 1, 80, 80 , 10).attr({fill: "yellow", opacity: 0.5, stroke: "red", "stroke-width": 2});
Un set permet de grouper des éléments pour par exemple changer leurs attributs en un seul appel. Un set est juste un objet Javascript et ne crée pas d'élément dans le document SVG.
On peut comme dans l'exemple ci-dessous, créer un bonhomme en rajoutant 2 cercles pour les yeux et une ligne (path) pour la bouche et définir pour le tout une couleur et une épaisseur de trait. Notez au passage la syntaxe pour définir les coordonées des points formant le chemin et qui suit le format SVG.
ex3 = Raphael("exemple3", 400, 100);
ex3.set().push(
ex3.rect(1, 1, 80, 80 , 10).attr({fill: "yellow"}),
ex3.path("M10 60l10 10l40 0l10 -10z"),
ex3.circle(20, 20, 8),
ex3.circle(60, 20, 8)
).attr({stroke: "red", "stroke-width": 2});
Gestion d'évènements et animations
Il est possible de réagir à des évènements comme par exemple un click sur un élément.
Dans l'exemple suivant, on change la couleur du bonhomme à chaque clic. Les transitions se font grâce à un dictionnaire d'états. L'état (ici la couleur du visage) est récupéré avec la méthode attr qui retourne la valeur d'un attribut.
ex4 = Raphael("exemple4", 400, 100);
ex4.set().push(
ex4.rect(1, 1, 80, 80 , 10).attr({fill: "yellow"}),
ex4.path("M10 60l10 10l40 0l10 -10z"),
ex4.circle(20, 20, 8),
ex4.circle(60, 20, 8)
).attr({stroke: "red", "stroke-width": 2}
).click(function (event) {
var trans = {'yellow': 'lightgreen', 'lightgreen': 'orange', 'orange': 'yellow'};
var current = this.attr('fill');
this.attr({fill: trans[current]});
});
RaphaelJs propose des méthodes de transformation: translate, rotate et scale. Dans l'exemple suivant on va changer la position et faire tourner le bonhomme à chaque clic.
Attention, comme le set n'est pas un élément SVG, il n'est pas possible de réagir à un click sur un groupe d'éléments. La gestion d'évènement se fera toujours sur les éléments graphiques qui composent le set.
En d'autres mots, le this de la fonction est forcément un objet graphique et ne peut être le conteneur. Cela nous oblige donc à utiliser une variable pour forcer l'action sur le groupe des éléments.
ex5 = Raphael("exemple5", 400, 120);
var ex5_set = ex5.set().push(
ex5.rect(1, 20, 80, 80 , 10).attr({fill: "yellow"}),
ex5.path("M10 80l10 10l40 0l10 -10z"),
ex5.circle(20, 40, 8),
ex5.circle(60, 40, 8)
).attr({stroke: "red", "stroke-width": 2}
).click(function (event) {
ex5_set.translate(10, 0);
ex5_set.rotate(45);
});
RaphaelJs permet aussi d'effectuer des animations. Dans l'exemple ci-dessous, on lance une petite animation qui fait changer la couleur du bonhomme et la taille des yeux puis retourne à l'etat initial.
ex6 = Raphael("exemple6", 400, 100);
var ex6_set = ex6.set().push(
ex6.rect(1, 1, 80, 80 , 10).attr({fill: "yellow"}),
ex6.path("M10 60l10 10l40 0l10 -10z"),
ex6.circle(20, 20, 8),
ex6.circle(60, 20, 8)
).attr({stroke: "red", "stroke-width": 2}
).click(function (event) {
ex6_set.animate({r: 15, fill: "orange"}, 5000, "bounce", function() {
ex6_set.animate({r: 8, fill: "yellow"}, 1000);
})
});
Aller plus loin
RaphaelJs est une librairie que j'apprécie tout particulièrement. Je l'ai utilisé pour tortue-logo, un site Internet qui permet de s'initier à la programmation avec la tortue graphique du langage LOGO mais aussi pour de simples petites effets graphiques parfois difficile à faire avec des CSS.
Je vous recommande de jeter un oeil aux démos (j'aime bien celle-ci par exemple) un peu moins simplistes que les exemples de cet article. Vous serez aussi peut-être intéressé par ce jeu d'icones réalisé avec RaphaelJs.
Développement web Javascript Posté le 12 mai 2011 par Luc - Commentez cet article - Partagez
Jeu de briques
Snake
Pacman
Bubble