Unite, subtract, intersect, exclude

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

Метод unite()

Метод unite() позволяет объединить два объекта в один, сохраняя все внешние контуры. В результате создается новая фигура, представляющая совокупность всех областей исходных форм.

var circle = new Path.Circle({
    center: [100, 100],
    radius: 50,
    fillColor: 'red'
});

var rectangle = new Path.Rectangle({
    point: [80, 80],
    size: [100, 100],
    fillColor: 'blue'
});

var combined = circle.unite(rectangle);
combined.fillColor = 'green';

Особенности метода:

  • Исходные объекты остаются без изменений.
  • Возвращается новый объект типа Path.
  • Полезно для создания сложных силуэтов без ручного рисования каждой линии.

Метод subtract()

Метод subtract() выполняет вычитание одной фигуры из другой. Итоговая фигура сохраняет области первой формы, не перекрытые второй.

var shape1 = new Path.Rectangle({
    point: [50, 50],
    size: [150, 100],
    fillColor: 'orange'
});

var shape2 = new Path.Circle({
    center: [120, 100],
    radius: 50,
    fillColor: 'purple'
});

var result = shape1.subtract(shape2);
result.fillColor = 'yellow';

Ключевые моменты:

  • Форма, которая вычитается, исчезает из результата.
  • Если фигуры не пересекаются, результат совпадает с исходной первой фигурой.
  • Можно применять последовательные вычитания для сложных конструкций.

Метод intersect()

Метод intersect() создает новую фигуру, которая представляет область пересечения двух объектов. Это позволяет получить точное перекрытие форм.

var rect = new Path.Rectangle({
    point: [50, 50],
    size: [150, 100],
    fillColor: 'lightblue'
});

var circle = new Path.Circle({
    center: [120, 100],
    radius: 60,
    fillColor: 'pink'
});

var intersection = rect.intersect(circle);
intersection.fillColor = 'purple';

Особенности использования:

  • Если формы не пересекаются, возвращается пустой Path.
  • Часто используется для масок и вырезов в сложных композициях.
  • Поддерживается работа с CompoundPath для объединения нескольких пересекающихся объектов.

Метод exclude()

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

var star = new Path.Star({
    center: [150, 150],
    points: 5,
    radius1: 60,
    radius2: 30,
    fillColor: 'red'
});

var circle = new Path.Circle({
    center: [150, 150],
    radius: 50,
    fillColor: 'blue'
});

var xorShape = star.exclude(circle);
xorShape.fillColor = 'green';

Особенности метода:

  • Полезен для создания “дыр” или эффектов наложения.
  • Сохраняет только уникальные области обеих форм.
  • Работает как с простыми, так и с составными фигурами.

Работа с CompoundPath

Для более сложных форм Paper.js использует CompoundPath. Булевые операции можно применять к составным объектам так же, как к обычным Path.

var circle1 = new Path.Circle([100, 100], 50);
var circle2 = new Path.Circle([130, 100], 50);
var compound = new CompoundPath({
    children: [circle1, circle2],
    fillColor: 'orange'
});

var rectangle = new Path.Rectangle([90, 90], [80, 60]);
var finalShape = compound.subtract(rectangle);
finalShape.fillColor = 'blue';

Преимущества использования CompoundPath:

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

Важные нюансы

  1. Булевые операции возвращают новые объекты, исходные остаются неизменными.
  2. Фигуры должны быть замкнутыми (closed), иначе результат может быть непредсказуемым.
  3. Работа с кривыми и сложными путями иногда приводит к небольшим артефактам, поэтому рекомендуется проверять результат визуально.
  4. Можно комбинировать операции: сначала unite(), затем subtract() и intersect() для сложных эффектов.

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

  • Создание логотипов и иконок с пересекающимися элементами.
  • Генерация масок для анимаций и визуальных эффектов.
  • Разработка векторных иллюстраций и UI-элементов с точными вырезами.

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

Оглавление