Présentation de Raphaël.js

James Williams
James Williams
X Page d'accueil

Introduction

Le format SVG, ou Scalable Vector Graphics, est un langage XML permettant de décrire des objets et des scènes. Les éléments SVG peuvent déclencher des événements et faire l'objet d'un script avec JavaScript. Le format SVG est fourni avec plusieurs types primitifs intégrés, tels que des cercles et des 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 permet de l'aligner 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 avec le langage de modélisation vectorielle continue(VML, Vector Modeling Language) là où c'est le cas actuellement, à 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 donnant les coordonnées et le rayon souhaités. Enfin, j'ai utilisé la fonction d'attribut (attr) pour attribuer des couleurs aux objets.

Chaque objet SVG peut être associé à des attributs tels que la couleur, la rotation, la couleur et la taille du trait, etc. Vous trouverez une liste détaillée des attributs attribuables 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 à l'aide de trajets

Un chemin d'accès est une série d'instructions utilisées par le moteur de rendu pour créer des objets. Dessiner avec un trajet revient à dessiner au stylo sur une énorme feuille de papier millimétré. Vous pouvez demander au stylo d'être soulevé du papier et de se déplacer dans une autre position(déplacement vers), de tracer une ligne(vers une ligne) ou de dessiner une courbe(vers laquelle un arc est dessiné). Ils permettent à SVG de créer des objets avec le même niveau de détail, quelle que soit l'échelle. Lorsque vous émettez une instruction consistant à tracer une courbe, le SVG prend en compte la taille d'origine et la taille finale souhaitée de la courbe (après mise à l'échelle). Il calcule mathématiquement les points intermédiaires pour afficher une courbe lisse.

Le code et la figure ci-dessous montrent un rectangle et une courbe fermée avec des tracés. La lettre M suivie des coordonnées déplace le stylo vers cette position, L suivie de la paire de coordonnées trace une ligne entre la position actuelle et cette position. La courbe de Bézier lisse avec un point de contrôle et une extrémité donnés avec des coordonnées relatives. Z ferme un tracé. En règle générale, l'utilisation d'une lettre majuscule émet la commande avec des coordonnées absolues, tandis que les minuscules utilisent des coordonnées relatives. M/m et Z/z, respectivement, émettent la même commande pour les majuscules ou les minuscules. Pour consulter la liste de toutes les instructions concernant les chemins d'accès, 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 possibilité de tracer du texte serait vraiment ennuyeux. Heureusement, Raphaël propose deux méthodes pour dessiner du texte. La première méthode, le texte, utilise des coordonnées x et y avec la chaîne à tracer. La méthode textuelle ne vous donne pas beaucoup de contrôle sur la police ou d'autres effets. Il dessine avec la police par défaut avec la taille par défaut.

La seconde méthode, "print", dessine le texte sous la forme d'un ensemble de chemins. Nous pouvons ainsi modifier des lettres individuelles. Dans l'exemple ci-dessous, nous avons coloré le chiffre 5 avec un remplissage orange, nous avons coloré "ROCKS" avec un remplissage bleuté et nous avons rendu le trait plus épais pour simuler du texte en gras. Pour ce faire, nous avons utilisé une police personnalisée d'une taille de 40 pts.

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 en Raphaël, pas plus qu'aucune autre police d'ailleurs. En outre, la plupart des polices utilisent le format TrueType(TTF) ou OpenType(OTF). Pour convertir ces formats en un format utilisable par Raphaël, nous devons les convertir à l'aide d'un outil appelé Cufon. Cufon vous permet d'exporter les différents styles d'une police donnée (standard, gras, italique, gras italique, etc.) pour les utiliser avec Raphaël. Le sujet de ce tutoriel n'est pas de couvrir Cufon en détail. Cliquez sur le lien mentionné ci-dessus pour en savoir plus. Le répertoire Google Fonts est une excellente source de polices non empaquetées pour vos applications.

Événements

Les éléments SVG peuvent s'abonner directement à tous les événements traditionnels basés sur la souris : clic, dblclick, survol du curseur, déplacement du curseur, sortie du curseur, survol, survol et survol. Raphaël 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 associe une fonction pour faire pivoter une lettre donnée dans "ROCKS" de 45 degrés lorsque l'utilisateur clique dessus.

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 ou Canvas

Étant donné qu'il s'agit de ces deux méthodes pour dessiner des objets à l'écran, l'intérêt de les utiliser plutôt que l'autre n'est souvent pas évident. Les deux supports ont des approches très différentes. Canvas est une API en mode immédiat qui ressemble beaucoup au dessin avec des crayons de couleur. Vous pouvez effacer ou détruire une partie du dessin, mais vous ne pouvez pas par défaut annuler ni modifier un trait précédent. Le canevas est également un bitmap matriciel. Il est donc largement pixélisé lors de la mise à l'échelle des images. En revanche, comme mentionné précédemment, le format SVG peut diffuser plusieurs résolutions avec le même niveau de détail et peut être scripté.

Utiliser SVG ou Canvas pour programmer un jeu est assez simple. En plus des contraintes habituelles concernant le déploiement sur ordinateur ou sur mobile, il s'agit en fait du nombre de sprites. Le format SVG se prête à ce que j'appelle les jeux de faible fidélité. Il s'agit de jeux qui limitent le mouvement simultané d'objets, ainsi que la suppression et la création de sprites. De nombreux jeux de société comme les échecs, les damier ou le cuirassé, ainsi que les jeux de cartes comme BlackJack, le poker et les cœurs, appartiennent à cette catégorie. Autre point commun : dans bon nombre de ces jeux, le joueur doit déplacer un objet arbitraire. La facilité de script du SVG facilite la sélection d'objets.

Outils de création pour SVG

Utiliser SVG ne signifie pas du tout que vous devez créer des chemins manuellement. Plusieurs outils, à la fois Open Source et commerciaux, vous permettent d'exporter vers le fichier SVG. Les deux outils que j'ai fréquemment utilisés et que je recommande sont Inkscape et svg-edit.

svg-edit

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

Paysage d'encre

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 dupliqué, a été développé en 1999. Inkscape est mon application de référence pour les éléments vectoriels et bitmap.

Un mineur de côté

Le format SVG n'est pas pris en charge sous Windows dans les versions d'Internet Explorer antérieures à IE9. IE utilise un format de graphique vectoriel appelé VML, Vector Markup Language, qui offre en grande partie les mêmes fonctionnalités que le format SVG. Raphaël peut créer des scènes qui utilisent le format SVG ou VML, le cas échéant. Raphaël est un moyen simple de fournir une assistance multiplate-forme.

Références