Масштабирование (scale)

Масштабирование в Snap.svg позволяет изменять размеры элементов SVG без потери качества и без необходимости редактировать исходные координаты. Основной метод для управления масштабом — это функция transform, которая позволяет комбинировать несколько трансформаций, включая перемещение, вращение и масштабирование.

Метод transform и синтаксис масштабирования

Функция transform применяется к объекту Snap.svg и принимает строку, содержащую трансформации в формате SVG. Для масштабирования используется синтаксис:

element.transform("s<scaleX>,<scaleY>,<cx>,<cy>");

Где:

  • scaleX — коэффициент масштабирования по оси X;
  • scaleY — коэффициент масштабирования по оси Y; если не указан, принимается равным scaleX;
  • cx и cy — координаты центра масштабирования; если не указаны, масштабирование выполняется относительно (0,0).

Пример:

var s = Snap("#svg");
var circle = s.circle(50, 50, 40);
circle.transform("s2,2,50,50");

В этом примере круг увеличивается в два раза относительно своей центральной точки (50,50).

Масштабирование относительно произвольной точки

По умолчанию, если координаты центра не заданы, масштабирование выполняется относительно начала координат SVG. Чтобы масштабировать элемент относительно его центра или другой точки:

var rect = s.rect(100, 100, 80, 50);
var bbox = rect.getBBox();
rect.transform(`s1.5,1.5,${bbox.cx},${bbox.cy}`);

Метод getBBox() возвращает объект с координатами cx и cy центра элемента, что позволяет точно контролировать точку масштабирования.

Постепенное масштабирование и анимация

Snap.svg поддерживает анимацию трансформаций через метод animate. Масштабирование может быть плавным, с определением времени и функции интерполяции:

circle.animate({ transform: "s1.5,1.5,50,50" }, 1000, mina.easeinout);

Здесь:

  • 1000 — длительность анимации в миллисекундах;
  • mina.easeinout — тип интерполяции для плавного эффекта ускорения и замедления.

Комбинированные трансформации

Масштабирование часто комбинируется с другими трансформациями. Строка transform может содержать несколько операций, например:

rect.transform("t100,0r45s1.2,1.2,100,100");

Расшифровка:

  • t100,0 — смещение по оси X на 100;
  • r45 — поворот на 45 градусов;
  • s1.2,1.2,100,100 — масштабирование относительно точки (100,100).

Порядок операций критически важен: трансформации применяются слева направо.

Метод scale и удобные альтернативы

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

element.scale(scaleX, scaleY, cx, cy);

Пример:

rect.scale(2, 2, 140, 125);

Этот метод аналогичен transform("s2,2,140,125") и позволяет динамически изменять масштаб без ручного формирования строки.

Масштабирование групп и иерархия элементов

Элементы SVG могут объединяться в группы с помощью метода group. Масштабирование группы применяется ко всем элементам одновременно:

var g = s.group(circle, rect);
g.transform("s1.5,1.5,100,100");

При этом каждый элемент внутри группы масштабируется относительно точки (100,100) группы, что упрощает управление сложными композициями.

Сохранение исходных трансформаций

Важно помнить, что метод transform перезаписывает предыдущие трансформации. Чтобы комбинировать новые и старые трансформации, используется метод transform().localMatrix или оператор add:

circle.transform(circle.transform() + "s1.2,1.2,50,50");

Это добавляет новое масштабирование к уже существующим трансформациям, не теряя текущего положения или вращения объекта.

Практические рекомендации

  • Для динамических интерфейсов лучше использовать метод scale, так как он более читаем и безопасен при изменении размеров элементов.
  • При анимации сочетать масштабирование с mina функциями для достижения плавного и естественного эффекта.
  • Масштабирование группы удобно для сложных элементов, где требуется синхронное изменение размера всех вложенных объектов.
  • Всегда учитывать точку масштабирования — неправильный выбор центра может привести к смещению объекта в неожиданные координаты.

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

Оглавление