Bermula Mencipta Grafik 2D dengan Two.js: Panduan Pemula

Two.js ialah API yang membolehkan anda membuat bentuk 2D dengan mudah menggunakan kod. Meneruskan bersama, anda akan belajar cara mencipta dan menghidupkan bentuk dengan JavaScript.

Two.js ialah pemapar-agnostik, jadi anda boleh bergantung pada API yang sama untuk melukis 2D menggunakan Kanvas, SVG atau WebGL. Perpustakaan mempunyai banyak kaedah yang boleh digunakan untuk mengawal cara bentuk berbeza muncul pada skrin atau cara ia dianimasikan.

• Buat bentuk asas
• Objek dalam kumpulan operasi
• Tentukan kecerunan dan tulis teks
• Buat projek Two.js

Pasang

Versi pustaka yang tidak dimampatkan bersaiz lebih kurang 128 KB, manakala versi dimampatkan ialah 50 KB. Jika anda menggunakan versi terkini, anda boleh menggunakan binaan tersuai untuk mengurangkan lagi saiz pustaka.

Anda boleh memuat turun versi mini perpustakaan daripada GitHub atau memaut terus ke versi yang dihoskan CDN. Sebaik sahaja anda telah menambahkan pustaka pada halaman web anda, anda boleh mula melukis dan menganimasikan bentuk atau objek yang berbeza.

Cipta bentuk asas

Pertama, anda perlu memberitahu Two.js elemen yang anda ingin lukis 2D dan menghidupkan bentuk. Anda boleh menetapkan beberapa parameter dengan menghantarnya kepada pembina Two. 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

Gunakan atribut type untuk menetapkan jenis pemapar. Anda boleh menentukan nilai seperti svg, webgl, kanvas, dsb. . type ditetapkan kepada svg secara lalai. Lebar dan ketinggian ruang lukisan boleh ditentukan menggunakan parameter width dan height. Anda juga boleh menggunakan parameter skrin penuh untuk menetapkan ruang lukisan kepada keseluruhan skrin yang tersedia. Apabila skrin penuh ditetapkan kepada benar, nilai width dan height akan terabai. #🎜🎜# #🎜🎜#Akhir sekali, anda boleh memberitahu Two.js untuk memulakan animasi secara automatik dengan bantuan parameter boolean autostart. #🎜🎜# #🎜🎜#Selepas menghantar semua parameter yang diperlukan kepada pembina, anda boleh mula melukis garisan, segi empat tepat, bulatan dan bujur. #🎜🎜# #🎜🎜#Anda boleh menggunakan two.makeLine(x1, y1, x2, y2) untuk melukis garisan. Di sini, (x1, y1) ialah koordinat titik akhir pertama dan (x2, y2) ialah koordinat bagi koordinat titik akhir kedua. Fungsi ini akan mengembalikan objek Two.Line yang boleh disimpan dalam pembolehubah untuk manipulasi selanjutnya kemudian. #🎜🎜# #🎜🎜#Dengan cara yang sama, anda boleh menggunakan two.makeRectangle(x, y, width, height) dan two.makeRoundedRectangle(x, y, width, height, radius) masing-masing Melukis segi empat tepat biasa dan segi empat tepat bulat. Ingat bahawa x dan y menentukan pusat segi empat tepat, bukan koordinat penjuru kiri sebelah atas segi empat tepat seperti kebanyakan perpustakaan lain lakukan. Parameter width dan height akan menentukan saiz segi empat tepat. Parameter radius digunakan untuk menentukan nilai jejari fillet. #🎜🎜# #🎜🎜#Anda juga boleh menggunakan two.makeCircle(x, y, radius) dan two.makeEllipse(x, y, width, height) masing-masing untuk memaparkan pada laman web Bulat dan bujur. Sama seperti segi empat tepat, parameter x dan y menentukan pusat bulatan atau elips. Jika ia berbentuk bujur, menetapkan lebar dan height kepada nilai yang sama akan menjadikannya bulat. #🎜🎜# #🎜🎜#Arrows juga boleh dibuat dengan mudah dengan bantuan kaedah two.makeArrow(x1, y1, x2, y2, size). Nilai x1 dan y1 menentukan kedudukan ekor anak panah. Nilai x2 dan y2 menentukan kedudukan anak panah. Parameter kelima menentukan saiz anak panah. #🎜🎜# #🎜🎜#Terdapat kaedah yang dipanggil two.makePolygon(x, y, radius,sides) yang boleh anda gunakan untuk mencipta poligon biasa. Nilai x dan y menentukan pusat poligon. radius menentukan jarak dari bucu poligon ke tengah, manakala sisi menentukan bilangan sisi poligon. #🎜🎜# #🎜🎜##🎜🎜# #🎜🎜# Objek dalam kumpulan aksi#🎜🎜# #🎜🎜#Kaedah berguna dalam Two.js yang sering anda gunakan ialah two.makeGroup(objek). Anda boleh lulus senarai objek yang berbeza, atau tatasusunan objek, laluan atau kumpulan sebagai parameter kepada kaedah ini. Ia juga akan mengembalikan objek Two.Group. Selepas anda membuat kumpulan, anda boleh menggunakan sifat yang disediakan oleh kumpulan itu untuk beroperasi pada semua subkumpulannya sekaligus. #🎜🎜#

