Erste Schritte beim Erstellen von 2D-Grafiken mit Two.js: Ein Leitfaden für Anfänger

Two.js ist eine API, mit der Sie ganz einfach 2D-Formen mithilfe von Code erstellen können. Im weiteren Verlauf erfahren Sie, wie Sie mit JavaScript Formen erstellen und animieren.

Two.js ist rendererunabhängig, sodass Sie sich beim Zeichnen von 2D mit Canvas, SVG oder WebGL auf dieselbe API verlassen können. Die Bibliothek verfügt über viele Methoden, mit denen gesteuert werden kann, wie verschiedene Formen auf dem Bildschirm angezeigt oder animiert werden.

• Erstellen Sie Grundformen
• Operationsobjekte in Gruppen
• Verläufe definieren und Text schreiben
• Two.js-Projekt erstellen

Installieren

Die unkomprimierte Version der Bibliothek ist etwa 128 KB groß, während die komprimierte Version 50 KB groß ist. Wenn Sie die neueste Version verwenden, können Sie einen benutzerdefinierten Build verwenden, um die Größe der Bibliothek weiter zu reduzieren.

Sie können eine minimierte Version der Bibliothek von GitHub herunterladen oder direkt auf die vom CDN gehostete Version verlinken. Sobald Sie die Bibliothek zu Ihrer Webseite hinzugefügt haben, können Sie mit dem Zeichnen und Animieren verschiedener Formen oder Objekte beginnen.

Erstellen Sie Grundformen

Zuerst müssen Sie Two.js das Element mitteilen, auf dem Sie 2D zeichnen möchten, und die Form animieren. Sie können einige Parameter an den Two-Konstruktor übergeben, um ihn einzurichten.

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

Schließlich können Sie Two.js mithilfe eines booleschen autostart-Parameters anweisen, die Animation automatisch zu starten.

Nachdem Sie alle erforderlichen Parameter an den Konstruktor übergeben haben, können Sie mit dem Zeichnen von Linien, Rechtecken, Kreisen und Ovalen beginnen.

Sie können ein two.makeLine(x1, y1, x2, y2) 绘制一条线。这里，(x1, y1) 是第一个端点的坐标，(x2, y2) 是第二个端点的坐标。该函数将返回一个 Two.Line-Objekt verwenden, das zur späteren weiteren Bearbeitung in einer Variablen gespeichert werden kann.

Auf ähnliche Weise können Sie den Parameter two.makeRectangle(x, y, width, height) 和 two.makeRoundedRectangle(x, y, width, height, radius) 绘制普通矩形和圆角矩形。请记住， x 和 y 确定矩形的中心，而不是像许多其他库那样确定矩形的左上角坐标。 width 和 height 参数将确定矩形的大小。 radius verwenden, um jeweils den Radiuswert der Verrundung anzugeben.

Sie können two.makeCircle(x, y, radius) 和 two.makeEllipse(x, y, width, height) 在网页上渲染圆形和椭圆形。就像矩形一样， x 和 y 参数指定圆或椭圆的中心。如果是椭圆形，则将 width 和 height auch separat verwenden, wenn Sie den gleichen Wert festlegen.

Bestimmen Sie die Position des Pfeils mithilfe des two.makeArrow(x1, y1, x2, y2, size) 方法也可以轻松创建箭头。 x1 和 y1 值确定箭头尾部的位置。 x2 和 y2-Werts. Der fünfte Parameter bestimmt die Größe des Pfeils.

Es gibt eine Funktion namens two.makePolygon(x, y, radius,sides) 的方法，您可以使用它来创建正多边形。 x 和 y 值确定多边形的中心。 radius 确定多边形顶点到中心的距离，而 sides, die die Anzahl der Seiten eines Polygons angibt.

Objekte in Aktionsgruppen

Eine nützliche Methode in Two.js, die Sie häufig verwenden werden, ist das two.makeGroup(objects)。您可以传递不同对象的列表，也可以传递对象、路径或组的数组作为此方法的参数。它还将返回 Two.Group-Objekt. Nachdem Sie eine Gruppe erstellt haben, können Sie die von der Gruppe bereitgestellten Eigenschaften verwenden, um alle Untergruppen gleichzeitig zu bearbeiten.

