Share
Les graphiques avancés constituent une part importante du Web de nos jours, mais il y a plusieurs moteurs de rendu dans le mélange. Vous pouvez utiliser la toile, bien sûr; mais SVG et WebGL sont également des options. Dans ce didacticiel, nous allons passer en revue une bibliothèque de dessins relativement nouvelle, two.js, qui fournit une API qui fait la même chose avec ces trois moteurs de rendu. Si vous êtes prêt, allons voir!
La première étape consiste à créer un deux exemple et le mettre sur la page. le Deux contstructor prend un objet avec un certain nombre de paramètres:
var deux = nouveau Deux (fullscreen: true);
Dans ce cas, nous utilisons le plein écran Cette option permet à la zone de dessin d’occuper toute la fenêtre du navigateur. Si nous voulions que notre zone de dessin ait une taille spécifique, nous pourrions utiliser le largeur et la taille propriétés à la place; ces deux prennent un nombre pour une valeur de pixel. Il y a aussi le démarrage automatique paramètre; si elle est définie sur true, les animations s'exécutent immédiatement lorsque la page est chargée..
Il y a aussi le type paramètre: cela décide quel rendu sera utilisé. Vous pouvez choisir entre canvas, SVG et WebGl. Vous ne tapez pas simplement le nom, cependant: vous utilisez une constante de bibliothèque: soit Two.Types.canvas, Two.Types.svg, ou Two.Types.webgl. Pour être clair, two.js utilisera uniquement SVG par défaut; il ne détecte aucune fonctionnalité pour voir ce que le navigateur va supporter. Vous devrez le faire vous-même (et je pense que c'est une bonne idée: de petits outils, une chose bien, et tout ça).
Donc, une fois que nous avons un Deux par exemple, que faisons-nous avec cela. Tout d'abord, vous voudrez l'ajouter à la page. Il a un ajouter à méthode qui prend un élément HTML en tant que paramètre, définissons donc ceci:
Puis dans main.js, nous commençons par ceci:
Accentsconagua
var el = document.getElementById ("main"), deux = nouveau Deux (fullscreen: true); deux.appendTo (el); Avec tout cela mis en place, nous sommes prêts à dessiner quelques formes.
Nous allons commencer par les formes de base; alors que nous pouvons créer nos propres formes complexes avec nouveau Two.Polygon, la plupart des formes simples peuvent être réalisées avec quelques méthodes pratiques.
Commençons par les cercles. le faire cercle fonction prend trois paramètres:
cercle var = deux.makeCircle (110, 110, 100); circle.fill = "# 881111"; deux.update ();
Nous allons passer en revue de bas en haut: l'appel à deuxupdate les mises à jour sont une zone de dessin et rend le contenu. Pour revenir au cercle, les deux premiers paramètres sont les coordonnées x et y du centre du cercle. Ensuite, le troisième paramètre est le rayon du cercle. Tous les deux.make… les fonctions retournent un Two.Polygon objet. Au cours de ce didacticiel, vous verrez plusieurs propriétés et méthodes que vous pouvez utiliser sur ces formes. Voici le premier: remplir. Comme vous pouvez le deviner, il définit la couleur de remplissage: tout CSS valide fera.
Le résultat devrait ressembler à ceci:
Maintenant, qu'en est-il des rectangles? le deux.makeRectangle méthode prend quatre paramètres. Tout comme le cercle, les deux premiers paramètres marquent la X et y coordonnées pour le centre du rectangle. Ensuite, param trois est largeur et param quatre est le la taille du rectangle.
var rect = two.makeRectangle (115, 90, 150, 100); rect.fill = "orange"; rect.opacité = 0,25; rect.noStroke (); deux.update ();
Encore une fois, nous utilisons le remplir propriété. Nous utilisons également le opacité propriété, qui accepte une valeur décimale comprise entre 0 et 1; nous avons un quart d'opacité ici. Enfin, nous utilisons le noStroke méthode, qui supprime le trait (bordure) du rectangle. Voici ce que nous avons:
Les ellipses sont également assez simples: comme vous pouvez le deviner, les deux premiers paramètres définissent le centre de l’ellipse. Ensuite, nous avons la largeur et la hauteur:
ellipse var = deux.makeEllipse (100, 40, 90, 30); ellipse.stroke = "# 112233"; ellipse.linewidth = 5; ellipse.noFill (); deux.update ();
Pour les nouvelles propriétés: nous avons accident vasculaire cérébral, qui définit la couleur de la bordure; pour définir la largeur de cette bordure, nous utilisons le largeur de ligne propriété. Alors, souviens-toi noStroke? le aucun remplissage la méthode est la même, sauf que la couleur de remplissage de notre forme est supprimée (sans cela, nos formes sont remplacées par un remplissage blanc).
Bien sûr, les formes les plus simples sont des lignes.
var line = two.makeLine (10, 10, 110, 210); line.linewidth = 10; line.stroke = "rgba (255, 0, 0, 0.5)";
Les deux premiers paramètres sont les X et y pour une extrémité de la ligne; la deuxième série est pour l'autre extrémité.
La forme la plus difficile à créer est probablement la courbe. le deux.makeCurve méthode prend autant d'ensembles de x, y paramètres comme vous le souhaitez - chaque paire étant un point où la ligne se courbe. Ensuite, le dernier paramètre est un booléen: le faire vrai Si la forme est ouverte, cela signifie que les extrémités ne sont pas connectées. Si vous voulez que two.js trace une ligne reliant les deux extrémités des courbes, cela devrait être faux.
courbe var = deux.makeCurve (110, 100, 120, 50, 140, 150, 160, 50, 180, 150, 190, 100, vrai); curve.linewidth = 2; courbe.échelle = 1,75; curve.rotation = Math.PI / 2; // courbe quart de tour.noFill ();
Tu sais largeur de ligne, mais qu'en est-il échelle? Nous pouvons utiliser cela pour réduire ou élargir notre forme; ici, nous élargissons la forme de 175%. Ensuite, nous pouvons utiliser rotation faire pivoter notre forme de plusieurs radians; nous faisons 90 degrés, ce qui est demi-PI radians.
Enfin, vous pourriez penser que puisque nous avons ouvert la forme, nous n’aurons pas de quoi remplir; mais ce n'est pas vrai. Une courbe non fermée aura toujours un remplissage, nous utilisons donc aucun remplissage enlever le remplissage et finir avec juste la courbe.
Le dernier type de forme est la règle générale: c'est le polygone général. En fait, c'est un peu comme la courbe, sauf que les lignes vont directement d'un point à l'autre.
var poly = two.makePolygon (110, 100, 120, 50, 140, 150, 160, 50, 180, 150, 190, 100); poly.linewidth = 4; poly.translation = new Two.Vector (60, 60); poly.stroke = "#cccccc"; poly.fill = "#ececec";
Comme pour la courbe, nous avons autant de paires de coordonnées que nous le voudrions, puis le booléen ouvert; ici nous le mettons à faux, donc la forme sera fermée.
Nous mettons également un Traduction ici; Cela nous permet de déplacer la forme à gauche ou à droite et de haut en bas. Nous mettons la Traduction propriété à un Two.Vector exemple. le Two.Vector constructeur prend deux paramètres: un X et un y. Celles-ci finissent par être les coordonnées du centre de la forme. Vous n'avez pas réellement besoin de créer un nouveau vecteur pour cela; vous pouvez simplement assigner le X et y répertoire de valeurs:
poly.translation.x = 60; poly.translation.y = 60;
Voici ce que nous obtenons:
Jusqu'à présent, nous avons travaillé avec des objets de forme individuels; cependant, il est possible de regrouper des formes et d'interagir avec elles d'une seule pièce.
Vous pouvez faire un groupe avec le deux.makeGroup méthode. Ensuite, nous pouvons utiliser ses ajouter méthode pour ajouter une forme au groupe.
var group = two.makeGroup (), rect = two.makeRectangle (0, 0, 100, 100), circ = two.makeCircle (50, 50, 50); rect.fill = "rouge"; circ.fill = "blue"; group.add (rect); group.add (circ); deux.update ();
Si vous utilisez ceci, c'est assez basique; tout comme vous auriez sans le groupe morceaux.
Mais ensuite, nous pouvons travailler avec le groupe, en utilisant n’importe laquelle des transformations que nous pouvons effectuer sur une forme individuelle. Par exemple, que diriez-vous d'une traduction?
group.translation.x = 100; groupe.translation.y = 100; deux.update ();
Comme pour les formes régulières, les groupes sont ordonnés de haut en bas à mesure de leur création. Toutefois, si vous ajoutez une forme à un groupe, puis à un autre groupe, elle sera supprimée du premier groupe. C'est très bien si vous devez modifier l'ordre des formes lors de l'animation (ce que nous verrons). Donc, si nous commençons par ceci:
var topGroup = two.makeGroup (), bottomGroup = deux.makeGroup (), rect = two.makeRectangle (100, 100, 100, 100), circ = two.makeCircle (150, 150, 50); rect.fill = "rouge"; circ.fill = "blue"; topGroup.add (rect); topGroup.add (circ); deux.update ();
Nous avons les mêmes que ci-dessus:
Mais si on ajoute le rect au bottomGroup au lieu…
bottomGroup.add (rect);
Maintenant, notre place est sur le dessus.
Enfin, parlons de l'animation. Vous savez déjà que two.js restitue les formes que vous avez créées lorsque vous appelez deux.update (). Si vous appelez two.play () au lieu de cela, c'est comme appeler mettre à jour() à plusieurs reprises, en utilisant demande Animation Frame. Chaque fois que cela se produit, two.js déclenche un événement "update". Voici comment créer une animation: écoutez l’événement "update"; et quand cela se produit, lancez une fonction pour configurer la prochaine image.
Nos exemples jusqu’à présent étaient plutôt simples, alors accélérons les choses: nous allons créer une planète en orbite avec sa propre lune en orbite. Rappelez-vous, nous commençons par créer deux instances:
var el = document.getElementById ("main"), deux = nouveau Deux (fullscreen: true). appendTo (el); Ensuite, nous devons configurer quelques variables.
var earthAngle = 0, moonAngle = 0, distance = 30, rayon = 50, remplissage = 100, orbite = 200, décalage = orbite + remplissage, orbites = deux.makeGroup ();
Nous augmenterons Angle terrestre et moonAngle pour obtenir notre planète et la lune autour de leurs orbites. le distance variable est à quelle distance notre lune sera de notre terre. le rayon est le raduis de notre planète Terre, et le rembourrage est combien d’espace notre planète aura en dehors de son orbite. Cette orbite provient de la orbite variable. le décalage variable est la distance entre notre planète et le bord de la toile. Finalement, le orbites groupe tiendra les deux cercles orbitaux, ce qui nous permettra de les afficher ou de les cacher à volonté. Ne vous inquiétez pas si vous êtes un peu confus. vous verrez comment ils travaillent tous ensemble en une seconde.
Nous allons commencer par la ligne d'orbite de la Terre. Bien sûr, ce n'est qu'un simple cercle:
var earthOrbit = two.makeCircle (offset, offset, orbite); earthOrbit.noFill (); earthOrbit.linewidth = 4; earthOrbit.stroke = "#ccc"; orbites.add (earthOrbit); deux.update ();
Il n'y a rien de nouveau ici. Voici ce que vous devriez voir:
Ensuite, nous devons créer une planète et la placer sur son orbite. Premièrement, nous avons besoin d’un moyen de déterminer où la planète devrait être placée sur l’orbite; et bien sûr, cela doit changer pour chaque image d'animation. Alors, créons une fonction qui va renvoyer le centre X et y coordonnées de l'orbite en fonction de l'angle actuel de positionnement autour du cercle et du rayon de l'orbite:
fonction getPositions (angle, orbite) return x: Math.cos (angle * Math.PI / 180) * orbite, y: Math.sin (angle * Math.PI / 180) * orbite;
Oui, c’est un peu de trigonométrie, mais ne vous inquiétez pas trop: nous convertissons l’angle (en degrés) en radian, en utilisant les méthodes JavaScript et sinus et en le multipliant par le orbite. Maintenant, nous pouvons utiliser cette fonction pour ajouter la terre à l'image:
var pos = getPositions (earthAngle ++, orbite), earth = deux.makeCircle (pos.x + offset, pos.y + offset, rayon); course de la terre = "# 123456"; earth.linewidth = 4; earth.fill = "# 194878";
Nous commençons par obtenir le poste pour le premier Angle terrestre (valeur de 0, tu te souviens?); alors, nous faisons notre Terre basé sur ces positions (plus le décalage) et coloriez-le. Voici ce que nous finissons avec:
Maintenant, animons cette planète. Le code de liaison d'événement vient en réalité directement de Backbone, il peut donc sembler familier:
two.bind ("update", fonction (frameCount) var pos = getPositions (earthAngle ++, orbit); earth.translation.x = pos.x + offset; earth.translation.y = pos.y + offset;); deux.play (); Qu'est-ce qui se passe ici est que chaque fois que le mettre à jour événement se produit, nous utilisons le getPositions fonction pour calculer la position pour le prochain angle sur la terre. Ensuite, nous devons simplement définir le centre de la terre sur ces nouvelles positions, plus le décalage. Enfin, nous appelons two.play () pour démarrer les événements de mise à jour. Si vous rechargez la page maintenant, vous devriez voir la Terre tourner autour de l'orbite.
Beau travail jusqu'à présent, hein? Maintenant, qu'en est-il de la lune et de son trajet en orbite? cela ira au-dessus de la lier déclaration.
var moonOrbit = two.makeCircle (earth.translation.x, earth.translation.y, rayon + distance); moonOrbit.noFill (); moonOrbit.linewidth = 4; moonOrbit.stroke = "#ccc"; orbites.add (moonOrbit); var pos = getPositions (moonAngle, rayon + distance), moon = deux.makeCircle (earth.translation.x + pos.x, earth.translation.y + pos.y, rayon / 4); moonAngle + = 5; moon.fill = "# 474747";
Cela ressemble beaucoup au code de la planète: nous centrons le cercle d’orbite de la lune sur le centre de la Terre en utilisant son Traduction Propriétés; son rayon est le rayon de la terre plus la distance à laquelle la lune doit être éloignée de la terre. Encore une fois, nous ajoutons le moonOrbit au orbites groupe.
Ensuite, nous créons la lune, en obtenant d’abord la position souhaitée et en créant un cercle à cet endroit. Pour un rayon, nous utiliserons un quart du rayon que nous avons utilisé pour la terre. Nous allons incrémenter l'angle de la lune de 5 à chaque fois, de sorte qu'il se déplace plus vite que la Terre..
Désactiver l'animation (en commentant la deux.bind déclaration), nous obtenons ceci:
Dernière étape: animer la lune. À l'intérieur même deux.bind déclaration, ajoutez ces lignes:
var moonPos = getPositions (moonAngle, rayon + distance); moon.translation.x = earth.translation.x + moonPos.x; moon.translation.y = earth.translation.y + moonPos.y; moonAngle + = 5; moonOrbit.translation.x = earth.translation.x; moonOrbit.translation.y = earth.translation.y;
Comme auparavant, nous obtenons la nouvelle position de la lune et la positionnons par rapport à la Terre. Ensuite, nous déplaçons également l'anneau d'orbite de la lune pour qu'il reste centré sur la terre..
Avec tout cela en place, notre petit exemple est complet: Voici un instantané de l'action:
Comme je l'ai dit, nous pouvons également cacher les orbites. Depuis qu'ils sont tous les deux dans le orbites groupe, on peut utiliser le visible propriété du groupe:
orbites.visible = false;
Et maintenant:
Eh bien, voilà un résumé de ce tutoriel. Pensez-vous que vous utiliserez two.js dans l’un de vos propres projets? Ou peut-être que vous avez une meilleure alternative? Écoutons-le dans les commentaires!
