Конвертация примитивов в пути

В библиотеке SVG.js каждый примитив (например, rect, circle, ellipse, line, polygon, polyline) можно преобразовать в объект типа path. Это позволяет выполнять более сложные трансформации и анимации, которые недоступны для отдельных примитивов, а также объединять примитивы в единый путь для манипуляции.

Метод toPath()

Метод toPath() доступен для всех основных примитивов. Его вызов возвращает объект Path, содержащий последовательность команд SVG, эквивалентных геометрии исходного примитива.

const draw = SVG().addTo('body').size(400, 400);

// Создание прямоугольника
const rect = draw.rect(100, 50).move(50, 50);

// Преобразование в путь
const path = rect.toPath();
path.fill('none').stroke({ color: '#f06', width: 2 });

В результате прямоугольник заменяется на path с теми же размерами и координатами. Для кругов и эллипсов создается путь с кривыми Безье, аппроксимирующими окружность или эллипс.

Конвертация линий и полилиний

Линии (line) и полилинии (polyline) конвертируются в путь с использованием команд M (move) и L (line). Полигоны (polygon) конвертируются аналогично, но добавляется закрывающая команда Z.

const line = draw.line(0, 0, 100, 100).stroke({ width: 2 });
const linePath = line.toPath(); // M0,0 L100,100

const poly = draw.polygon('50,0 100,50 50,100 0,50').fill('none').stroke({ width: 2 });
const polyPath = poly.toPath(); // M50,0 L100,50 L50,100 L0,50 Z

После конвертации можно применять к пути любые трансформации: смещение, вращение, масштабирование, а также комбинировать с другими путями через методы union, intersect (с использованием дополнительных библиотек, работающих с SVG path).

Преобразование кривых и дуг

Эллипсы и круги при конвертации создают путь с кривыми Безье. Для дуг (arc) создается путь с командой A (arc), сохраняющей геометрическую точность кривой. Это важно для анимаций, где требуется точное движение вдоль дуги или окружности.

const circle = draw.circle(80).move(100, 100);
const circlePath = circle.toPath();
circlePath.fill('none').stroke({ color: 'blue', width: 2 });

Внутри circlePath содержатся четыре сегмента кривых Безье, приближающие окружность.

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

После конвертации примитива в путь можно получать и изменять точки с помощью методов array() и plot():

  • array() — возвращает массив команд и координат текущего пути.
  • plot(newArray) — задает новый набор команд для пути.
const pathArray = path.array();
console.log(pathArray); // [["M", 50, 50], ["L", 150, 50], ["L", 150, 100], ["L", 50, 100], ["Z"]]

path.plot([["M", 60, 60], ["L", 160, 60], ["L", 160, 110], ["L", 60, 110], ["Z"]]);

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

Сочетание нескольких примитивов

Конвертация нескольких примитивов в путь позволяет объединять их через методы add и join в единый сложный путь. Это особенно полезно для создания сложных фигур, которые невозможно задать одной командой path.

const rectPath = draw.rect(100, 50).move(10, 10).toPath();
const circlePath = draw.circle(50).move(80, 30).toPath();

// Объединение путей
rectPath.add(circlePath);
rectPath.fill('none').stroke({ color: 'green', width: 2 });

В итоге объединенный путь ведет себя как единый объект, к которому можно применять трансформации, анимации и другие операции, доступные только для объектов типа path.

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

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

Метод toPath() делает SVG.js мощным инструментом для работы с векторной графикой, открывая доступ к расширенным возможностям управления формой, объединением и анимацией объектов.

Оглавление