Présentation de Raphaël.js

James Williams
James Williams
X Page d'accueil

Introduction

SVG, ou Scalable Vector Graphics, est un langage basé sur XML qui permet de décrire des objets et des scènes. Les éléments SVG peuvent déclencher des événements et peuvent être écrits en JavaScript. Le format SVG est fourni avec plusieurs types primitifs intégrés, tels que les cercles et les rectangles, et permet d'afficher du texte. Bien que la technologie SVG ne soit pas nouvelle, HTML5 permet désormais d'intégrer directement des objets SVG dans une page sans utiliser de balise <object> ou <embed>, ce qui la met en conformité avec ce qui est actuellement disponible avec le canevas. Raphaël.js est une bibliothèque JavaScript qui vous permet de créer des scènes SVG par programmation. Il utilise une API unifiée pour créer des scènes SVG lorsqu'elles sont compatibles ou VML(Vector Modeling Language) lorsqu'elles ne le sont pas, à savoir les versions d'Internet Explorer antérieures à IE9.

Dessiner votre première scène

Commençons par dessiner une scène simple avec Raphaël. Nous commençons à dessiner la scène en instanciant un objet Raphaël. Dans ce cas, j'ai utilisé le constructeur qui l'insère dans un élément HTML donné avec une largeur et une hauteur données, mais vous pouvez également demander à Raphaël d'ajouter l'objet au DOM (Document Object Model). Ensuite, j'ai créé un rectangle en fournissant les positions x et y souhaitées avec la largeur et la hauteur. Ensuite, j'ai créé un cercle en indiquant les coordonnées et le rayon souhaités. Enfin, j'ai utilisé la fonction d'attribut (attr) pour attribuer des couleurs aux objets.

Des attributs peuvent être attribués à chaque objet SVG pour des éléments tels que la couleur, la rotation, la couleur et la taille du trait, etc. Vous trouverez une liste détaillée des attributs pouvant être attribués ici.

var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);

rect.attr({fill: "green"});
circle.attr({fill: "blue"});

Dessiner des formes avancées avec des tracés

Un tracé est une série d'instructions utilisées par le moteur de rendu pour créer des objets. Dessiner avec un tracé revient à dessiner avec un stylo sur une feuille de papier millimétré géante. Vous pouvez demander au stylet de se lever du papier et de se déplacer vers une autre position(move to), de dessiner une ligne(line to) ou de dessiner une courbe(arc to). Les tracés permettent au SVG de créer des objets avec le même niveau de détail, quelle que soit l'échelle. Lorsque vous émettez une instruction, par exemple pour dessiner une courbe, le SVG tient compte de la taille d'origine et de la taille finale souhaitée de la courbe (après mise à l'échelle), puis calcule mathématiquement les points intermédiaires pour afficher une courbe fluide.

Le code et l'image ci-dessous montrent un rectangle et une courbe fermée dessinés avec des tracés. La lettre M suivie de coordonnées déplace le stylet vers cette position, la lettre L suivie d'une paire de coordonnées dessine une ligne entre la position actuelle et cette position. La lettre s dessine une courbe de Bézier lisse avec un point de contrôle et un point final donnés avec des coordonnées relatives. Z ferme un chemin. En règle générale, l'utilisation d'une lettre majuscule génère la commande avec des coordonnées absolues, tandis que les lettres minuscules utilisent des coordonnées relatives. M/m et Z/z, respectivement, génèrent la même commande pour les majuscules et les minuscules. Pour consulter la liste complète des instructions de parcours, cliquez ici.

var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});

Dessiner du texte

Avoir des illustrations sans pouvoir dessiner de texte serait vraiment ennuyeux. Heureusement, Raphaël propose deux méthodes pour dessiner du texte. La première méthode, text, accepte des coordonnées X et Y ainsi que la chaîne à dessiner. La méthode de texte ne vous permet pas de contrôler beaucoup la police ni d'autres effets. Il utilise la police par défaut et la taille par défaut.

La deuxième méthode, l'impression, dessine le texte en tant que collection de tracés. Nous pouvons ainsi modifier des lettres individuelles. Dans l'exemple ci-dessous, nous avons coloré le chiffre 5 avec un remplissage orange, "ROCKS" avec un remplissage bleuté et rendu le trait plus épais pour simuler un texte en gras. Nous avons utilisé une police personnalisée de 40 points.

var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");

var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);

letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}

