Манипуляция существующими путями

В SVG.js путь представляется объектом SVG.Path, который позволяет создавать, изменять и анимировать линии и кривые в формате SVG. Путь состоит из сегментов, каждый из которых описывается командами движения (M, L, C, Q, A, Z) и координатами.

Методы для работы с путями позволяют:

  • Добавлять сегменты Метод plot() принимает строку с командами SVG Path или массив объектов сегментов:

    let path = draw.path('M10 10 L90 90');
path.plot('M10 10 C20 20, 40 20, 50 10');

    При использовании массива объектов каждый сегмент задаётся ключами: { type: 'M', x: 10, y: 10 }.

  • Чтение текущих сегментов Метод array() возвращает массив сегментов пути в удобном формате:

    let segments = path.array();
console.log(segments); // [['M', 10, 10], ['L', 90, 90]]

  • Изменение сегментов по индексу Можно заменить отдельный сегмент:

    let arr = path.array();
arr[1] = ['L', 100, 100];
path.plot(arr);

Динамическая модификация кривых и линий

SVG.js позволяет изменять координаты существующих сегментов без полной перерисовки:

  • Перемещение сегмента Используется метод plot() с модифицированным массивом сегментов:

    let arr = path.array();
arr[1][1] += 20; // смещаем x второй команды
arr[1][2] += 10; // смещаем y второй команды
path.plot(arr);

  • Изменение кривой Безье Для кубических кривых (C) можно корректировать управляющие точки:

    let arr = path.array();
arr[1] = ['C', 30, 30, 60, 60, 90, 10];
path.plot(arr);

  • Добавление новых сегментов К существующему пути можно добавлять новые команды через метод line() или plot():

    path.plot(path.array().concat([['L', 120, 50]]));

Работа с атрибутами пути

Для манипуляции стилем и внешним видом сегментов используются методы:

  • stroke({ color, width, linecap, linejoin }) — настройка обводки.

    path.stroke({ color: '#f06', width: 4 });

  • fill(color) — заливка пути. Для чистых линий рекомендуется fill('none').

  • opacity(value) — установка прозрачности.

Интерактивные трансформации

Пути можно изменять динамически через трансформации:

  • Сдвиг

    path.translate(50, 30);

  • Масштабирование

    path.scale(1.5, 1.5);

  • Вращение вокруг центра

    path.rotate(45, 50, 50);

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

Анимация сегментов

SVG.js поддерживает анимацию через метод animate() и функцию изменения сегментов:

  • Простая анимация линии

    path.animate(1000).plot('M10 10 L150 150');

  • Анимация сложной кривой Для плавного изменения сегментов:

    let newPath = [['M', 10, 10], ['C', 30, 30, 60, 60, 100, 10]];
path.animate(2000, '<>').plot(newPath);

Метод позволяет задать продолжительность, кривую ускорения (easing) и новые координаты, при этом SVG.js сам рассчитает промежуточные точки.

Манипуляция отдельными точками пути

Для сложных графических эффектов полезно работать с конкретными точками:

  • Получение координат сегмента

    let segment = path.array()[1]; // ['L', 90, 90]
let x = segment[1];
let y = segment[2];

  • Изменение конкретной точки

    segment[1] += 20; // сдвигаем x
segment[2] -= 10; // сдвигаем y
path.plot(path.array());

  • Удаление сегмента

    let arr = path.array();
arr.splice(1, 1); // удаляем второй сегмент
path.plot(arr);

Примеры применения

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

  2. Редактируемая диаграмма Координаты сегментов привязываются к данным графика, изменения данных сразу отражаются в пути.

  3. Интерактивная форма Пользователь перетаскивает точки пути, а массив сегментов обновляется в реальном времени, создавая динамическое редактирование.

Манипуляция существующими путями в SVG.js открывает возможность создавать как статические сложные формы, так и динамичные анимации с точным контролем над каждым сегментом. Эффективное использование массивов сегментов и методов plot(), array() и animate() позволяет строить визуально сложные графические элементы, полностью управляемые программно.

Оглавление