CompoundPath и булевы операции

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

Создание CompoundPath выполняется через конструктор:

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

var path2 = new Path.Rectangle({
    point: [30, 30],
    size: [60, 60],
    fillColor: 'blue'
});

var compound = new CompoundPath({
    children: [path1, path2],
    fillColor: 'green'
});

Важные моменты:

  • Свойство children содержит массив объектов Path.
  • Цвет заливки (fillColor) задается для всей композиции.
  • Отдельные пути в CompoundPath могут быть вычтены или добавлены с помощью булевых операций.

Методы CompoundPath позволяют управлять отдельными контурами:

compound.addChild(new Path.Ellipse({
    point: [100, 100],
    size: [80, 40]
}));

compound.removeChildren(0, 1); // Удаляет первые два пути

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

Булевы операции

Paper.js поддерживает четыре базовые булевы операции для объектов Path и CompoundPath:

  1. unite — объединение двух фигур в одну, объединяя области пересечения.
  2. intersect — пересечение фигур, оставляя только общую область.
  3. subtract — вычитание второй фигуры из первой.
  4. exclude — исключение области пересечения, оставляя только непересекающиеся части.

Синтаксис:

var result = path1.unite(path2); // Объединение path1 и path2
result.fillColor = 'purple';

Особенности применения:

  • Результатом всегда является новый объект Path или CompoundPath.
  • Исходные объекты остаются неизменными.
  • Для сложных операций часто используется комбинация нескольких булевых операций.

Пример сложной композиции:

var circle = new Path.Circle([100, 100], 50);
var square = new Path.Rectangle([75, 75], [100, 100]);

var unionPath = circle.unite(square);
var hole = new Path.Circle([100, 100], 20);
var finalShape = unionPath.subtract(hole);
finalShape.fillColor = 'orange';

Управление направлением контуров

При работе с CompoundPath важна ориентация контура:

  • Контур по часовой стрелке считается внешним.
  • Контур против часовой стрелки создаёт дыру при заполнении.

Метод reverse() меняет направление пути:

var inner = new Path.Circle([100, 100], 30);
inner.reverse(); // Сделает контур "дыркой"
compound.addChild(inner);

Неверное направление приводит к неправильной заливке при объединении фигур.

Оптимизация и упрощение

Для сложных булевых операций стоит использовать метод simplify():

var complex = path1.unite(path2);
complex.simplify(2); // Уменьшает количество сегментов, сохраняя форму

Это полезно при анимациях и динамическом создании фигур, где большое количество точек может замедлять рендеринг.

Применение трансформаций к CompoundPath

CompoundPath поддерживает все стандартные трансформации Paper.js:

compound.rotate(45);        // Поворот всей композиции
compound.scale(1.5, 1.5);   // Масштабирование
compound.translate([50, 50]); // Сдвиг

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

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

Анимации CompoundPath особенно эффективны при создании эффектов вырезов, соединений и масок:

view.onFr ame = function(event) {
    compound.rotate(1); // Постоянный вращающийся CompoundPath
};

Использование булевых операций совместно с анимацией позволяет создавать динамические интерактивные фигуры с плавными переходами между состояниями.

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

Оглавление