La police Vegur n'est pas disponible dans Raphaël, ni aucune autre police d'ailleurs. De plus, la plupart des polices utilisent le format TrueType(TTF) ou OpenType(OTF). Pour passer de ces formats à quelque chose qui peut être utilisé par Raphaël, nous devons les convertir à l'aide d'un outil appelé Cufon. Cufon vous permet d'exporter les différents styles de police d'une police donnée (standard, gras, italique, gras italique, etc.) pour les utiliser avec Raphaël. Ce tutoriel n'a pas pour objectif de présenter Cufon en détail. Pour en savoir plus, consultez le lien mentionné ci-dessus. Le répertoire de polices Google est une excellente source de polices sans encombrement pour vos applications.

Événements

Les éléments SVG peuvent s'abonner directement à tous les événements traditionnels basés sur la souris : click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup et hover. Raphaël vous permet d'ajouter vos propres méthodes au canevas ou à des éléments individuels. En théorie, rien ne vous empêche d'ajouter des gestes pour les navigateurs mobiles.

L'extrait ci-dessous lie une fonction pour faire pivoter une lettre donnée dans "ROCKS" de 45 degrés lorsqu'elle est cliquée.

for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});

letters[i].click(function(evt) {
this.rotate(45);
});
}

SVG par rapport à Canvas

Étant donné qu'il s'agit de deux méthodes permettant de dessiner des objets à l'écran, il n'est souvent pas immédiatement clair pourquoi vous devez utiliser l'une plutôt que l'autre. Les deux supports ont des approches très différentes. Canvas est une API en mode immédiat qui ressemble beaucoup au dessin au crayon. Vous pouvez effacer ou détruire une partie du dessin, mais vous ne pouvez pas rétablir ni modifier un trait précédent par défaut. Le canevas est également un bitmap matriciel. Il est donc très sujet à la pixellisation lorsque les images sont mises à l'échelle. En revanche, comme indiqué précédemment, le format SVG peut diffuser plusieurs résolutions avec le même niveau de détail et peut être utilisé dans des scripts.

Il est assez simple de choisir d'utiliser SVG ou Canvas pour la programmation de jeux. En plus des contraintes habituelles liées au déploiement sur ordinateur ou sur mobile, il s'agit principalement du nombre d'éléments de sprite. Le format SVG se prête à ce que j'appelle les jeux basse fidélité. Je les décris comme des jeux qui limitent le mouvement simultané d'objets, ainsi que la suppression et la création d'éléments graphiques. De nombreux jeux de société comme les échecs, les dames ou le jeu de bataille navale, ainsi que des jeux de cartes comme le blackjack, le poker et les cœurs, entrent dans cette catégorie. Un autre point commun est que, dans de nombreux jeux de cette catégorie, un joueur doit déplacer un objet arbitraire. La scriptabilité de SVG facilite la sélection des objets.

Outils de création pour le SVG

L'utilisation du format SVG ne signifie pas du tout que vous devez créer des tracés à la main. Il existe plusieurs outils, à la fois Open Source et commerciaux, qui vous permettent d'exporter au format SVG. Les deux outils que j'ai utilisés de manière intensive et que je recommande vivement sont Inkscape et svg-edit.

svg-edit

svg-edit est un éditeur SVG basé sur le navigateur, écrit en JavaScript. Il fournit une interface utilisateur limitée qui rappelle GIMP ou MS Paint. Sauf si le niveau de détail était relativement faible, j'ai principalement utilisé svg-edit pour ajuster les dessins SVG plutôt que de les créer. svg-edit vous permet de créer des objets graphiquement ou avec du code SVG.

Inkscape

Inkscape est un éditeur de graphiques vectoriels multiplate-forme complet, semblable à CorelDraw, Adobe Illustrator et Xara. Inkscape bénéficie d'une communauté de plug-ins dynamique et d'un codebase mature. Le prédécesseur d'Inkscape, à partir duquel Inkscape a été créé, a été développé en 1999. Inkscape est mon application de prédilection pour les éléments vectoriels et bitmap.

Un petit aparté

Le format SVG n'est pas compatible avec Windows dans les versions d'Internet Explorer antérieures à IE9. IE utilise un format de graphiques vectoriels appelé VML (Vector Markup Language), qui offre une grande partie des fonctionnalités de SVG. Raphaël peut créer des scènes qui utilisent SVG ou VML lorsque cela est possible. L'utilisation de Raphaël est un moyen simple de fournir une compatibilité multiplate-forme.

Références