使用 Two.js 建立 2D 圖形入門：初學者指南

Two.js 是一個 API，可讓您輕鬆使用程式碼建立 2D 形狀。繼續學習，您將學習如何透過 JavaScript 建立形狀並為其設定動畫。

Two.js 與渲染器無關，因此您可以依賴相同的 API 使用 Canvas、SVG 或 WebGL 繪製 2D。該庫有很多方法，可用於控制不同形狀在螢幕上的顯示方式或它們的動畫方式。

• 建立基本形狀
• 操作組中的物件
• 定義漸層和寫文字
• 建立 Two.js 專案

安裝

該函式庫的未壓縮版本大小約為 128 KB，而壓縮版本為 50 KB。如果您使用的是最新版本，則可以使用自訂建置進一步減小庫的大小。

您可以從 GitHub 下載該庫的縮小版本，也可以直接連結到 CDN 託管版本。將庫新增至網頁後，您就可以開始繪製不同的形狀或物件並為其設定動畫。

建立基本形狀

首先，您需要告訴 Two.js 您想要在其上繪製 2D 並為形狀設定動畫的元素。您可以將一些參數傳遞給 Two 建構函式來進行設定。

使用 type 屬性設定渲染器類型。您可以指定一個值，例如 svg、webgl、canvas 等。 type 設定為 svg。繪圖空間的寬度和高度可以使用 width 和 height 參數指定。您也可以使用 fullscreen 參數將繪圖空間設定為整個可用畫面。當 fullscreen 設定為 true 時，width 和 height 的值將被忽略。

最後，您可以藉助布林型 autostart 參數告訴 Two.js 自動啟動動畫。

將所有所需參數傳遞給建構函式後，您可以開始繪製直線、矩形、圓形和橢圓形。

您可以使用 two.makeLine(x1, y1, x2, y2) 繪製一條線。這裡，(x1, y1) 是第一個端點的座標，(x2, y2) 是第二個端點的座標。該函數將傳回一個 Two.Line 對象，該對象可以儲存在變數中以便稍後進行進一步操作。

以類似的方式，您可以分別使用two.makeRectangle(x, y, width, height) 和two.makeRoundedRectangle(x, y, width, height, radius) 繪製普通矩形和圓角矩形。請記住， x 和 y 確定矩形的中心，而不是像許多其他庫那樣確定矩形的左上角座標。 width 和 height 參數將決定矩形的大小。 radius 參數用來指定圓角的半徑值。

您也可以分別使用two.makeCircle(x, y, radius) 和two.makeEllipse(x, y, width, height) 在網頁上渲染圓形和橢圓形。就像矩形一樣， x 和 y 參數指定圓或橢圓的中心。如果是橢圓形，則將 width 和 height 設為相同的值會將其呈現為圓形。

借助 two.makeArrow(x1, y1, x2, y2, size) 方法也可以輕鬆建立箭頭。 x1 和 y1 值決定箭頭尾部的位置。 x2 和 y2 值決定箭頭的位置。第五個參數決定箭頭的大小。

有一個名為 two.makePolygon(x, y, radius,sides) 的方法，您可以使用它來建立正多邊形。 x 和 y 值決定多邊形的中心。 radius 決定多邊形頂點到中心的距離，而 sides 指定多邊形的邊數。

操作組中的物件

Two.js 中您經常使用的一個有用方法是 two.makeGroup(objects)。您可以傳遞不同物件的列表，也可以傳遞物件、路徑或群組的陣列作為此方法的參數。它還將傳回 Two.Group 物件。建立群組後，您可以使用該群組提供的屬性一次操作其所有子群組。

Stroke 和 fill 屬性可用來設定群組中所有子項目的描邊和填滿顏色。他們將接受所有可以在 CSS 中表示顏色的有效形式。這意味著您可以自由使用 RGB、HSL 或十六進位表示法。您也可以簡單地使用顏色的名稱，例如 orange、red 或 blue。同樣，您可以設定所有其他屬性的值，例如 linewidth、opacity、miter 和 cap。可以使用 noFill() 和 noStroke() 方法刪除群組中所有子項目的填充和描邊。

您也可以套用其他實體變換，例如 scale、rotation 和 translation。這些變換將應用於單一物件。使用 add() 和 remove() 等方法可以輕鬆地將新物件新增至群組並刪除它們。

下面是一個在隨機位置創建大約 40 個不同矩形的範例。然後將矩形分組，以便我們可以立即更改它們的 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();

您可以點選 div 內的任意位置來變更矩形的位置。我們實際上將設定該組的位置。由於矩形是該組的一部分，因此它們會自動移動。

為了練習，您應該嘗試修改程式碼並將矩形分成相等的兩個群組。對每個顏色值套用不同的 linewidth 和 lines 顏色值，以創建您自己獨特的幾何藝術作品。

定義漸層和編寫文字

您可以在 Two.js 中定義線性和徑向漸層。定義漸變並不意味著它會自動渲染在螢幕上，而是在設定各種物件的 fill 或 Stroke 值時可以使用它。

您可以使用 two.makeLinearGradient(x1, y1, x2, y2,stops) 定義線性漸變。值 x1 和 y1 決定漸變開始的座標。同樣，值 x2 和 y2 決定漸變結束的座標。 stops 參數是 Two.Stop 實例的陣列。它們定義了數組每個部分的顏色以及每種顏色過渡到下一種顏色的位置。它們可以使用 new Two.Stop(offset, color, opacity) 來定義，其中 offset 決定漸層上必須完全渲染該特定顏色的點。 color 參數決定特定點處漸層的顏色。您可以使用任何有效的 CSS 顏色表示作為其值。最後，opacity 參數決定顏色的不透明度。不透明度是可選的，它可以是 0 到 1 之間的任何值。

您可以使用 two.makeRadialGradient(x, y, radius,stops, fx, fy) 以類似的方式定義徑向漸層。在這種情況下，值 x 和 y 決定漸層的中心。 radius 參數指定漸變應延伸多遠。您也可以將停止點數組傳遞給此方法，以設定漸層的顏色組成。參數 fx 和 fy 是可選的，它們可用來指定漸變的焦點位置。

在下面的 CodePen 中查看一些漸變類型及其程式碼。

請記住，x 和 y 漸層的位置是相對於它們嘗試填滿的形狀的原點而言的。例如，應該從中心填充形狀的徑向漸變將始終將 x 和 y 設為零。

Two.js 還允許您在繪圖區域上書寫文本，並在以後根據您的需求進行更新。這需要使用方法 two.makeText(message, x, y, styles)。從參數名稱可以明顯看出 message 是您要寫入的實際文字。參數 x 和 y 是將作為寫入文字中心的點的座標。 styles 參數是一個對象，可用來設定大量屬性的值。

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

以上是使用 Two.js 建立 2D 圖形入門：初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！