Two.Path и методы путей

Two.Path — это базовый класс в библиотеке Two.js, предназначенный для создания и управления кривыми, линиями и сложными фигурами. Он позволяет описывать последовательности точек и применять к ним свойства визуализации, такие как толщина линии, цвет обводки, цвет заливки, закругления и соединения.

Основная структура Two.Path состоит из трёх элементов:

  • vertices — массив объектов Two.Vector, определяющий точки пути. Каждая вершина содержит координаты x и y, а также дополнительные свойства для кривых Безье.
  • closed — булевое значение, определяющее замкнутость пути. Если true, первая и последняя вершины соединяются.
  • curved — булевое значение, определяющее, будут ли сегменты кривыми или прямыми линиями.
const path = new Two.Path([
  new Two.Vector(0, 0),
  new Two.Vector(50, 50),
  new Two.Vector(100, 0)
], true, false);

В этом примере создается замкнутый путь с прямыми сегментами.

Методы управления вершинами

add() — добавляет новые вершины в путь. Можно добавлять одиночные точки или массивы Two.Vector.

path.add(new Two.Vector(150, 50));
path.add([new Two.Vector(200, 100), new Two.Vector(250, 50)]);

remove() — удаляет вершины по ссылке или индексу.

path.remove(path.vertices[0]);
path.removeAt(1);

clear() — очищает весь массив вершин, оставляя путь пустым, но сам объект сохраняется.

path.clear();

clone() — создает полную копию пути, включая все вершины и свойства.

const copy = path.clone();

Настройка визуальных свойств

stroke — цвет обводки. Принимает строку в любом формате CSS ('#ff0000', 'rgba(255,0,0,0.5)').

linewidth — толщина линии обводки в пикселях.

fill — цвет заливки пути. Если null, заливка отсутствует.

opacity — прозрачность всего пути от 0 до 1.

path.stroke = '#3498db';
path.linewidth = 4;
path.fill = '#ecf0f1';
path.opacity = 0.8;

Дополнительно можно управлять закруглениями углов (cap) и соединений сегментов (join):

path.cap = 'round'; // butt | round | square
path.join = 'bevel'; // miter | round | bevel

Кривые и сегменты

Для создания плавных кривых используется свойство curved:

  • curved = true превращает путь в набор кривых Безье второго порядка.
  • Каждая вершина получает опциональные свойства controls для управления формой кривой.
path.curved = true;
path.vertices[1].controls.left.set(-20, 0);
path.vertices[1].controls.right.set(20, 0);

controls.left и controls.right задают направление кривой на входе и выходе из вершины, что позволяет формировать плавные изгибы.

Основные методы рендеринга и трансформаций

translate(x, y) — смещает весь путь относительно текущего положения.

path.translate(50, 50);

rotate(angle, [ox, oy]) — вращает путь на заданный угол в радианах вокруг опорной точки (ox, oy).

path.rotate(Math.PI / 4, 100, 100);

scale(sx, sy) — масштабирует путь по осям x и y. Если sy не указан, используется sx.

path.scale(1.5);

recalc() — пересчитывает внутренние данные пути, необходимо после программного изменения вершин или кривых.

Применение методов для сложных форм

  • moveTo(x, y) — перемещает начальную точку без добавления линии.
  • lineTo(x, y) — добавляет сегмент к текущей вершине.
  • curveTo(cx, cy, x, y) — добавляет кривую к текущей вершине с контрольной точкой (cx, cy) и конечной (x, y).
const path2 = new Two.Path([], false, false);
path2.moveTo(0, 0);
path2.lineTo(50, 50);
path2.curveTo(75, 75, 100, 0);

Эти методы позволяют строить динамические пути и анимации, изменяя точки и кривизну на лету.

Итоговая структура пути

Каждый объект Two.Path можно рассматривать как комбинацию:

  • Массива вершин (vertices)
  • Флагов состояния (closed, curved)
  • Визуальных стилей (stroke, fill, linewidth, opacity, cap, join)
  • Методов управления (add, remove, clear, clone, translate, rotate, scale, recalc, moveTo, lineTo, curveTo)

Эта структура делает Two.Path универсальным инструментом для создания как простых линий, так и сложных динамических фигур в Two.js.

Оглавление