Commencer à créer des graphiques 2D avec Two.js : guide du débutant

Two.js est une API qui vous permet de créer facilement des formes 2D à l'aide de code. En continuant, vous apprendrez à créer et à animer des formes avec JavaScript.

Two.js est indépendant du moteur de rendu, vous pouvez donc compter sur la même API pour dessiner en 2D à l'aide de Canvas, SVG ou WebGL. La bibliothèque dispose de nombreuses méthodes qui peuvent être utilisées pour contrôler la façon dont les différentes formes apparaissent à l'écran ou comment elles sont animées.

• Créer des formes de base
• Objets d'opération en groupes
• Définir les dégradés et écrire du texte
• Créer un projet Two.js

Installer

La version non compressée de la bibliothèque fait environ 128 Ko, tandis que la version compressée fait 50 Ko. Si vous utilisez la dernière version, vous pouvez utiliser une version personnalisée pour réduire davantage la taille de la bibliothèque.

Vous pouvez télécharger une version minifiée de la bibliothèque depuis GitHub ou créer un lien directement vers la version hébergée sur 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éez des formes de base

Tout d’abord, vous devez indiquer à Two.js l’élément sur lequel vous souhaitez dessiner en 2D et animer la forme. Vous pouvez transmettre certains paramètres au constructeur Two pour le configurer.

Les valeurs utilisant type 属性设置渲染器类型。您可以指定一个值，例如 svg、webgl、canvas 等。 type 设置为 svg。绘图空间的宽度和高度可以使用 width 和 height 参数指定。您还可以使用 fullscreen 参数将绘图空间设置为整个可用屏幕。当 fullscreen 设置为 true 时，width 和 height seront ignorées.

Enfin, vous pouvez demander à Two.js de démarrer automatiquement l'animation à l'aide d'un paramètre booléen autostart.

Après avoir transmis tous les paramètres requis au constructeur, vous pouvez commencer à dessiner des lignes, des rectangles, des cercles et des ovales.

Vous pouvez utiliser two.makeLine(x1, y1, x2, y2) 绘制一条线。这里，(x1, y1) 是第一个端点的坐标，(x2, y2) 是第二个端点的坐标。该函数将返回一个 Two.Line objet qui peut être stocké dans une variable pour une manipulation ultérieure.

De la même manière, vous pouvez utiliser le paramètre two.makeRectangle(x, y, width, height) 和 two.makeRoundedRectangle(x, y, width, height, radius) 绘制普通矩形和圆角矩形。请记住， x 和 y 确定矩形的中心，而不是像许多其他库那样确定矩形的左上角坐标。 width 和 height 参数将确定矩形的大小。 radius pour spécifier respectivement la valeur du rayon du congé.

Vous pouvez également utiliser two.makeCircle(x, y, radius) 和 two.makeEllipse(x, y, width, height) 在网页上渲染圆形和椭圆形。就像矩形一样， x 和 y 参数指定圆或椭圆的中心。如果是椭圆形，则将 width 和 height séparément. Le définir sur la même valeur le rendra sous forme de cercle.

Déterminez la position de la flèche à l'aide de la valeur two.makeArrow(x1, y1, x2, y2, size) 方法也可以轻松创建箭头。 x1 和 y1 值确定箭头尾部的位置。 x2 和 y2. Le cinquième paramètre détermine la taille de la flèche.

Il existe une fonction appelée two.makePolygon(x, y, radius,sides) 的方法，您可以使用它来创建正多边形。 x 和 y 值确定多边形的中心。 radius 确定多边形顶点到中心的距离，而 sides qui spécifie le nombre de côtés d'un polygone.

Objets dans les groupes d'action

Une méthode utile dans Two.js que vous utiliserez souvent est l'objet two.makeGroup(objects)。您可以传递不同对象的列表，也可以传递对象、路径或组的数组作为此方法的参数。它还将返回 Two.Group. Après avoir créé un groupe, vous pouvez utiliser les propriétés fournies par le groupe pour opérer sur tous ses sous-groupes à la fois.

La méthode

Stroke 和 fill 属性可用于设置组中所有子项的描边和填充颜色。他们将接受所有可以在 CSS 中表示颜色的有效形式。这意味着您可以自由使用 RGB、HSL 或十六进制表示法。您也可以简单地使用颜色的名称，例如 orange、red 或 blue。同样，您可以设置所有其他属性的值，例如 linewidth、opacity、miter 和 cap。可以使用 noFill() 和 noStroke() supprime le remplissage et le trait de tous les enfants du groupe.

Vous pouvez également appliquer d'autres transformations physiques, telles que scale、rotation 和 translation。这些变换将应用于单个对象。使用 add() 和 remove() et d'autres méthodes pour ajouter facilement de nouveaux objets au groupe et les supprimer.

