Cet article est le premier d'une série d'articles dédiés aux bibliothèques utiles que tout développeur Web devrait avoir dans sa boîte à outils. Le but est de montrer ce que ces bibliothèques sont capables de faire et comment les utiliser à leur plein potentiel. Ce premier article va vous présenter la bibliothèque Raphael. Il est également disponible en anglais sur hacks.mozilla.org.

Introduction

Raphael est une bibliothèque créée par Dmitry Baranovskiy qui fait partie des Sencha Labs.

L'objectif de cette bibliothèque est de simplifier l'usage du dessin vectoriel sur le Web. Raphael s'appuie sur le standard SVG du W3C (qui est très bien supporté par tous les navigateurs modernes) et utilise le langage VML de Microsoft pour pouvoir supporter les vieilles versions d'Internet Explorer. Elle essaye également d'harmoniser certains problèmes d’implémentation de SVG comme les animations SVG. En conséquence, Raphael est une excellente couche d'abstraction pour produire des dessins vectoriels qui déchirent sur le Web.

Utilisation de base

Cette bibliothèque dispose d'une excellente documentation agrémentée de nombreux exemples, n'hésitez pas à l'utiliser de manière intensive.

L'exemple suivant va permettre de dessiner un simple cercle rouge à l’intérieur de l'élément HTML ayant l'identifiant "myPaper".

// Cet exemple crée une zone de dessin
// de 100px de large par 100px de haut.
// Cette zone est créée dans le coin haut/gauche
// de l'élément #myPaper (ou le coin haut/droit
// si l'élément a l'attribut dir="rtl")
var paper = Raphael("myPaper", 100, 100);

// Le cercle aura un rayon de 40
// et son centre sera aux coordonnées 50,50
var c = paper.circle(50, 50, 40);

// Le cercle sera rempli en rouge
// Notez que le nom des propriétés du
// cercle suit la recommandation SVG
c.attr({
    fill: "#900"
});

Utilisation avancée

En dépit du fait que Raphael limite les possibilités offertes par SVG (principalement à cause des limites intrinsèques du langage VML) il permet de faire des trucs assez avancés :

  • Transformations matricielles avancées
  • Gestion des événements avancée
  • Animation multi-navigateur
  • Un système simple de Drag'n'Drop
  • Détection d'intersection de chemin

Raphael dispose également d'un système d'extensions qui vous permet de créer vos propre méthodes personnalisées.

Par exemple, voici une extension qui permet de créer des camemberts :

/**
 * Pie method
 *
 * cx: Position en x du centre de rotation
 * cy: Position en y du centre de rotation
 * r : rayon
 * a1: angle (en degrés) du début du camembert
 * a2: angle (en degrés) de la fin du camembert
 */
Raphael.fn.pie = function (cx, cy, r, a1, a2) {
    var d, flag = (a2 - a1) > 180;

    a1 = (a1 % 360) * Math.PI / 180;
    a2 = (a2 % 360) * Math.PI / 180;

    d = [
        // Placement de l'axe de rotation
        "M", cx, cy,

        // Déplacement jusqu'au début la courbe
        "l", r * Math.cos(a1), r * Math.sin(a1),

        // Dessin de la courbe
        "A", r, r, "0", +flag, "1",
        cx + r * Math.cos(a2), cy + r * Math.sin(a2),

        // Fermeture du chemin
        "z"
    ];

    return this.path(d.join(' '));
};

Vous remarquerez dans cet exemple qu'il est nécessaire d'être familier avec la syntaxe des chemins SVG (Raphael fera la conversion vers VML de manière transparente) mais une fois que c'est fait, vous pouvez l'utiliser comme n'importe quelle autre primitive disponible dans Raphael. Vous pouvez voir cette extension à l’œuvre sur jsFiddle :

Limites et précautions

Si vous n'êtes pas familier avec SVG ou si vous souhaitez supporter les vieilles versions d'Internet Explorer, cet outil est fait pour vous. Cependant, il s'agit d'une bibliothèque JavaScript ce qui signifie que vous devez connaître ce langage pour pouvoir vous en servir. De même, vous ne pouvez pas directement écrire du SVG et demander à Raphael de le parser et de l'interpréter (il existe d'autres bibliothèques pour ça). 

Du point de vue du support navigateur, Raphael dispose d'un large éventail. Il supporte Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ et Internet Explorer 6.0+.
En fait, le seul navigateur qui ne puisse pas bénéficier de Raphael est le navigateur natif pour Android 1.x et 2.x (ainsi bien sur que certains navigateurs pour "feature phone"). Cela vient du fait que ces navigateurs ne supportent aucune technologie de dessin vectoriel. Android ne commence à supporter (partiellement) SVG qu'à partir d'Android 3.0. Faites donc attention si vous prévoyez de travailler avec des terminaux mobiles.

Conclusion

Raphael est la première bibliothèque qui a permis aux développeurs et designers Web d'utiliser largement SVG. Si vous voulez créer de belles applications sans vous plonger dans l'API DOM de SVG ou si vous avez une contrainte liée au support de vieux navigateurs, cette bibliothèque vous offrira de nombreuses possibilités.

Pour finir, voici quelques exemples d'utilisation assez cools de Raphael: