Guide du débutant pour dessiner des graphiques 2D avec deux.js

Two.js est une API qui facilite la création de formes 2D avec du code. Suivez et vous apprendrez à créer et à animer des formes à partir de JavaScript.

Two.js est un rendu agnostic, afin que vous puissiez compter sur la même API pour dessiner 2D avec Canvas, SVG ou WebGL. La bibliothèque a beaucoup de méthodes qui peuvent être utilisées pour contrôler comment différentes formes apparaissent à l'écran ou comment elles sont animées.

• Création de formes de base
• Maripulation des objets dans un groupe
• Définition des gradients et écriture du texte
• Création d'une version à deux. de la bibliothèque a une taille d'environ 128 Ko, tandis que la version compressée est de 50 Ko. Si vous utilisez la dernière version, vous pouvez réduire davantage la taille de la bibliothèque à l'aide d'une version personnalisée.

Vous pouvez soit télécharger la version minifiée de la bibliothèque à partir de GitHub ou vous pouvez créer un lien directement vers la version hébergée CDN. Une fois que vous avez ajouté la bibliothèque à votre page Web, vous pouvez commencer à dessiner et à animer différentes formes ou objets.

Création de formes de base

Tout d'abord, vous devez en parler deux.js sur l'élément sur lequel vous souhaitez dessiner 2D et animer vos formes. Vous pouvez transmettre certains paramètres aux deux.Makeline (x1, y1, x2, y2)

. Ici, deux.makerectangle (x, y, largeur, hauteur)

et deux.makécircle (x, y, rayon)

et deux.makeArrow (x1, y1, x2, y2, taille)

. Les valeurs Y1

déterminent la position de la queue de la flèche. Les valeurs Y2 déterminent la position de la pointe de flèche. Le cinquième paramètre détermine la taille de la pointe de flèche. Il existe une méthode appelée Radius détermine la distance des sommets du polygone du centre, tandis que deux. Vous pouvez soit transmettre une liste d'objets différents ou transmettre un tableau d'objets, de chemins ou de groupes comme paramètre de cette méthode. Il renverra également des valeurs de remplissage , linewidth à la fois.

Vous pouvez cliquer n'importe où à l'intérieur du div pour modifier la position des rectangles. Nous allons réellement définir la position du groupe. Étant donné que les rectangles font partie du groupe, ils se déplaceront automatiquement.

var rects = [];<br><br>var elemWidth = document.querySelector("#draw-shapes").offsetWidth;<br><br>for (i = 0; i < 100; i++) {<br>  rects[i] = two.makeRectangle(<br>    Math.floor(Math.random() * elemWidth * 2),<br>    Math.floor(Math.random() * 420 * 2),<br>    10 + Math.floor(Math.random() * 100),<br>    10 + Math.floor(Math.random() * 100)<br>  );<br>}<br><br>var group = two.makeGroup(...rects);<br><br>group.noFill();<br>group.stroke = "black";<br>group.linewidth = 6;<br><br>two.update();<br>

Pour la pratique, vous devriez essayer de modifier le code et diviser les rectangles en deux groupes égaux. Appliquez un ensemble différent de valeurs de couleur de trait

Définition des gradients et du texte d'écriture

Vous pouvez définir à la fois les gradients linéaires et radiaux en deux.js. La définition d'un gradient ne signifie pas qu'elle sera rendue automatiquement à l'écran, mais elle sera disponible pour vous utiliser lors de la définition des deux. Les valeurs nouvelles deux.stop (décalage, couleur, opacité) , où deux.makeradialgradient (x, y, rayon, arrêts, fx, fy) . Dans ce cas, les valeurs Two.MAKEText (message, x, y, styles) . Il peut être évident à partir du nom des paramètres que Message est le texte réel que vous souhaitez écrire. Les paramètres x <code >message et y <code >x sont les coordonnées du point qui agiront comme le centre d'écriture du texte. Le paramètre styles <code >y est un objet qui peut être utilisé pour définir les valeurs d'un grand ensemble de propriétés. styles

Vous pouvez utiliser des styles pour définir les valeurs des propriétés comme Font Family <p>, <code> taille <code >family, et Alignement <code >size. You can also specify the value of properties like fill<code >alignment, stroke<code >fill, opacity<code >stroke, rotation<code >opacity, scale<code >rotation, and translation<code >scale.translation

