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

В SVG.js объекты <path> создаются через метод draw.path(). Путь задаётся строкой в формате SVG Path Data, например:

const draw = SVG().addTo('body').size(600, 400);
const path = draw.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80');
  • M x y — перемещение пера в точку (x, y).
  • L x y — линия к точке (x, y).
  • C x1 y1, x2 y2, x y — кубический кривой Безье.
  • S x2 y2, x y — продолжение кривой Безье.
  • Z — замыкание пути.

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

Метод path.add()

Метод add() используется для объединения нескольких путей в один. Принцип работы:

const path1 = draw.path('M10 10 L50 10 L50 50 Z');
const path2 = draw.path('M60 10 L100 10 L100 50 Z');

path1.add(path2);
  • После выполнения add объект path1 содержит геометрию обоих путей.
  • path2 остаётся в DOM, но его содержимое теперь интегрировано в path1.

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

  1. Объединение происходит по геометрии, а не по стилю.
  2. Если у пути есть трансформации (rotate, translate), они учитываются при объединении.
  3. add() работает только с объектами типа Path, попытка объединить Rect или Circle вызовет ошибку.

Объединение с помощью path.plot()

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

const path1Data = path1.array();
const path2Data = path2.array();

path1.plot(path1Data.concat(path2Data));
  • array() возвращает массив команд SVG Path в формате: [['M', 10, 10], ['L', 50, 10], ...].
  • concat() объединяет команды двух путей в один массив.
  • plot() полностью заменяет старый путь новым массивом команд.

Преимущества метода plot():

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

Использование PathArray для сложного объединения

SVG.js предоставляет объект SVG.PathArray для удобной работы с массивами команд:

let combinedArray = new SVG.PathArray(path1.array()).move(0,0);
combinedArray = combinedArray.add(new SVG.PathArray(path2.array()));
path1.plot(combinedArray);
  • move(x, y) позволяет смещать весь путь перед объединением.
  • Метод add() объекта PathArray корректно соединяет массивы команд, сохраняя относительные и абсолютные координаты.
  • После объединения plot() применяет итоговый массив к пути.

Практические приёмы объединения путей

  1. Смещение второго пути При необходимости сдвинуть один путь перед объединением:
const path2Shifted = path2.clone().translate(100, 0);
path1.add(path2Shifted);
  1. Объединение нескольких путей в цикле
const paths = [path2, path3, path4];
paths.forEach(p => path1.add(p));
  1. Комбинирование с анимацией Можно объединять пути динамически при анимации:
path1.animate(1000).plot(path1.array().concat(path2.array()));

Замечания по производительности

  • Объединение большого количества сложных путей может быть ресурсоёмким.
  • Рекомендуется использовать PathArray для промежуточных вычислений и затем применять plot().
  • Для анимации или интерактивных приложений лучше избегать многократного вызова add() в цикле и использовать объединённый массив команд.

Визуальные эффекты объединённых путей

  • После объединения можно применять общие стили:
path1.fill('#ff0000').stroke({ width: 2, color: '#000000' });
  • Порядок команд влияет на визуальное перекрытие сегментов.
  • Объединённые пути остаются интерактивными объектами SVG и поддерживают все методы SVG.js, включая rotate(), scale(), translate().

Сочетание с другими примитивами

Хотя add() работает только с путями, можно:

  1. Конвертировать Rect, Circle, Ellipse в путь с помощью метода .toPath().
  2. Затем объединять с существующими путями:
const rectPath = rect.toPath();
path1.add(rectPath);

Это позволяет создавать сложные составные фигуры из стандартных примитивов.

Хотите, я могу подготовить наглядный пример с несколькими объединёнными формами и анимацией, чтобы показать всё это в действии?

Оглавление