Voici un exemple de création d'environ 40 rectangles différents dans des emplacements aléatoires. Les rectangles sont ensuite regroupés afin que l'on puisse immédiatement modifier leurs valeurs fill、Stroke 和 linewidth.

var rects = [];

var elemWidth = document.querySelector("#draw-shapes").offsetWidth;

for (i = 0; i < 100; i++) {
  rects[i] = two.makeRectangle(
    Math.floor(Math.random() * elemWidth * 2),
    Math.floor(Math.random() * 420 * 2),
    10 + Math.floor(Math.random() * 100),
    10 + Math.floor(Math.random() * 100)
  );
}

var group = two.makeGroup(...rects);

group.noFill();
group.stroke = "black";
group.linewidth = 6;

two.update();

Vous pouvez cliquer n'importe où à l'intérieur du div pour changer la position du rectangle. Nous allons en fait fixer la position de ce groupe. Puisque les rectangles font partie du groupe, ils se déplacent automatiquement.

Pour vous entraîner, vous devriez essayer de modifier le code et de diviser le rectangle en deux groupes égaux. Appliquez une valeur de couleur linewidth 和 lines différente à chacun pour créer votre propre œuvre géométrique unique.

Définir des dégradés et écrire du texte

Vous pouvez définir des dégradés linéaires et radiaux dans Two.js. Définir un dégradé ne signifie pas qu'il s'affichera automatiquement à l'écran, mais il peut être utilisé lors de la définition des valeurs fill 或 Stroke de divers objets.

Vous pouvez déterminer l'opacité de la couleur à l'aide du paramètre two.makeLinearGradient(x1, y1, x2, y2,stops) 定义线性渐变。值 x1 和 y1 确定渐变开始的坐标。同样，值 x2 和 y2 确定渐变结束的坐标。 stops 参数是 Two.Stop 实例的数组。它们定义了数组每个部分的颜色以及每种颜色过渡到下一种颜色的位置。它们可以使用 new Two.Stop(offset, color, opacity) 来定义，其中 offset 确定渐变上必须完全渲染该特定颜色的点。 color 参数确定特定点处渐变的颜色。您可以使用任何有效的 CSS 颜色表示作为其值。最后，opacity. L'opacité est facultative et peut être n'importe quelle valeur comprise entre 0 et 1.

Vous pouvez utiliser two.makeRadialGradient(x, y, radius,stops, fx, fy) 以类似的方式定义径向渐变。在这种情况下，值 x 和 y 确定渐变的中心。 radius 参数指定渐变应延伸多远。您还可以将停止点数组传递给此方法，以设置渐变的颜色组成。参数 fx 和 fy sont facultatifs, ils peuvent être utilisés pour spécifier la position de mise au point du dégradé.

Découvrez quelques types de dégradés et leur code dans le CodePen ci-dessous.

N'oubliez pas que x 和 y 渐变的位置是相对于它们尝试填充的形状的原点而言的。例如，应该从中心填充形状的径向渐变将始终将 x 和 y est mis à zéro.

Two.js vous permet également d'écrire du texte sur la zone de dessin et de le mettre à jour ultérieurement en fonction de vos besoins. Cela nécessite d'utiliser la méthode two.makeText(message, x, y, styles)。从参数名称可以明显看出 message 是您要写入的实际文本。参数 x 和 y 是将作为写入文本中心的点的坐标。 styles L'argument est un objet qui peut être utilisé pour définir les valeurs d'un certain nombre de propriétés.

您可以使用样式设置字体 family、size 和 alignment 等属性的值。您还可以指定以下属性的值 fill、行程、opacity、rotation、scale 和 translation。

创建 Two.js 项目

了解所有这些方法和属性后，是时候将它们应用到项目中了。在本教程中，我将向您展示如何使用 Two.js 渲染元素周期表的前十个元素，其中电子围绕原子核旋转。核也会有一些轻微的移动，以提高我们表示的视觉吸引力。

我们首先定义一些稍后将使用的变量和函数。

var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;

var elem = document.getElementById("atoms");

var elementNames = [
  "",
  "Hydrogen",
  "Helium",
  "Lithium",
  "Beryllium",
  "Boron",
  "Carbon",
  "Nitrogen",
  "Oxygen",
  "Fluorine",
  "Neon"
];

var styles = {
  alignment: "center",
  size: 36,
  family: "Lato"
};

var nucleusCount = 10;
var nucleusArray = Array();

var electronCount = 10;
var electronArray = Array();

function intRange(min, max) {
  return Math.random() * (max - min) + min;
}

上面的代码将窗口中心的坐标存储在变量 centerX 和 centerY 中。稍后将使用它们将我们的原子放置在中心。 elementNames 数组包含元素周期表前十个元素的名称。每个名称的索引对应于该元素的电子和质子数，并且以空字符串开头。 styles 对象包含用于设置文本对象样式的属性。

我们还定义了一个函数 intRange() 来获取给定极值范围内的随机整数值。

