Замыкание путей

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

Любой путь (Two.Path) в библиотеке может существовать в двух состояниях:

  • открытый путь — начальная и конечная точки не соединены
  • замкнутый путь — контур полностью закрыт

Замкнутые пути используются для построения фигур с заливкой, таких как многоугольники, круги и сложные формы.

Свойство closed

Ключевым инструментом управления замыканием является свойство:

path.closed = true;

Поведение:

  • true — путь замыкается, последняя вершина соединяется с первой
  • false — путь остаётся открытым

Пример:

const points = [
  new Two.Anchor(0, 0),
  new Two.Anchor(100, 0),
  new Two.Anchor(100, 100)
];

const path = new Two.Path(points, true);
two.add(path);

Во втором аргументе конструктора сразу передаётся значение closed.

Влияние на отрисовку

1. Заливка (fill)

Заливка применяется только к замкнутым путям:

path.fill = 'red';

Если путь не замкнут:

  • заливка игнорируется
  • отображается только обводка (stroke)

2. Обводка (stroke)

Обводка работает для любых путей, но визуально отличается:

  • открытый путь: линия без соединения концов
  • замкнутый путь: контур замыкается
path.stroke = 'black';
path.linewidth = 2;

3. Соединение сегментов

При замыкании автоматически добавляется дополнительный сегмент:

последняя точка → первая точка

Это влияет на:

  • длину пути
  • анимации
  • вычисление нормалей

Автоматическое замыкание в примитивах

Некоторые встроенные методы Two.js создают уже замкнутые фигуры:

two.makeRectangle(...)
two.makeCircle(...)
two.makePolygon(...)

Во всех этих случаях:

shape.closed === true

Ручное управление замыканием

Иногда требуется динамически менять состояние пути:

path.closed = false;
two.update();

path.closed = true;
two.update();

Это полезно:

  • при анимациях
  • при интерактивных редакторах
  • при построении фигур по шагам

Работа с вершинами (vertices)

Замыкание влияет на интерпретацию массива вершин:

path.vertices

Открытый путь:

A → B → C

Замкнутый путь:

A → B → C → A

При этом первая точка не дублируется в массиве, замыкание происходит логически.

Кривые и замыкание

Если используются кривые Безье:

anchor.controls.left
anchor.controls.right

замыкание влияет на:

  • интерполяцию между последней и первой точками
  • плавность перехода

Важно учитывать:

  • контрольные точки последней вершины соединяются с первой
  • возможны неожиданные изгибы при автоматическом замыкании

Параметр automatic

У путей есть свойство:

path.automatic = true;

Влияние:

  • автоматически пересчитывает кривые между вершинами
  • при замкнутом пути обеспечивает плавное соединение концов

При отключении:

path.automatic = false;

разработчик полностью контролирует геометрию.

Частые сценарии использования

1. Создание многоугольника

const polygon = new Two.Path(points, true);
polygon.fill = 'blue';

2. Ломаная линия (график)

const graph = new Two.Path(points, false);
graph.stroke = 'green';
graph.fill = 'none';

3. Переключение состояния

function toggle(path) {
  path.closed = !path.closed;
}

Ошибки и подводные камни

Отсутствие заливки

Причина:

path.closed = false;

Неожиданные линии

Если путь замкнут, появляется соединение:

конец → начало

Иногда это выглядит как «лишняя линия».

Артефакты кривых

При замыкании кривых:

  • возможны резкие изгибы
  • требуется ручная настройка контрольных точек

Производительность

Замкнутые пути:

  • требуют дополнительного сегмента
  • сложнее при вычислении кривых

Однако в большинстве случаев разница минимальна и не критична.

Взаимодействие с SVG

При экспорте в SVG:

  • closed = true → используется команда Z
  • closed = false → путь остаётся открытым

Пример:

M 0 0 L 100 0 L 100 100 Z

Z обозначает замыкание.

Практические рекомендации

  • Для фигур с заливкой всегда использовать замкнутые пути
  • Для графиков и линий — открытые
  • При работе с кривыми проверять поведение на стыке
  • Избегать лишнего замыкания при динамических построениях

Связь с анимацией

При анимации пути:

path.beginning = 0;
path.ending = 1;

замыкание влияет на:

  • направление отрисовки
  • финальную точку

Для замкнутых путей:

  • анимация может «перескочить» к началу

Внутреннее устройство

Two.js реализует замыкание через:

  • логическое соединение индексов массива вершин
  • добавление сегмента при рендере
  • использование флага closed в геометрии

Это означает:

  • нет дублирования данных
  • изменение свойства мгновенно влияет на отрисовку

Комбинирование с трансформациями

Замкнутые пути корректно работают с:

path.translation
path.rotation
path.scale

Но важно учитывать:

  • центр трансформации зависит от геометрии
  • замыкание влияет на вычисление границ (bounds)

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

const path = new Two.Path(vertices, closed, curved, manual);

Где:

  • vertices — массив точек
  • closed — замкнут ли путь
  • curved — используются ли кривые
  • manual — ручное управление

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

Оглавление