Утилитарные функции

Snap.svg предоставляет мощный набор утилитарных функций, которые упрощают работу с SVG-графикой. Эти функции помогают создавать, преобразовывать, а также управлять атрибутами элементов, без необходимости ручного манипулирования DOM.

Работа с числами и строками

Snap.format – функция для форматирования строк с подстановкой переменных. Используется для генерации динамических значений атрибутов:

var x = 50;
var y = 100;
var circleAttrs = Snap.format("cx:{cx}; cy:{cy}; r:40", {cx: x, cy: y});
// circleAttrs = "cx:50; cy:100; r:40"

Snap.rad и Snap.deg – преобразование между градусами и радианами, что полезно для вращений и трансформаций:

var angle = 90;
var rad = Snap.rad(angle); // 1.5707963267948966
var deg = Snap.deg(rad);   // 90

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

Цветовые функции

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

  • Snap.color(color) – создаёт объект цвета с компонентами r, g, b, hex и opacity.
var c = Snap.color("#ff6600");
console.log(c.r, c.g, c.b); // 255 102 0
  • Snap.hsb(h, s, b) – создаёт цвет в формате HSB. Позволяет плавно изменять оттенки при анимации.
  • Snap.rgb(r, g, b, opacity) – создаёт RGB-цвет с необязательной прозрачностью.
  • Snap.filter – упрощённое создание SVG-фильтров для элементов.

Создание и манипуляция элементами

Snap.select и Snap.selectAll – позволяют находить элементы SVG по CSS-селекторам:

var circle = Snap.select("#myCircle");
var allRects = Snap.selectAll("rect");

Snap.parse – превращает строку SVG в DOM-элемент Snap.svg:

var svgString = '<circle cx="50" cy="50" r="40" fill="blue"/>';
var element = Snap.parse(svgString);

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

var frag = Snap.fragment('<circle cx="50" cy="50" r="40"/> <rect x="10" y="10" width="30" height="30"/>');
paper.append(frag);

Работа с атрибутами и стилями

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

  • element.attr(attrName, value) – установка одного атрибута.
  • element.attr({attr1: value1, attr2: value2}) – массовая установка атрибутов.
  • element.attr(attrName) – получение значения атрибута.
  • element.transform() – получение текущей трансформации элемента.
  • element.transform(transformString) – применение трансформаций, таких как rotate, scale, translate.

Геометрические и матричные функции

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

  • Snap.matrix() – создание матрицы преобразований. Позволяет комбинировать масштабирование, вращение, сдвиг и наклон.
  • element.getBBox() – возвращает объект с геометрической рамкой элемента: x, y, width, height.
  • element.getPointAtLength(length) – вычисляет координаты точки на пути по длине.
  • element.getTotalLength() – длина пути, полезная для анимации обводки линии.

Работа с классами и стилями

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

  • element.addClass(className)
  • element.removeClass(className)
  • element.hasClass(className)
  • element.toggleClass(className)

Эти методы позволяют динамически управлять стилями SVG без прямого изменения атрибутов class.

Функции для анимации

Snap.svg предоставляет утилиты, облегчающие анимацию элементов:

  • Snap.animate(from, to, setter, duration, easing, callback) – универсальная функция для анимации числовых значений.
Snap.animate(0, 100, function(val){
    circle.attr({cx: val});
}, 1000, mina.easeinout);
  • mina.* – набор кривых ускорения для анимации: mina.linear, mina.easein, mina.easeout, mina.easeinout.

Утилиты для работы с массивами и объектами

  • Snap.forEach(array, callback) – перебор элементов массива с передачей индекса и элемента.
  • Snap.map(obj, callback) – преобразование объекта в новый объект с применением функции ко всем его ключам и значениям.
  • Snap.clone(obj) – глубокое копирование объектов и массивов, полезно для сохранения исходных данных перед трансформацией.

Интеграция с DOM и событиями

  • element.click(handler), element.dblclick(handler) – обработка кликов и двойных кликов.
  • element.hover(f_in, f_out) – реакции на наведение и уход курсора.
  • Snap.ajax(url, callback) – упрощённый способ загрузки SVG или данных с сервера.

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

Оглавление