var two = new Two({ fullscreen: true }).appendTo(elem);

var protonColor = two.makeRadialGradient(
  0,
  0,
  15,
  new Two.Stop(0, "red", 1),
  new Two.Stop(1, "black", 1)
);

var neutronColor = two.makeRadialGradient(
  0,
  0,
  15,
  new Two.Stop(0, "blue", 1),
  new Two.Stop(1, "black", 1)
);

for (i = 0; i < nucleusCount; i++) {
  nucleusArray.push(two.makeCircle(intRange(-10, 10), intRange(-10, 10), 8));
}

nucleusArray.forEach(function(nucleus, index) {
  if (index % 2 == 0) {
    nucleus.fill = protonColor;
  }
  if (index % 2 == 1) {
    nucleus.fill = neutronColor;
  }
  nucleus.noStroke();
});

这将创建 Two 的实例并定义两个径向渐变。红/黑径向渐变代表质子，蓝/黑渐变代表中子。

我们使用 intRange() 函数将所有这些中子和质子放置在彼此 20 像素以内。 makeCircle() 方法还将这些质子和中子的半径设置为 10 像素。之后，我们迭代 nucleusArray 并交替用不同的渐变填充每个圆圈。

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

将中子和质子放入原子核内很容易。然而，将电子正确地放置在均匀的距离需要一些数学知识。我们使用 shellRadius 变量来指定不同电子壳层距原子核的距离。整个圆所覆盖的角度等于 2 PI 弧度。我们可以通过在不同的电子之间均匀分布 2 PI 弧度来均匀地放置它们。

Math.cos() 和 Math.sin() 函数用于根据不同电子的位置向量分离垂直和水平分量他们的角度。

var orbitA = two.makeCircle(centerX, centerY, 50);
orbitA.fill = "transparent";
orbitA.linewidth = 2;
orbitA.stroke = "rgba(0, 0, 0, 0.1)";

var orbitB = two.makeCircle(centerX, centerY, 80);
orbitB.fill = "transparent";
orbitB.linewidth = 2;
orbitB.stroke = "rgba(0, 0, 0, 0.1)";

var groupElectronA = two.makeGroup(electronArray.slice(0, 2));
groupElectronA.translation.set(centerX, centerY);
groupElectronA.fill = "orange";
groupElectronA.linewidth = 1;

var groupElectronB = two.makeGroup(electronArray.slice(2, 10));
groupElectronB.translation.set(centerX, centerY);
groupElectronB.fill = "yellow";
groupElectronB.linewidth = 1;

var groupNucleus = two.makeGroup(nucleusArray);
groupNucleus.translation.set(centerX, centerY);

这部分代码将来自不同壳层的电子以及中子和质子放入各自单独的组中。它还同时设置特定轨道中所有电子的填充颜色。

two
  .bind("update", function(frameCount) {
    groupElectronA.rotation += 0.025 * Math.PI;
    groupElectronB.rotation += 0.005 * Math.PI;
    groupNucleus.rotation -= 0.05;
  })
  .play();

var text = two.makeText("", centerX, 100, styles);

nucleusArray.forEach(function(nucleus, index) {
  nucleus.opacity = 0;
});

electronArray.forEach(function(electron, index) {
  electron.opacity = 0;
});

这部分代码将单个电子和质子的不透明度设置为零。它还告诉 Two.js 以特定速度旋转电子和质子。

visible = 0;

document.addEventListener("click", function(event) {
  if (visible < nucleusArray.length) {
    nucleusArray[visible].opacity = 1;
    electronArray[visible].opacity = 1;
    visible++;
    text.value = elementNames[visible];
  }
  else {
    nucleusArray.forEach(el => el.opacity=0);
    electronArray.forEach(el => el.opacity=0);
    visible = 0;
    text.value = elementNames[0];
  }
});         

代码的最后部分允许我们通过单击鼠标或点击来迭代元素。为了加载下一个元素，我们再添加一个电子和一个质子或中子可见，并更新元素名称。单击最后一个元素后，所有粒子都会再次隐藏，以便我们可以重新开始。 visible 变量跟踪当前可见的原子粒子的数量，以便我们可以相应地显示或隐藏它们。

尝试单击或点击以下 CodePen 演示来查看元素周期表的前十个元素。

最后的想法

本教程首先简要介绍了 Two.js 库以及如何使用它来绘制矩形、圆形和椭圆形等形状。之后，我们讨论了如何对不同的对象进行分组以同时操作它们。我们利用这种能力对元素进行分组，以同步平移和旋转它们。这些工具全部集中在我们的元素周期表前十个元素的原子动画中。

如您所见，使用 Two.js 创建动画 2D 图形非常容易。这篇文章的重点是帮助您快速入门，因此我们只介绍了基础知识。但是，您应该阅读官方文档以了解有关该库的更多信息！

更多 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!