Creating a Two.js Project

After learning about all these methods and properties, it is time to apply them to a project. Dans ce tutoriel, je vais vous montrer comment nous pouvons utiliser deux.js pour rendre les dix premiers éléments du tableau périodique avec des électrons tournant autour du noyau. Le noyau aura également un léger mouvement pour améliorer l'attrait visuel de notre représentation.

Nous commençons par définir certaines variables et fonctions qui seront utilisées plus tard.

var rects = [];<br><br>var elemWidth = document.querySelector("#draw-shapes").offsetWidth;<br><br>for (i = 0; i < 100; i++) {<br>  rects[i] = two.makeRectangle(<br>    Math.floor(Math.random() * elemWidth * 2),<br>    Math.floor(Math.random() * 420 * 2),<br>    10 + Math.floor(Math.random() * 100),<br>    10 + Math.floor(Math.random() * 100)<br>  );<br>}<br><br>var group = two.makeGroup(...rects);<br><br>group.noFill();<br>group.stroke = "black";<br>group.linewidth = 6;<br><br>two.update();<br>

Le code ci-dessus stocke les coordonnées du centre de notre fenêtre dans les variables CenterX <p> et <code> Centery <code >centerX. Ceux-ci seront utilisés plus tard pour placer notre atome au centre. Le tableau elementNames <code >centerY contient les noms des dix premiers éléments de la table périodique. L'index de chaque nom correspond au nombre d'électrons et de protons de cet élément, et il commence par une chaîne vide. L'objet Styles <code >elementNames contient des propriétés pour styliser l'objet texte. styles

Nous avons également défini une fonction intrange () <p> pour obtenir une valeur entière aléatoire dans les extrêmes donnés. <code >intRange()

var centerX = window.innerWidth / 2;<br>var centerY = window.innerHeight / 2;<br><br>var elem = document.getElementById("atoms");<br><br>var elementNames = [<br>  "",<br>  "Hydrogen",<br>  "Helium",<br>  "Lithium",<br>  "Beryllium",<br>  "Boron",<br>  "Carbon",<br>  "Nitrogen",<br>  "Oxygen",<br>  "Fluorine",<br>  "Neon"<br>];<br><br>var styles = {<br>  alignment: "center",<br>  size: 36,<br>  family: "Lato"<br>};<br><br>var nucleusCount = 10;<br>var nucleusArray = Array();<br><br>var electronCount = 10;<br>var electronArray = Array();<br><br>function intRange(min, max) {<br>  return Math.random() * (max - min) + min;<br>}<br>

Cela crée une instance de deux et définit deux gradients radiaux. Les gradients radiaux rouges / noirs représenteront les protons et les gradients bleus / noirs représenteront les neutrons.

Nous avons utilisé la fonction intrange () <p> pour placer tous ces neutrons et protons à moins de 20 pixels les uns des autres. La méthode <code> makeCircle () <code >intRange() définit également le rayon de ces protons et neutrons à 10 pixels. Après cela, nous itré sur NucleusArray <code >makeCircle() et remplissons chaque cercle avec un gradient différent alternativement. nucleusArray

var rects = [];<br><br>var elemWidth = document.querySelector("#draw-shapes").offsetWidth;<br><br>for (i = 0; i < 100; i++) {<br>  rects[i] = two.makeRectangle(<br>    Math.floor(Math.random() * elemWidth * 2),<br>    Math.floor(Math.random() * 420 * 2),<br>    10 + Math.floor(Math.random() * 100),<br>    10 + Math.floor(Math.random() * 100)<br>  );<br>}<br><br>var group = two.makeGroup(...rects);<br><br>group.noFill();<br>group.stroke = "black";<br>group.linewidth = 6;<br><br>two.update();<br>

Placer les neutrons et les protons à l'intérieur du noyau était facile. Cependant, le fait de placer correctement les électrons à une distance uniforme nécessitera un peu de mathématiques. Nous utilisons la variable shellRadius pour spécifier la distance de différentes coquilles d'électrons du noyau. Un cercle entier couvre un angle égal à 2 Pi Radians. Nous pouvons placer différents électrons uniformément en distribuant les radians de 2 pi entre eux également.

Les fonctions Math.cos() et Math.sin() sont utilisées pour séparer les composantes verticales et horizontales du vecteur de position de différents électrons en fonction de leur angle.

