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

В Snap.svg пути представляются объектами <path> SVG и создаются с помощью метода paper.path(), где paper — это экземпляр Snap, привязанный к SVG-контейнеру. Путь задаётся строкой в формате SVG Path Data, включающей команды: M (move to), L (line to), C (cubic bezier), Q (quadratic bezier), A (arc) и Z (close path).

var s = Snap(800, 600);
var path = s.path("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");

Ключевой момент: строки для пути могут содержать как абсолютные (M, L), так и относительные (m, l) команды.

Методы для получения и изменения атрибутов пути

Snap.svg предоставляет несколько методов для манипуляций с объектами пути:

  • attr() — получение и установка атрибутов:
path.attr({
    fill: "none",
    stroke: "#000",
    strokeWidth: 2
});
  • getTotalLength() — возвращает общую длину пути. Используется для анимаций и вычислений точек по длине пути:
var length = path.getTotalLength();
  • getPointAtLength(length) — возвращает объект с координатами и углом касательной в точке пути на заданной длине:
var point = path.getPointAtLength(50);
console.log(point.x, point.y, point.alpha);

Модификация точек пути

Snap.svg позволяет модифицировать отдельные сегменты пути через метод attr({ d: newPathString }) или с помощью Snap.path.toCubic() для преобразования любого пути в кривые Безье кубической степени. Это полезно для плавных анимаций и точного контроля над формой.

var cubicPath = Snap.path.toCubic(path);

Пример: изменение координат контрольных точек кривой:

cubicPath[0][1] += 10; // смещение первой точки
path.attr({ d: Snap.path.toString(cubicPath) });

Методы для анализа структуры пути

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

  • Snap.path.getSubpath(pathString, from, to) — извлечение части пути от from до to по длине.
  • Snap.path.getBBox(pathString) — вычисление ограничивающего прямоугольника для пути, возвращает объект с x, y, width, height.
  • Snap.path.findDotsAtSegment() — вычисление точек на кубическом сегменте, включая начало, конец, контрольные точки и производные.
var subpath = Snap.path.getSubpath(path, 0, 100);
var bbox = Snap.path.getBBox(path);

Комбинирование и объединение путей

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

  • Snap.path.union(path1, path2) — объединение двух путей.
  • Snap.path.intersection(path1, path2) — вычисление пересечения.
  • Snap.path.subtract(path1, path2) — вычитание одного пути из другого.

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

var p1 = s.path("M10 10 H 90 V 90 H 10 Z");
var p2 = s.path("M50 50 H 130 V 130 H 50 Z");
var unionPath = Snap.path.union(p1, p2);
s.path(unionPath).attr({fill: "red"});

Анимации вдоль пути

Для движения объектов по пути используется сочетание методов getPointAtLength() и animate():

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

Snap.animate(0, length, function(value) {
    var movePoint = path.getPointAtLength(value);
    ball.attr({cx: movePoint.x, cy: movePoint.y});
}, 3000);

Особенности: анимация может учитывать угол касательной для вращения объекта по пути, используя свойство alpha из getPointAtLength().

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

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

  • Snap.path.getTotalLength() и Snap.path.getPointAtLength() применимы к кривым любой сложности.
  • Snap.path.toCubic() позволяет унифицировать кривые для сложных вычислений.
  • Snap.path.map() может трансформировать сегменты кривых с помощью матриц.
var cubicSegments = Snap.path.toCubic("M10 80 Q 95 10 180 80");
cubicSegments = Snap.path.map(cubicSegments, function(x, y){
    return [x + 20, y + 10];
});

Трансформации пути

Методы transform() и attr({transform: ...}) позволяют вращать, масштабировать и смещать весь путь:

path.transform("t100,50 r45 s1.5,1.5");
  • t — translate, смещение.
  • r — rotate, вращение вокруг центра или точки.
  • s — scale, масштабирование по осям.

Эти трансформации можно комбинировать и анимировать для динамических эффектов.

Вспомогательные утилиты для работы с путями

Snap.svg включает полезные функции для анализа и модификации путей:

  • Snap.path.split(pathString) — разбиение пути на массив сегментов.
  • Snap.path.reverse(pathString) — обратный порядок сегментов пути.
  • Snap.path.clone(pathString) — создание копии пути для дальнейших трансформаций.

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

Оглавление