Unite и объединение

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

Синтаксис метода unite

var result = path1.unite(path2);
  • path1 — исходный объект типа Path или CompoundPath.
  • path2 — объект, который объединяется с path1.
  • result — новый объект Path, содержащий объединённую форму.

Важно понимать, что исходные объекты не изменяются; создаётся новый объект.

Пример объединения двух прямоугольников

var rect1 = new Path.Rectangle(new Point(50, 50), new Size(100, 100));
rect1.fillColor = 'red';

var rect2 = new Path.Rectangle(new Point(100, 100), new Size(100, 100));
rect2.fillColor = 'blue';

var combined = rect1.unite(rect2);
combined.fillColor = 'green';

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

Особенности работы с кривыми

Метод unite одинаково эффективно работает не только с прямыми линиями, но и с кривыми Безье (Path.Curve). При объединении кривых Paper.js автоматически рассчитывает новые опорные точки и сглаживает контур:

var circle = new Path.Circle(new Point(200, 200), 50);
circle.fillColor = 'yellow';

var ellipse = new Path.Ellipse(new Rectangle(180, 180, 100, 50));
ellipse.fillColor = 'orange';

var merged = circle.unite(ellipse);
merged.fillColor = 'purple';

Новый контур корректно объединяет круг и эллипс, формируя плавные переходы между кривыми.

Работа с CompoundPath

Если один из объектов является CompoundPath, объединение выполняется так же, как и с обычным Path. Это позволяет комбинировать сложные фигуры с отверстиями:

var outer = new Path.Rectangle(new Point(50, 50), new Size(200, 200));
var hole = new Path.Circle(new Point(150, 150), 50);
var compound = new CompoundPath({
    children: [outer, hole],
    fillColor: 'pink'
});

var rect = new Path.Rectangle(new Point(100, 100), new Size(150, 150));
var result = compound.unite(rect);
result.fillColor = 'cyan';

В данном случае CompoundPath с отверстием объединяется с прямоугольником, создавая один контур с правильно рассчитанными внутренними и внешними границами.

Влияние на порядок слоёв и z-index

При объединении объектов новый Path создаётся поверх всех исходных объектов. Если требуется сохранить порядок слоёв, следует вручную управлять методом insertAbove или insertBelow:

result.insertBelow(rect);

Это перемещает объединённый объект под прямоугольник, обеспечивая корректное наложение на холсте.

Применение fill и stroke

Метод unite копирует только геометрию. Все стили (fillColor, strokeColor, strokeWidth) необходимо задавать отдельно для нового объекта. Для оптимизации визуального объединения часто используют:

result.fillColor = 'black';
result.strokeColor = 'white';
result.strokeWidth = 2;

Это позволяет сохранить четкий контур объединённой формы.

Ограничения и особенности

  1. Объекты должны пересекаться или быть близко расположены — если объекты находятся далеко друг от друга, unite создаёт объект, охватывающий обе фигуры, но без реального пересечения.
  2. Многоугольники с большим количеством вершин могут приводить к сложным вычислениям и замедлять рендеринг.
  3. Не поддерживаются группы напрямую — для объединения нескольких объектов сначала нужно превратить их в CompoundPath.

Комбинирование нескольких фигур

Для объединения более двух объектов применяют цепочку unite:

var shape1 = new Path.Circle(new Point(50, 50), 30);
var shape2 = new Path.Circle(new Point(80, 50), 30);
var shape3 = new Path.Circle(new Point(65, 80), 30);

var combined = shape1.unite(shape2).unite(shape3);
combined.fillColor = 'magenta';

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

Рекомендации по использованию

  • Для простых геометрических форм unite выполняется быстро и стабильно.
  • Для сложных кривых и компаунд-путей рекомендуется предварительно упростить контуры с помощью path.simplify().
  • Всегда задавать стили после объединения, чтобы избежать конфликтов с исходными цветами.

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

Оглавление