Two.js で 2D グラフィックスを作成する入門: 初心者ガイド

Two.js は、コードを使用して 2D 形状を簡単に作成できる API です。続けて、JavaScript を使用して図形を作成およびアニメーション化する方法を学習します。

Two.js はレンダラーに依存しないため、同じ API を利用して Canvas、SVG、または WebGL を使用して 2D を描画できます。ライブラリには、さまざまな図形が画面上にどのように表示されるか、またはどのようにアニメーション化されるかを制御するために使用できるメソッドが多数あります。

• 基本的な形状を作成する
• 操作グループ内のオブジェクト
• グラデーションを定義してテキストを書く
• Two.js プロジェクトの作成

インストール＃＃＃

ライブラリの非圧縮バージョンのサイズは約 128 KB ですが、圧縮バージョンのサイズは 50 KB です。最新バージョンを使用している場合は、カスタム ビルドを使用してライブラリのサイズをさらに削減できます。

ライブラリの縮小バージョンを GitHub からダウンロードするか、CDN でホストされているバージョンに直接リンクできます。ライブラリを Web ページに追加したら、さまざまな図形やオブジェクトの描画やアニメーション化を開始できます。

基本的な形状を作成する

まず、2D を描画し、形状をアニメーション化したい要素を Two.js に伝える必要があります。いくつかのパラメーターを

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) は 2 番目の端点の座標です。この関数は、後でさらに操作するために変数に保存できる Two.Line オブジェクトを返します。

同様の方法で、

two.makeRectangle(x, y, width, height) と two.makeRoundedRectangle(x, y, width, height, radius)## をそれぞれ使用できます。 # 普通の長方形と角丸長方形を描画します。 #xx と 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 の値は矢印の位置を決定します。 5 番目のパラメータは矢印のサイズを決定します。 正多角形を作成するために使用できる two.makePolygon(x, y, radius,sides)

というメソッドがあります。 x と y の値は多角形の中心を決定します。

radius は多角形の頂点から中心までの距離を決定し、sides は多角形の辺の数を指定します。

Two.js でよく使用する便利なメソッドは、

two.makeGroup(objects)

です。さまざまなオブジェクトのリスト、またはオブジェクト、パス、またはグループの配列をパラメータとしてこのメ​​ソッドに渡すことができます。また、

Two.Group オブジェクトも返します。グループを作成した後、グループが提供するプロパティを使用して、そのすべてのサブグループを一度に操作できます。

Stroke プロパティと fill プロパティを使用して、グループ内のすべての子のストロークと塗りつぶしの色を設定できます。これらは、CSS で色を表現できるすべての有効な形式を受け入れます。これは、RGB、HSL、または 16 進表現を自由に使用できることを意味します。 orange、red、blue など、単純に色の名前を使用することもできます。同様に、linewidth、opacity、miter、cap などの他のすべてのプロパティの値を設定できます。 noFill() メソッドと noStroke() メソッドを使用すると、グループ内のすべての子の塗りつぶしとストロークを削除できます。

scale、rotation、translation などの他の物理的な変換を適用することもできます。これらの変換は個々のオブジェクトに適用されます。 add() や remove() などのメソッドを使用して、新しいオブジェクトをグループに簡単に追加したり、削除したりできます。

これは、ランダムな場所に約 40 個の異なる長方形を作成する例です。次に、四角形がグループ化され、fill、Stroke、linewidth の値をすぐに変更できるようになります。

リーリー

div 内の任意の場所をクリックして、四角形の位置を変更できます。実際にこのグループの位置を設定していきます。長方形はグループの一部であるため、自動的に移動します。

練習のために、コードを変更して四角形を 2 つの等しいグループに分割してみてください。それぞれに異なる 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 のグラデーションは、塗りつぶそうとしている形状の原点を基準にして配置されることに注意してください。たとえば、中心からシェイプを塗りつぶす放射状のグラデーションでは、#xx と y が常に 0 に設定されます。

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 中国語 Web サイトの他の関連記事を参照してください。