Создание путей программно

Snap.svg предоставляет мощный объект path, который позволяет создавать сложные графические элементы на основе кривых, линий и дуг. Путь определяется строкой команд SVG, каждая из которых описывает определённое действие: перемещение пера, рисование линии, кривой или дуги.

Пример создания простого пути:

var s = Snap(800, 600);
var path = s.path("M50 50 L150 150 L50 150 Z");

В данном примере:

  • M50 50 — перемещение пера в точку (50,50).
  • L150 150 — линия до точки (150,150).
  • L50 150 — линия до точки (50,150).
  • Z — замыкание пути, соединение с начальной точкой.

Команды пути и их использование

Snap.svg поддерживает все стандартные команды SVG:

  • M x y — переместить перо в координаты (x, y).
  • L x y — провести линию до (x, y).
  • H x / V y — горизонтальная или вертикальная линия.
  • C x1 y1 x2 y2 x y — кубическая кривую Безье.
  • S x2 y2 x y — сокращённая кубическая кривая Безье.
  • Q x1 y1 x y — квадратичная кривая Безье.
  • T x y — сокращённая квадратичная кривая.
  • A rx ry x-axis-rotation large-arc-flag sweep-flag x y — дуга эллипса.
  • Z — замкнуть путь.

Каждая команда может быть прописана в абсолютной (большие буквы) или относительной (малые буквы) форме. Например, L 100 100 — абсолютная линия до (100,100), а l 50 0 — линия на 50 единиц вправо относительно текущей позиции.

Программное создание сложных путей

Snap.svg позволяет формировать путь динамически, используя массивы команд или методы объекта path.

Пример генерации кривой через массив:

var commands = [
  "M", 50, 50,
  "C", 100, 0, 200, 100, 250, 50,
  "L", 300, 100,
  "Z"
];

var pathString = commands.join(" ");
var path = s.path(pathString);

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

Методы работы с путями

Snap.svg предоставляет методы для манипуляции путями после их создания:

  • path.attr({stroke: "#000", fill: "none"}) — настройка цвета линии и заливки.
  • path.getBBox() — получение ограничивающего прямоугольника пути.
  • path.getTotalLength() — вычисление длины пути.
  • path.getPointAtLength(len) — возвращает координаты точки на пути по длине.
  • path.getSubpath(from, to) — извлечение сегмента пути между двумя длинами.

Эти методы делают возможным точное позиционирование объектов вдоль пути или создание анимаций движения.

Анимация объектов по пути

Использование методов длины пути позволяет анимировать элементы вдоль траектории:

var circle = s.circle(0, 0, 10).attr({fill: "red"});
var length = path.getTotalLength();

Snap.animate(0, length, function(val) {
    var point = path.getPointAtLength(val);
    circle.attr({cx: point.x, cy: point.y});
}, 2000);
  • Snap.animate плавно изменяет значение от 0 до длины пути.
  • getPointAtLength возвращает координаты на кривой для заданной длины.
  • Такой подход обеспечивает точное движение по сложным траекториям.

Сочетание путей и трансформаций

Пути можно комбинировать с трансформациями Snap.svg, включая масштабирование, вращение и смещение:

path.transform("t100,50 r45 s2,2");
  • t100,50 — смещение на (100,50).
  • r45 — поворот на 45 градусов.
  • s2,2 — масштабирование по осям X и Y.

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

Преобразование данных в путь

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

var data = [30, 80, 60, 100];
var pathStr = "M0 " + (100 - data[0]);

for (var i = 1; i < data.length; i++) {
    pathStr += " L" + (i * 50) + " " + (100 - data[i]);
}

var graphPath = s.path(pathStr).attr({stroke: "#0074D9", fill: "none"});
  • Преобразование числового массива в координаты пути позволяет строить линейные графики.
  • Каждый элемент массива преобразуется в линию к следующей точке.

Работа с кривыми Безье

Кривые Безье — один из самых мощных инструментов Snap.svg для создания плавных форм. Кубическая кривая определяется контрольными точками:

var bezier = s.path("M50 200 C150 100, 250 300, 350 200");
bezier.attr({stroke: "green", fill: "none"});
  • Первые две координаты после C — точки управления кривой, формирующие изгиб.
  • Последняя пара координат — конечная точка кривой.
  • Манипуляции с точками управления позволяют изменять форму кривой программно.

Заключение по практике

Создание путей в Snap.svg позволяет не только строить статичные SVG-объекты, но и организовывать сложные анимации, динамически изменяемые графики и интерактивные визуализации. Правильное использование команд пути, методов получения длины и точек, а также трансформаций открывает практически неограниченные возможности в программной графике на JavaScript.

Оглавление