Two.Shape и базовые методы фигур

В библиотеке Two.js объект Two.Shape представляет собой базовый строительный блок для всех геометрических фигур. Он позволяет создавать примитивные формы, такие как прямоугольники, круги, линии и сложные многоугольники, с возможностью их трансформации и анимации.

Основная структура создания фигуры выглядит следующим образом:

const shape = new Two.Shape(vertices, closed);
  • vertices — массив точек Two.Vector, задающих форму фигуры.
  • closed — логическое значение, указывающее, замкнута ли фигура (например, для многоугольников).

Пример создания простого треугольника:

const triangle = new Two.Shape([
  new Two.Anchor(0, 0),
  new Two.Anchor(50, 0),
  new Two.Anchor(25, 50)
], true);

Использование Two.Anchor и Two.Vector

Каждая фигура строится на основе точек, представленных объектами Two.Anchor или Two.Vector. Разница в том, что Two.Anchor поддерживает дополнительные свойства для кривых Безье:

  • handleIn и handleOut — векторы управления кривыми, определяющие кривизну сегмента.
  • x, y — координаты точки.

Для создания простой линии достаточно использовать Two.Vector:

const line = new Two.Shape([
  new Two.Vector(10, 10),
  new Two.Vector(100, 50)
]);

Базовые методы фигур

Добавление и удаление вершин

  • add(vertices…) — добавляет одну или несколько вершин в фигуру.
  • remove(vertex) — удаляет конкретную вершину из массива точек.

Пример добавления вершины:

triangle.add(new Two.Anchor(50, 50));

Удаление вершины:

triangle.remove(triangle.vertices[0]);

Трансформация фигуры

  • translation.set(x, y) — смещает фигуру относительно исходной позиции.
  • rotation — задаёт угол поворота фигуры в радианах.
  • scale — масштабирует фигуру. Поддерживает отдельные значения по осям scaleX, scaleY.

Пример смещения и вращения:

triangle.translation.set(100, 50);
triangle.rotation = Math.PI / 4;
triangle.scale = 2;

Работа с замкнутыми и незамкнутыми формами

Флаг closed управляет, замыкается ли контур:

const openShape = new Two.Shape([
  new Two.Vector(0, 0),
  new Two.Vector(50, 50),
  new Two.Vector(100, 0)
], false);

Для замкнутой формы линия между последней и первой точкой создается автоматически.

Стилизация фигур

Two.js позволяет задавать визуальные свойства фигуры через следующие параметры:

  • fill — цвет заливки.
  • stroke — цвет контура.
  • linewidth — толщина линии контура.
  • opacity — прозрачность фигуры.

Пример стилизации:

triangle.fill = '#FF0000';
triangle.stroke = '#000000';
triangle.linewidth = 3;
triangle.opacity = 0.8;

Можно комбинировать свойства, создавая сложные визуальные эффекты.

Примеры базовых фигур

Круг

Круг в Two.js создается через Two.Circle (наследник Two.Shape):

const circle = two.makeCircle(50, 50, 30);
circle.fill = '#00FF00';
circle.stroke = '#000000';
circle.linewidth = 2;

Прямоугольник

Прямоугольник создается через Two.Rectangle:

const rect = two.makeRectangle(100, 100, 80, 60);
rect.fill = '#0000FF';
rect.rotation = Math.PI / 6;

Линия

Линия — это частный случай фигуры с двумя вершинами:

const line = two.makeLine(0, 0, 200, 100);
line.stroke = '#FF00FF';
line.linewidth = 4;

Анимация вершин

Каждая вершина фигуры является объектом с координатами x и y, которые можно изменять динамически для создания анимации:

two.bind('update', function(frameCount) {
  triangle.vertices[1].x = 50 + 20 * Math.sin(frameCount * 0.05);
});
two.play();

Таким образом, Two.Shape предоставляет полную гибкость для построения и трансформации фигур, комбинируя простые методы работы с вершинами и стилизацией. Это фундамент для создания сложных анимаций и графических элементов в Two.js.

Оглавление