var centerX = window.innerWidth / 2;<br>var centerY = window.innerHeight / 2;<br><br>var elem = document.getElementById("atoms");<br><br>var elementNames = [<br>  "",<br>  "Hydrogen",<br>  "Helium",<br>  "Lithium",<br>  "Beryllium",<br>  "Boron",<br>  "Carbon",<br>  "Nitrogen",<br>  "Oxygen",<br>  "Fluorine",<br>  "Neon"<br>];<br><br>var styles = {<br>  alignment: "center",<br>  size: 36,<br>  family: "Lato"<br>};<br><br>var nucleusCount = 10;<br>var nucleusArray = Array();<br><br>var electronCount = 10;<br>var electronArray = Array();<br><br>function intRange(min, max) {<br>  return Math.random() * (max - min) + min;<br>}<br>

Cette partie du code met des électrons de différents coquilles ainsi que des neutrons et des protons et des protons et des protons et des protons. Il définit également les couleurs de remplissage pour tous les électrons dans une orbite spécifique à la fois.

var two = new Two({ fullscreen: true }).appendTo(elem);<br><br>var protonColor = two.makeRadialGradient(<br>  0,<br>  0,<br>  15,<br>  new Two.Stop(0, "red", 1),<br>  new Two.Stop(1, "black", 1)<br>);<br><br>var neutronColor = two.makeRadialGradient(<br>  0,<br>  0,<br>  15,<br>  new Two.Stop(0, "blue", 1),<br>  new Two.Stop(1, "black", 1)<br>);<br><br>for (i = 0; i < nucleusCount; i++) {<br>  nucleusArray.push(two.makeCircle(intRange(-10, 10), intRange(-10, 10), 8));<br>}<br><br>nucleusArray.forEach(function(nucleus, index) {<br>  if (index % 2 == 0) {<br>    nucleus.fill = protonColor;<br>  }<br>  if (index % 2 == 1) {<br>    nucleus.fill = neutronColor;<br>  }<br>  nucleus.noStroke();<br>});<br>

Cette partie du code définit l'opacité des électrons et protons individuels à zéro. Il indique également à deux.js de faire pivoter les électrons et les protons à des vitesses spécifiques.

for (var i = 0; i < 10; i++) {<br>  if (i < 2) {<br>    var shellRadius = 50;<br>    var angle = i * Math.PI;<br>    electronArray.push(<br>      two.makeCircle(<br>        Math.cos(angle) * shellRadius,<br>        Math.sin(angle) * shellRadius,<br>        5<br>      )<br>    );<br>  }<br>  if (i >= 2 && i < 10) {<br>    var shellRadius = 80;<br>    var angle = (i - 2) * Math.PI / 4;<br>    electronArray.push(<br>      two.makeCircle(<br>        Math.cos(angle) * shellRadius,<br>        Math.sin(angle) * shellRadius,<br>        5<br>      )<br>    );<br>  }<br>}<br>

La partie finale du code nous permet d'itérer à travers les éléments en cliquant sur la souris ou en tapant. Pour charger l'élément suivant, nous fabriquons un autre électron et un proton ou neutron de plus visible et mettons à jour le nom de l'élément. Après avoir cliqué sur le dernier élément, toutes les particules sont à nouveau cachées afin que nous puissions recommencer. La variable visible garde une trace du nombre de particules atomiques qui sont actuellement visibles afin que nous puissions les afficher ou les masquer en conséquence.

Essayez de cliquer ou de taper dans la démo de codep suivante pour voir les dix premiers éléments de la table périodique. Bibliothèque deux.js et comment il peut être utilisé pour dessiner des formes comme des rectangles, des cercles et des ellipses. Après cela, nous avons discuté de la façon dont nous pouvons regrouper différents objets pour les manipuler tous en même temps. Nous avons utilisé cette capacité pour regrouper des éléments pour les traduire et les faire pivoter en synchronisation. Ces outils se sont tous réunis dans notre animation des atomes des dix premiers éléments du tableau périodique.

Comme vous pouvez le voir, la création de graphiques 2D animés est très facile en utilisant deux.js. L'objectif de cet article était de vous aider à démarrer rapidement, nous ne couvert que les bases. Cependant, vous devez lire la documentation officielle pour en savoir plus sur la bibliothèque! Plus de ressources JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!