Introduction à RaphaëlJS

Qu’est ce que RaphaëlJS?

RaphaëlJS est une librairie JavaScript permettant de faire du dessin vectoriel sur le web en utilisant pour cela SVG et VML.

Par ailleurs, sachez que RaphaëlJS est supportée par la quasi intégralité des navigateurs (Safari 3.0+, Opera 9.5+, Firefox 3.0+, Chrome 5.0+ et même Internet Explorer 6.0+).

Afin d’utiliser RaphaëlJS, l’unique pré-requis est l’intégration de cette librairie dans votre page HTML (vous pouvez la télécharger ici).

Quels sont les avantages ?

Avec cette librairie javascript, tous les éléments graphiques que vous allez créer seront des éléments du DOM, vous allez donc pouvoir les manipuler comme vous le souhaitez et y ajouter des handlers javascript.

De plus, RaphaëlJS vous apporte simplicité et facilité dans vos dessins. De nombreuses fonctions existent afin de vous aider.

Enfin, l’usage d’un bibliothèque javascript permet de garder la portabilité de votre code.

Les fonctions de base

Il existe des fonctions afin de créer des rectangles ou encore des cercles, d’importer une image ou bien d’insérer du texte…

Raphael

Cette fonction nous permet d’obtenir la zone de dessin et retourne le “svg”. Il existe deux façons principales de faire :

• soit en créant un support de dessin placé en absolu dans la page

var paper = Raphael(10, 20, 400, 500);
// on crée un support de dessin qui aura comme position left: 10px et top: 20px, et comme dimensions, width: 400px et heigth: 500px

• soit en le créant dans un élément du DOM en lui indiquant son id

var paper = Raphael("mypaper",400, 500);
// on crée un support de dessin dans l'élément ayant l'id "mypaper" et avec les dimensions suivantes : width: 400px et height: 500px

Plutôt qu’un id, on peut également passer en paramètre un élément du DOM comme cela :

var paper = Raphael(document.getElementById("mypaper"), 320, 200);
// il est possible d'utiliser une autre méthode que "getElementById"

path

La fonction path() permet de tracer des lignes ou des courbes entre différents points donnés ou en suivant des déplacements. En effet, il existe deux façons de procéder :

• soit en indiquant les coordonnées des différents points à relier

var path = paper.path("M50 20L300 200");
// on trace un trait entre le premier point de coordonnées x = 50 et y = 20 et un second point de coordonnées x = 300 et y = 200

• soit en indiquant un déplacement à partir du point de départ

var path = paper.path("M50 20l300 200");
// dans ce cas on trace un trait entre un point de coordonnées x = 50 et y = 20 et un deuxième point se situant aux coordonnées x + 300 et y + 200

Le paramètre indiqué pour la fonction path contient donc les coordonnées des différents points à relier. Dans le premier exemple on indique la lettre “M” qui signifie “move to” pour donner le point de départ par rapport au coin en haut à gauche de la zone de dessin et la lettre “L”, en majuscule, pour indiquer les coordonnées absolues du second point alors que dans le deuxième exemple, le “l”, en miniscule, indique des coordonnées relatives par rapport au point précédent.

rect

Comme son nom l’indique, elle permet de dessiner des rectangles mais également des carrés. Il y a quatre arguments obligatoires à passer à cette fonction, les positions x et y à partir desquelles sera tracé le rectangle et la largeur et la hauteur de ce dernier.

var rectangle = paper.rect(20, 50, 150, 100);
// on crée un rectangle qui sera positionné dans le <svg> avec un point de départ de coordonnées x=20 et y=50 ainsi qu'une largeur de 150 et une hauteur de 100

Avec cette fonction, il est également possible de dessiner des rectangles avec des coins arrondis en passant un cinquième paramètre (qui est par défaut à 0).

var rectangle = paper.rect(20, 50, 150, 100, 10);

circle

