Объединение путей

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

Объект Path и его свойства

Two.Path представляет собой последовательность векторов, соединённых линиями или кривыми. Основные свойства:

  • vertices – массив вершин (Two.Anchor), определяющих контур;
  • stroke – цвет обводки;
  • fill – цвет заливки;
  • linewidth – толщина линии;
  • closed – булевое значение, указывающее, замкнут путь или нет.

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

const path = new Two.Path([
  new Two.Anchor(0, 0),
  new Two.Anchor(50, 0),
  new Two.Anchor(50, 50),
  new Two.Anchor(0, 50)
], true); // true – путь замкнут
path.fill = '#FF8000';
path.stroke = '#000000';
two.add(path);

Группы (Group) как инструмент объединения

Two.Group позволяет объединять несколько объектов, включая пути, в одну логическую единицу. Все трансформации, применяемые к группе, затрагивают все её элементы.

Пример создания группы из двух путей:

const circle = two.makeCircle(50, 50, 30);
const rectangle = two.makeRectangle(50, 50, 60, 40);

const group = two.makeGroup(circle, rectangle);
group.translation.set(100, 100); // перемещает всю группу
group.rotation = Math.PI / 4; // поворот всей группы

Ключевые моменты при работе с группами:

  • nested groups – группы могут содержать другие группы, создавая иерархию объектов;
  • propagation of transformations – все трансформации группы автоматически применяются ко всем её дочерним элементам;
  • managing visibility – изменение видимости группы скрывает или показывает все объекты одновременно.

CompoundPath для объединения контуров

Для объединения нескольких контуров в один путь используется Two.CompoundPath. Этот объект создаёт единый путь, содержащий несколько под-путей.

const path1 = two.makeRectangle(0, 0, 50, 50);
const path2 = two.makeCircle(25, 25, 20);

const compound = new Two.CompoundPath(path1, path2);
compound.fill = '#00AAFF';
compound.stroke = '#000000';
two.add(compound);

Особенности CompoundPath:

  • multiple sub-paths – каждый вложенный путь может иметь свои свойства, но при рендеринге учитывается общий fill и stroke объекта;
  • boolean operations – объединение, пересечение и вычитание контуров для создания сложных форм (требуется библиотека типа Two.Path.boolean для сложных операций);
  • dynamic updates – добавление и удаление под-путей в рантайме автоматически обновляет визуализацию.

Методы объединения и трансформации

Two.js предоставляет гибкие методы для работы с объединёнными путями:

  • add() / remove() – добавление объектов в группу или составной путь;
  • clone() – создание копий сложных путей;
  • translation.set(x, y), rotation, scale – применяются к группе или составному пути;
  • vertices.push(anchor) – добавление новых точек к существующему пути;
  • vertices.splice(index, count) – удаление точек из пути для изменения его формы.

Пример динамического объединения:

const line = new Two.Path([new Two.Anchor(0, 0), new Two.Anchor(100, 0)]);
const circle = two.makeCircle(50, 0, 25);

const compoundDynamic = new Two.CompoundPath(line);
compoundDynamic.add(circle);
two.add(compoundDynamic);

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

Объединение путей позволяет:

  • Создавать логические структуры из нескольких элементов, например сложные логотипы;
  • Управлять анимацией группы объектов как единым целым;
  • Создавать интерактивные элементы с изменяемыми контурами;
  • Применять эффекты трансформации и маскирования на нескольких объектах одновременно.

С помощью сочетания Group и CompoundPath можно строить как визуально простые, так и сложные динамические графические объекты, управляя ими централизованно через трансформации и свойства рендеринга.

Оглавление