Sifat Stroke dan fill boleh digunakan untuk menetapkan strok dan warna isian bagi semua kanak-kanak dalam kumpulan. Mereka akan menerima semua borang yang sah yang boleh mewakili warna dalam CSS. Ini bermakna anda bebas menggunakan perwakilan RGB, HSL atau heksadesimal. Anda juga boleh hanya menggunakan nama warna, seperti oren, merah atau biru code>. Begitu juga, anda boleh menetapkan nilai semua sifat lain, seperti linewidth, opacity, miter dan cap. Anda boleh menggunakan kaedah noFill() dan noStroke() untuk mengalih keluar isian dan pukulan semua kanak-kanak dalam kumpulan. 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

Anda juga boleh menggunakan transformasi fizikal lain seperti skala, giliran dan terjemahan. Transformasi ini akan digunakan pada objek individu. Objek baharu boleh ditambah dengan mudah pada kumpulan dan dialih keluar menggunakan kaedah seperti add() dan remove(). 🎜 🎜Berikut ialah contoh mencipta kira-kira 40 segi empat tepat berbeza di lokasi rawak. Segi empat tepat kemudiannya dikumpulkan supaya kita boleh menukar nilai fill, Stroke dan linewidth dengan segera. 🎜

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;
}

🎜🎜 🎜Anda boleh mengklik mana-mana bahagian dalam div untuk menukar kedudukan segi empat tepat. Kami sebenarnya akan menetapkan kedudukan kumpulan ini. Oleh kerana segi empat tepat adalah sebahagian daripada kumpulan, ia bergerak secara automatik. 🎜 🎜Untuk latihan, anda harus cuba mengubah suai kod dan bahagikan segi empat tepat kepada dua kumpulan yang sama. Gunakan nilai warna linewidth dan lines yang berbeza pada setiap satu untuk mencipta karya seni geometri unik anda sendiri. 🎜

Tentukan kecerunan dan tulis teks

🎜Anda boleh menentukan kecerunan linear dan jejari dalam Two.js. Mentakrifkan kecerunan tidak bermakna ia akan dipaparkan secara automatik pada skrin, sebaliknya menetapkan nilai fill atau Stroke untuk pelbagai objek. Ia boleh digunakan apabila. 🎜 🎜Anda boleh menggunakan two.makeLinearGradient(x1, y1, x2, y2,stop) untuk mentakrifkan kecerunan linear. Nilai x1 dan y1 menentukan koordinat di mana kecerunan bermula. Begitu juga, nilai x2 dan y2 menentukan koordinat di mana kecerunan itu berakhir. Parameter stop ialah tatasusunan kejadian Two.Stop. Mereka mentakrifkan warna setiap bahagian tatasusunan dan di mana setiap warna beralih ke bahagian seterusnya. Ia boleh ditakrifkan menggunakan Two.Stop baharu(offset, color, opacity), dengan offset menentukan titik pada kecerunan di mana warna tertentu mesti diberikan sepenuhnya. Parameter color menentukan warna kecerunan pada titik tertentu. Anda boleh menggunakan mana-mana perwakilan warna CSS yang sah sebagai nilainya. Akhir sekali, parameter opacity menentukan kelegapan warna. Kelegapan adalah pilihan dan boleh menjadi sebarang nilai antara 0 dan 1. 🎜 🎜Anda boleh mentakrifkan kecerunan jejari dengan cara yang sama menggunakan two.makeRadialGradient(x, y, radius, stops, fx, fy). Dalam kes ini, nilai x dan y menentukan pusat kecerunan. Parameter radius menentukan sejauh mana kecerunan harus dilanjutkan. Anda juga boleh menghantar tatasusunan titik henti kepada kaedah ini untuk menetapkan komposisi warna kecerunan. Parameter fx dan fy adalah pilihan dan boleh digunakan untuk menentukan kedudukan fokus kecerunan. 🎜 🎜Lihat beberapa jenis kecerunan dan kodnya dalam CodePen di bawah. 🎜 🎜🎜 🎜Ingat bahawa kecerunan x dan y diletakkan secara relatif kepada asal bentuk yang cuba diisi. Contohnya, kecerunan jejari yang sepatutnya mengisi bentuk dari tengah akan sentiasa menetapkan x dan y kepada sifar. 🎜 🎜Two.js juga membolehkan anda menulis teks pada kawasan lukisan dan mengemas kininya kemudian mengikut keperluan anda. Ini memerlukan penggunaan kaedah two.makeText(message, x, y, styles). Jelas daripada nama parameter bahawa message ialah teks sebenar yang ingin anda tulis. Parameter x dan y ialah koordinat titik yang akan menjadi pusat teks bertulis. Parameter styles ialah objek yang boleh digunakan untuk menetapkan nilai beberapa sifat. 🎜

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

Atas ialah kandungan terperinci Bermula Mencipta Grafik 2D dengan Two.js: Panduan Pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!