Il est aussi possible de dessiner un cercle dans RaphaëlJS à l’aide de cette fonction. Elle nécessite qu’on lui passe trois paramètres, les coordonnées x et y du centre du cercle ainsi que le rayon de ce dernier.

var cercle = paper.circle(20, 30, 60);
// on dessine un cercle ayant comme centre un point de coordonnées x=20 et y=30 et comme rayon 60

ellipse

Hormis des cercles, vous pouvez également dessiner des ellipses. Les paramètres à fournir sont semblables à ceux du cercle mais il faut dans ce cas passer deux rayons différents, l’un horizontal et l’autre vertical.

var ellipse = paper.ellipse(20, 25, 40, 30);
// on dessine une ellipse de rayon horizontal 40 et de rayon vertical 30

text

Plus que des dessins, il est aussi envisageable d’insérer du texte dans votre support. Pour cela, il vous suffit de passer en paramètres la position du centre du bloc de texte (coordonnées en x et y) ainsi que le texte souhaité.

var texte = paper.text(10, 20, "Hello world!");
// on insère le texte "Hello world!" à partir du point de coordonnées x = 10 et y = 20 qui est le centre du bloc de texte

image

Enfin, et pour en terminer sur les fonctions de base, il est possible d’insérer des images dans votre support de dessin. Il suffit pour cela, de passer en paramètres l’url de l’image, les coordonnées x et y de la base de l’image (coin en haut à gauche) ainsi que la largeur et hauteur de cette dernière.

var image = paper.image("raphael.jpg", 50, 50, 100, 150);
// on insère une image ayant pour url "raphael.jpg" à partir du point de coordonnées x = 50 et y = 50 et ayant pour largeur 100 et pour hauteur 150

D’autres fonctions intéressantes

En plus des fonctions de base qui sont de base qui sont expliquées ci-dessus, il existe d’autres fonctions qui peuvent s’avérer très utiles…

attr

La fonction attr() permet de modifier ou d’obtenir des attributs d’un élément. En effet, on peut donc modifier, par exemple, la couleur des traites, la police des textes ou encore l’opacité.

var path = paper.path("M10 10L50 50");
// on décide de changer la couleur du trait
path.attr("stroke", "blue");
// on peut également passer un code couleur en héxadécimal

Pour obtenir une liste plus complètes des attributs, je vous laisse vous rendre sur cette page .

translate

Il est également possible de faire subir une translation à un élément. Pour cela, il suffit d’indiquer des coordonnées x et y comme cela :

var path = paper.path("M10 10L50 50");
// on fait subir au trait une translation de 50 pixels vers le bas et de 10 pixels vers la droite
path.translate(50, 10);

rotate

Après la translation arrive logiquement la rotation. Et pour cette fonction, indiquer uniquement l’angle de rotation suffit (vous pouvez également passer un booléen en deuxième pour savoir si c’est une rotation absolue ou relative; “true” signifiant “absolue” et la valeur par défaut étant “false”).

var path = paper.path("M10 10L50 50");
// on fait subir au trait une rotation avec un angle de 45 degrés
path.rotate(45);

Il existe encore d’autres fonctions comme hide() et show() qui permettent respectivement de masquer ou d’afficher un élément ou encore remove() qui, appelée depuis l’objet retourné par la fonction Raphael, permet de supprimer tous les éléments présents (visibles ou non) sur le support. Pour voir la liste des fonctions, je vous laisse vous rendre sur le site officiel où se trouve la documentation.

Conclusion

La librairie RaphaëlJS peut donc s’avérer très utile lorsque vous avez des dessins à effectuer sur votre page web et également pour faire apparaître des graphiques. Comme pour toutes nouvelles bibliothèque il faut se familiariser avec les fonctions mais je trouve RaphaëlJS assez intuitive pour ne pas perdre trop de temps à cela.

De très nombreux exemples sont disponibles sur le net afin de voir ce que l’on peut obtenir (sur le site officiel par exemple).

L’équipe Synbioz.

Libres d’être ensemble.