집 >웹 프론트엔드 >JS 튜토리얼 >Two.js로 2D 그래픽 만들기 시작하기: 초보자 가이드

Two.js로 2D 그래픽 만들기 시작하기: 초보자 가이드

王林원래의: 2023-09-01 08:41:051631검색

使用 Two.js 创建 2D 图形入门：初学者指南

Two.js는 코드를 사용하여 쉽게 2D 도형을 만들 수 있는 API입니다. 계속해서 JavaScript를 사용하여 모양을 만들고 애니메이션을 적용하는 방법을 배우게 됩니다.

Two.js는 렌더러에 구애받지 않으므로 동일한 API를 사용하여 Canvas, SVG 또는 WebGL을 사용하여 2D를 그릴 수 있습니다. 라이브러리에는 화면에 다양한 모양이 나타나는 방식이나 애니메이션이 적용되는 방식을 제어하는 데 사용할 수 있는 다양한 방법이 있습니다.

기본 모양 만들기
그룹의 작업 개체
그라디언트 정의 및 텍스트 작성
Two.js 프로젝트 만들기

설치

라이브러리의 비압축 버전 크기는 약 128KB인 반면, 압축 버전은 50KB입니다. 최신 버전을 사용하는 경우 사용자 정의 빌드를 사용하여 라이브러리 크기를 더 줄일 수 있습니다.

GitHub에서 라이브러리의 축소된 버전을 다운로드하거나 CDN 호스팅 버전에 직접 연결할 수 있습니다. 웹 페이지에 라이브러리를 추가한 후에는 다양한 모양이나 개체를 그리고 애니메이션을 적용할 수 있습니다.

기본 모양 만들기

먼저 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) 是第二个端点的坐标。该函数将返回一个 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 값을 즉시 변경할 수 있습니다.

으아악

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 은 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 图形非常容易。这篇文章的重点是帮助您快速入门，因此我们只介绍了基础知识。但是，您应该阅读官方文档以了解有关该库的更多信息！