Утилиты и хелперы

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

Генерация случайных значений

В библиотеке SVG.js встроены функции для генерации случайных чисел и цветов. Они полезны при создании динамических визуализаций и генеративной графики.

Случайные числа:

SVG.random(0, 100); // возвращает число от 0 до 100

Параметры функции:

  • Первый аргумент — минимальное значение (по умолчанию 0)
  • Второй аргумент — максимальное значение

Случайные цвета:

SVG.Color.random(); // возвращает случайный цвет в формате rgb

Также можно создавать случайные цвета с учетом определённого диапазона оттенков, насыщенности и яркости, используя методы цепочек .hue(), .saturation(), .lightness().

Работа с координатами и размерами

SVG.js содержит удобные хелперы для работы с точками, размерами и прямоугольниками.

Точки (Point):

let point = new SVG.Point(50, 100);
point.add(new SVG.Point(10, 20)); // сложение координат
point.x; // 60
point.y; // 120

Методы Point:

  • .add(point) — сложение координат
  • .subtract(point) — вычитание координат
  • .transform(matrix) — применение матрицы трансформации

Размеры (Size):

let size = new SVG.Size(200, 100);
size.width;  // 200
size.height; // 100

Size-хелперы позволяют безопасно манипулировать размерами без прямого изменения атрибутов width и height у элементов.

Прямоугольники (Box):

let box = new SVG.Box(10, 20, 300, 150);
box.x;      // 10
box.y;      // 20
box.width;  // 300
box.height; // 150
box.center(); // возвращает центр {x, y}

Box-хелперы незаменимы при позиционировании элементов относительно друг друга и при вычислении коллизий.

Работа с матрицами трансформаций

SVG.js предоставляет объект Matrix для сложных трансформаций. Он упрощает масштабирование, повороты и перемещения без изменения исходных атрибутов.

let matrix = new SVG.Matrix();
matrix.translate(50, 100); // сдвиг
matrix.scale(2, 2);        // масштабирование
matrix.rotate(45, 50, 50); // поворот вокруг точки (50,50)

Методы Matrix:

  • .translate(x, y) — перемещение
  • .scale(sx, sy, cx, cy) — масштабирование относительно точки
  • .rotate(angle, cx, cy) — поворот вокруг точки
  • .flip(xAxis, yAxis, cx, cy) — зеркальное отображение
  • .multiply(matrix) — умножение на другую матрицу

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

Хелперы для работы с цветом

Класс SVG.Color предоставляет методы для управления цветами:

let color = new SVG.Color('#f06');
color.red();    // 255
color.green();  // 0
color.blue();   // 102
color.hex();    // '#ff0066'
color.rgba();   // 'rgba(255,0,102,1)'

Методы позволяют:

  • Преобразовать цвета между HEX, RGB и HSL
  • Модифицировать отдельные компоненты цвета
  • Создавать градиенты на основе динамических значений

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

SVG.js включает несколько полезных утилит для работы с коллекциями элементов и объектами.

Функция SVG.utils.map() — аналог Array.map, но оптимизирован для SVG-коллекций:

let arr = [1, 2, 3];
let result = SVG.utils.map(arr, x => x * 2); // [2, 4, 6]

Функция SVG.utils.each() — перебор элементов:

SVG.utils.each([10, 20, 30], function(value, index){
    console.log(index, value);
});

SVG.utils.clone() — глубокое клонирование объектов и массивов, полезно при динамическом копировании элементов и их данных.

Работа с событиями и таймерами

Для упрощения асинхронных задач SVG.js предоставляет утилиты:

  • SVG.timer() — создание таймеров для анимаций без использования setTimeout:
let timer = SVG.timer(function(elapsed){
    console.log(elapsed);
}, 1000); // интервал 1000 мс
  • SVG.animate() — запуск плавных анимаций с возможностью цепочки хелперов.

Преобразование данных и парсинг

SVG.js включает встроенные хелперы для разбора и форматирования данных:

  • SVG.regex — набор регулярных выражений для проверки координат, цветов и других атрибутов SVG.
  • SVG.utils.split() — безопасное разделение строк с SVG-данными, например path или transform.
  • SVG.utils.array() — преобразует любой объект в массив для удобного перебора.

Итоговые рекомендации по использованию

  1. Для динамического позиционирования и анимации использовать Point, Box и Matrix.
  2. Для работы с цветами применять SVG.Color и методы .hue(), .saturation(), .lightness().
  3. Для коллекций и массивов использовать SVG.utils.map(), each() и clone().
  4. Для генеративной графики — SVG.random() и SVG.Color.random().
  5. Для таймеров и анимаций — SVG.timer() и встроенный .animate().

Утилиты и хелперы SVG.js существенно сокращают количество низкоуровневого кода, делая работу с SVG более декларативной и структурированной, что особенно важно при создании интерактивных и динамических интерфейсов.

Оглавление