Share
Raphael JS est un framework JavaScript léger et super-sexy qui vous permet de dessiner des graphiques vectoriels dans votre navigateur! Dans ce tutoriel, je vais vous présenter quelques fonctionnalités de dessin de base, examiner l'animation, fournir un accès DOM et enfin terminer en créant un widget génial pour votre site…
Commençons par télécharger le framework Raphael JS à partir d’ici. En haut à droite de la page, vous verrez
copies compressées et non compressées de Raphael version 1.0. Je vous recommande de vous procurer une copie de la source non compressée pour le moment - cette
vous pouvez jeter un coup d’œil à la source et voir quel avantage supplémentaire vous pouvez avoir sur la documentation.
Avec cela téléchargé, mettons en place un simple document HTML appelé index.htm et y inclure Raphaël. Nous incluons aussi notre_script.js, qui est où
nous écrirons notre propre code JavaScript et dans le corps du document, nous créerons une div de style minimal avec ID canvas_container, qui agira comme un
conteneur pour nos dessins.
Raphaël Play
N.B. La première version stable de la version 1.0 n'a été mise à disposition que le 7 octobre 2009, elle est donc toute nouvelle. Cela apporte un changement très important à la manière
vous tracez des chemins. Ainsi, si vous utilisez une version antérieure de Raphael, veillez à mettre à niveau et à consulter la documentation sur la compatibilité avec les versions antérieures..
Quand on dessine avec Raphaël, on le fait sur une toile. Cette toile, à laquelle nous ferons référence dans une variable appelée 'papier', est créée à l'aide du
Raphael () objet. Nous spécifions toujours la largeur et la hauteur du canevas, mais nous avons également la possibilité de spécifier soit a) la position absolue de
la toile par rapport à la fenêtre, ou b) un élément 'conteneur' dans lequel la toile est dessinée.
var paper = nouveau Raphael (x, y, largeur, hauteur); // option (a) var paper = new Raphael (élément, largeur, hauteur); // option (b)
Je préfère généralement la dernière méthode (b), car nous savons généralement où sont nos divs. Dans notre_script.js, attendons que le DOM se charge, puis crée un 500px par 500px
toile à l'intérieur de notre canvas_container div:
Accentsconagua
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); Toutes nos méthodes de dessin seront désormais liées à la papier variable.
Maintenant que nous avons notre toile, dessinons quelques formes dessus. le origine, c’est-à-dire que le x = 0, y = 0 point, est situé dans le coin supérieur gauche de
notre toile. Cela signifie que toutes les coordonnées x, y spécifiées dans nos méthodes sont relatives à ce point..
Tout d'abord, un cercle. Modifier notre_script.js ressembler à ceci:
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); cercle var = papier.circle (100, 100, 80); Cela va tracer un cercle avec un rayon de 80px avec son centre placé à x = 100, y = 100. Nous pouvons dessiner autant de cercles que nous le souhaitons et nous ne le faisons pas. avoir à
référencez-les dans une variable:
pour (var i = 0; i < 5; i+=1) var multiplier = i*5; paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier);
Ensuite, dessinons un rectangle. Nous faisons cela en utilisant la méthode rect (), qui prend comme paramètres: les coordonnées x et y du coin supérieur gauche du rectangle et le
la largeur et la hauteur désirées du rectangle.
var rectangle = paper.rect (200, 200, 250, 100);
Enfin, nous allons dessiner un ellipse. Ses paramètres sont identiques à ceux du cercle, c’est-à-dire x, y, rayon, sauf que nous pouvons spécifier spécifiquement les rayons x et y.
ellipse var = paper.ellipse (200, 400, 100, 50);
Cela va tracer une ellipse avec x-rayon = 100, y-rayon = 50 à x = 200, y = 400. Notre notre_script.js Le fichier devrait maintenant ressembler à ceci:
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); cercle var = papier.circle (100, 100, 80); pour (var i = 0; i < 5; i+=1) var multiplier = i*5; paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier) var rectangle = paper.rect(200, 200, 250, 100); var ellipse = paper.ellipse(200, 400, 100, 50); Si nous ouvrons maintenant index.htm dans notre navigateur, nous devrions avoir un tas de dessins de forme:
Exemple ici
Bien que les formes intégrées soient pratiques, il est les chemins qui nous offrent une vraie souplesse de dessin.
Lorsque vous tracez des chemins, il est utile de penser à un curseur ou à un stylo imaginaire appuyé contre l’écran. Lorsque nous créons notre toile, le curseur s’enracine sur le
coin supérieur gauche. La première chose à faire est donc
soulevez votre curseur ou votre pointe de stylo et déplacez-le dans une région spacieuse dans laquelle nous pouvons dessiner.
Par exemple, déplaçons notre curseur au centre de notre toile. Autrement dit, déplaçons-le 250 pixels dans la direction x et déplaçons-le 250 pixels dans la direction y.
Nous faisons cela en utilisant un soi-disant chaîne de chemin.
Une chaîne de chemin est une chaîne composée de commandes 'action' et de valeurs numériques correspondant à la commande. Nous déplaçons notre curseur sur x = 250, y = 250 en utilisant ce qui suit
chaîne:
"M 250 250"
'M' signifie que nous voulons bouger sans dessiner et est suivi des coordonnées de toile x et y.
Maintenant que notre curseur est là où nous le voulons, dessinons une ligne par rapport à ce point en utilisant la commande 'L' en minuscule, 'l'.
"M 250 250 l 0 -50"
Cela va tracer une ligne vers le haut 50px dans la direction y. Ecrivons une chaîne de chemin qui va dessiner un tetris tetris:
"M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"
La commande 'z' signifie que le chemin se ferme - il va joindre une ligne où que nous soyons jusqu'au point spécifié par notre commande 'M' initiale.
Nous disons à Raphael de dessiner ce chemin en utilisant la méthode path (). Modifier notre_script.js ressembler à ceci:
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); var tetronimo = paper.path ("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"); Si vous chargez index.htm, vous devriez maintenant voir un tetronimo comme ceci:
Les chaînes de chemin peuvent devenir incroyablement (brillamment) complexes à l'aide de commandes de courbe et d'arc. Une couverture complète des chemins peut être trouvée à la
Page de spécification de chemin SVG.
Notre tetris tetronimo, bien que merveilleux, n’est pas très esthétique. Nous allons résoudre ce problème en utilisant la méthode attr ().
La méthode attr () prend un objet composé de différentes paires propriété-valeur en tant que paramètre. Puisque nous avons stocké une référence à notre tetronimo dans la variable tetronimo, nous pouvons prendre cette variable et y ajouter la méthode attr (). On pourrait tout aussi bien
chaînez la méthode attr () à la méthode path (), mais gardons les choses saines pour le moment. Je vais démontrer l'utilisation de attr () par exemple:
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); var tetronimo = paper.path ("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"); tetronimo.attr (remplissage: '# 9cf', contour: '#ddd', 'largeur du trait': 5); produit ceci:
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); var tetronimo = paper.path ("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"); tetronimo.attr (gradient: '90 - # 526c7a- # 64a0c1 ', trait:' # 3b4449 ',' largeur du trait ': 10,' trait du trait ',' rond ', rotation: -90); produit ceci:
La documentation de Raphael est assez longue en ce qui concerne la méthode attr ().
Amusez-vous avec les différentes combinaisons propriété-valeur d'objet.
La méthode animate () de Raphael est vraiment, vraiment bien. Cela nous permet d’animer nos dessins de manière jQuery-esque, d’animer
les attributs que nous fournissons sur une certaine période avec un assouplissement facultatif.
Tournons notre dernier tetronimo de 360 degrés. La rotation
l'attribut est absolu, donc cela devrait prendre une rotation complète et le ramener à son état non pivoté.
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); var tetronimo = paper.path ("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"); tetronimo.attr (gradient: '90 - # 526c7a- # 64a0c1 ', trait:' # 3b4449 ',' largeur du trait ': 10,' trait du trait ',' rond ', rotation: -90); tetronimo.animate (rotation: 360, 2000, 'rebond'); L'animation se déroule sur 2 secondes (2000 millisecondes) et il est dit de passer à son état final avec un "rebond".
Exemple ici.
Nous pouvons également fournir une fonction de rappel en argument. Cette fonction de rappel est appelée à la fin de l'animation. L'exemple suivant
animera la rotation et la largeur de trait du tetronimo, puis se réinitialisera avec une autre animation dans la fonction de rappel.
tetronimo.animate (rotation: 360, 'largeur du trait': 1, 2000, 'rebond', fonction () / * rappel après la fin de l'animation originale * / this.animate (rotation: -90, contour: ' # 3b4449 ',' largeur de trait ': 10, 1000););
le ce le mot clé référence le tetronimo d'origine depuis la fonction de rappel.
Exemple ici.
Étant un peu un geek du code, il m'est rarement arrivé de dessiner des formes simples dans Flash. Mais une chose avec laquelle j'aimais jouer était interpolation de forme. bien,
Raphael s’efforce d’émuler l’interpolation des formes en spécifiant une chaîne de chemin dans la méthode animate ().
Un autre tetronimo, le tetronimo Z dans Tetris, a la chaîne de chemin suivante,
"M 250 250 l 0 -50 l -50 0 l 0 -50 l -100 0 l 0 50 l 50 0 l 0 50 z"
et ça ressemble à ça:
Maintenant, en utilisant notre tetronimo original avec un style d'attribut minimal, je vais spécifier la nouvelle chaîne de chemin dans notre méthode animate ().
tetronimo.attr (trait: 'aucun', remplissage: 'bleu'); tetronimo.animate (chemin: "M 250 250 l 0 -50 l -50 0 l 0 -50 l-100 0 l 0 50 l 50 0 l 0 50 z", 5000, «élastique»);
Vous devriez voir notre tétronimo original se transformer en notre nouveau. L’effet est rendu encore plus prononcé en spécifiant «élastique» comme type d’atténuation..
Exemple ici.
Si nous voulons avoir accès à nos éléments en tant qu'éléments DOM, nous pouvons le faire facilement. C’est grâce à la nœud propriété. En utilisant cela, nous pouvons
ajouter des gestionnaires d'événements à nos dessins, que je vais vous montrer.
Commençons par dessiner un cercle dans notre notre_script.js fichier.
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); var circ = paper.circle (250, 250, 40); circ.attr (remplissage: '# 000', contour: 'aucun'); Ajoutons maintenant le texte 'Bye Bye Circle!' de sorte que son point central est au même point que notre centre de cercle.
var text = paper.text (250, 250, 'Bye Bye Circle!') text.attr (opacité: 0, 'taille de la police': 12). toBack ();
J'ai mis l'opacité à 0 afin qu'elle soit initialement masquée. Notez le chaînage de la méthode toBack (). Cela place le texte derrière tous les autres
éléments de dessin de la toile (de la même manière, toFront () amène des éléments à l'avant même de notre toile).
Ajoutons maintenant un gestionnaire d’événement mouseover à notre cercle en utilisant la propriété node. Nous allons définir le style du curseur sur 'pointeur'.
circ.node.onmouseover = function () this.style.cursor = 'pointeur';
Qu'est-ce que cela fait est de définir la propriété de style de la
Ajoutons enfin un gestionnaire d’événements onclick à notre cercle:
circ.node.onclick = function () text.animate (opacity: 1, 2000); circ.animate (opacity: 0, 2000, function () this.remove (););
Lorsque le cercle est cliqué, le texte que nous avons référencé dans la variable texte est animé à l'opacité complète sur 2 secondes. Le cercle lui-même est animé
à 0 opacité sur la même période. Nous incluons également une fonction de rappel dans la méthode animate du cercle. Cela supprime le
l'élément cercle de notre document une fois l'animation terminée, car bien que le cercle ait une opacité de 0, il est toujours cliquable jusqu'à ce qu'il soit supprimé.
Exemple ici.
Enfin, rassemblons ce que nous avons appris et construisons un joli petit Mood Meter. Fondamentalement, vous choisirez une valeur d’humeur comprise entre 1 et 5, 1 étant "ordures" et
5 étant 'positivement maniaque', et Raphael en créera une belle représentation.
Voir le widget ici
Commencez par modifier notre_script.js ressembler à ceci:
window.onload = function () var paper = new Raphael (document.getElementById ('canvas_container'), 500, 500); var circ = paper.circle (250, 250, 20) .attr (fill: '# 000'); var mood_text = paper.text (250, 250, 'Mon \ nSonde'). attr (fill: '#fff'); Cela crée un cercle de rayon 20px au centre de notre toile et du texte au-dessus du cercle disant «Mon humeur». 'Mood' est placé sur une nouvelle ligne en utilisant
'\ n'.
Ensuite, créons des informations personnalisées correspondant à nos humeurs et choisissons notre humeur..
moods = ['Déchets', 'Pas bien', 'OK', 'Souriant', 'Positively Manic']; couleurs = ['# cc0000', '# a97e22', '# 9f9136', '# 7c9a2d', '# 3a9a2d']; // choisit une humeur comprise entre 1 et 5, 1 étant un déchet et 5 positivement maniaque var my_mood = 1;
La description textuelle de notre humeur est stockée dans un tableau appelé «humeurs» et la couleur correspondant à cette humeur est stockée dans un tableau appelé «couleurs»..
L'humeur choisie, comprise entre 1 et 5, est stockée dans la variable my_mood.
Créons maintenant une fonction appelée show_mood. Lorsqu'elle est appelée, cette fonction affiche nos cercles d'humeur (les cercles de couleur) et le texte correspondant à cette ambiance..
fonction show_mood () pour (var i = 0; i < my_mood; i+=1) (function(i) setTimeout(function() paper.circle(250, 250, 20).attr( stroke: 'none', fill: colors[my_mood - 1] ).animate(translation: '0 ' + (-42 * (i+1)), 2000, 'bounce').toBack(); , 50*i); )(i); paper.text(250, 300, moods[my_mood - 1]).attr(fill: colors[my_mood - 1]); mood_text.node.onclick = function() return false; circ.node.onclick = function() return false;
Dans show_mood (), nous avons une boucle qui itère autant de fois que la valeur de my_mood. À l'intérieur de cette boucle se trouve une fonction anonyme à exécution automatique. Ceci est nécessaire pour que
nous avons accès à la variable je à chaque étape de l'itération. Dans la fonction à exécution automatique, nous créons un délai d’attente - toutes les 50 * i secondes, un cercle
est créé à la pointe de notre cercle d'origine. Chaque cercle est ensuite traduit pendant 2 secondes en 0px dans x et quelques multiples de -42px en y. Nous nous assurons de placer
chaque cercle successif au dos de la toile. Notez que les cercles sont remplis en fonction de la couleur dans le tableau de couleurs, déterminé par my_mood..
show_mood () est également responsable de l'affichage de notre texte d'humeur qui utilise my_mood pour sélectionner l'ambiance correspondante dans moods_array..
show_mood () se débarrasse enfin de tous les gestionnaires d’événements onclick affectés au texte original et au cercle que nous avons placés au centre de la toile. Cela empêche
le re-dessin des cercles d'humeur.
Enfin, affectons les gestionnaires d’événements onclick au cercle central et au texte "Mon humeur". J'attribue des gestionnaires d'événements aux deux éléments afin que vous puissiez cliquer sur
le texte ou le cercle a pour effet d'appeler show_mood ().
circ.node.onclick = show_mood; mood_text.node.onclick = show_mood;
Eh bien c'est ça! Vous devriez maintenant avoir une plate-forme solide sur laquelle baser vos explorations dans le framework Raphael JS. Le plus important, j'espère
vous êtes maintenant impatient de plonger dans Raphael JS et de vous concocter de superbes dessins de navigateur et des widgets. N'oubliez pas de me suivre sur Twitter et partagez vos créations.