Die

Stroke 和 fill 属性可用于设置组中所有子项的描边和填充颜色。他们将接受所有可以在 CSS 中表示颜色的有效形式。这意味着您可以自由使用 RGB、HSL 或十六进制表示法。您也可以简单地使用颜色的名称，例如 orange、red 或 blue。同样，您可以设置所有其他属性的值，例如 linewidth、opacity、miter 和 cap。可以使用 noFill() 和 noStroke()-Methode entfernt die Füllung und den Strich aller Kinder in der Gruppe.

Sie können auch andere physische Transformationen wie scale、rotation 和 translation。这些变换将应用于单个对象。使用 add() 和 remove() und andere Methoden anwenden, um neue Objekte einfach zur Gruppe hinzuzufügen und zu entfernen.

Hier ist ein Beispiel für die Erstellung von etwa 40 verschiedenen Rechtecken an zufälligen Orten. Die Rechtecke werden dann gruppiert, sodass wir ihre fill、Stroke 和 linewidth-Werte sofort ändern können.

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();

Sie können auf eine beliebige Stelle innerhalb des Div klicken, um die Position des Rechtecks ​​zu ändern. Wir werden tatsächlich die Position dieser Gruppe festlegen. Da die Rechtecke Teil der Gruppe sind, verschieben sie sich automatisch.

Zu Übungszwecken sollten Sie versuchen, den Code zu ändern und das Rechteck in zwei gleiche Gruppen aufzuteilen. Wenden Sie jeweils einen anderen linewidth 和 lines Farbwert an, um Ihr eigenes, einzigartiges geometrisches Kunstwerk zu erstellen.

Definieren Sie Farbverläufe und schreiben Sie Text

Sie können in Two.js lineare und radiale Verläufe definieren. Das Definieren eines Farbverlaufs bedeutet nicht, dass er automatisch auf dem Bildschirm gerendert wird, er kann jedoch zum Festlegen der fill 或 Stroke-Werte verschiedener Objekte verwendet werden.

Mit dem Parameter two.makeLinearGradient(x1, y1, x2, y2,stops) 定义线性渐变。值 x1 和 y1 确定渐变开始的坐标。同样，值 x2 和 y2 确定渐变结束的坐标。 stops 参数是 Two.Stop 实例的数组。它们定义了数组每个部分的颜色以及每种颜色过渡到下一种颜色的位置。它们可以使用 new Two.Stop(offset, color, opacity) 来定义，其中 offset 确定渐变上必须完全渲染该特定颜色的点。 color 参数确定特定点处渐变的颜色。您可以使用任何有效的 CSS 颜色表示作为其值。最后，opacity können Sie die Deckkraft der Farbe bestimmen. Die Deckkraft ist optional und kann einen beliebigen Wert zwischen 0 und 1 haben.

Sie können verwenden two.makeRadialGradient(x, y, radius,stops, fx, fy) 以类似的方式定义径向渐变。在这种情况下，值 x 和 y 确定渐变的中心。 radius 参数指定渐变应延伸多远。您还可以将停止点数组传递给此方法，以设置渐变的颜色组成。参数 fx 和 fy sind optional, sie können verwendet werden, um die Fokusposition des Farbverlaufs anzugeben.

Schauen Sie sich einige Verlaufstypen und deren Code im CodePen unten an.

Denken Sie daran, x 和 y 渐变的位置是相对于它们尝试填充的形状的原点而言的。例如，应该从中心填充形状的径向渐变将始终将 x 和 y ist auf Null gesetzt.

Two.js ermöglicht Ihnen auch, Text auf den Zeichenbereich zu schreiben und ihn später entsprechend Ihren Anforderungen zu aktualisieren. Dies erfordert die Verwendung der Methode two.makeText(message, x, y, styles)。从参数名称可以明显看出 message 是您要写入的实际文本。参数 x 和 y 是将作为写入文本中心的点的坐标。 styles Das Argument ist ein Objekt, mit dem die Werte einer Reihe von Eigenschaften festgelegt werden können.

您可以使用样式设置字体 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 资源

Das obige ist der detaillierte Inhalt vonErste Schritte beim Erstellen von 2D-Grafiken mit Two.js: Ein Leitfaden für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!