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

Масштабирование (scale) в SVG.js позволяет изменять размеры элементов без изменения их исходной геометрии. При применении масштабирования объект сохраняет пропорции, если не указано иное, и координаты его точек автоматически подстраиваются под новый размер.

const draw = SVG().addTo('body').size(600, 400);
const rect = draw.rect(100, 50).fill('#f06');
rect.scale(2); // увеличивает размеры в 2 раза

В приведённом примере прямоугольник увеличивается пропорционально по горизонтали и вертикали. Если требуется масштабировать не пропорционально, можно указать отдельные коэффициенты для осей X и Y:

rect.scale(2, 0.5); // X увеличивается в 2 раза, Y уменьшается в 2 раза

Относительные и абсолютные масштабы

SVG.js позволяет использовать как абсолютные, так и относительные значения масштабирования.

  • Абсолютное масштабирование задаётся конкретными коэффициентами.
  • Относительное масштабирование применяется с учётом текущего состояния объекта и вычисляется как произведение текущего масштаба на новый коэффициент:
rect.scale(1.5, 1.5, true); // true указывает на относительное масштабирование

Если третий параметр не указан, масштабирование по умолчанию считается абсолютным.

Центр масштабирования

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

rect.scale(1.5, 1.5, true, 50, 25); // масштабирование относительно точки (50, 25)

Первые два параметра — коэффициенты по X и Y, третий — относительное масштабирование, четвёртый и пятый — координаты центра трансформации.

Цепочка трансформаций

SVG.js позволяет объединять масштабирование с другими трансформациями: вращением, перемещением и наклоном. Для этого используется метод transform:

rect.transform({
  scaleX: 2,
  scaleY: 1.5,
  rotate: 45,
  cx: 50,
  cy: 25
});

Метод transform применяет все трансформации сразу, обеспечивая точное позиционирование и изменение размеров. Параметры cx и cy задают центр масштабирования и вращения одновременно.

Масштабирование текста и сложных групп

Для текста и групп элементов (<g>) масштабирование работает аналогично, но с особенностями:

  • Масштабирование текста изменяет размеры шрифта и координаты символов.
  • Масштабирование группы изменяет все вложенные элементы пропорционально.
const group = draw.group();
group.add(draw.circle(50).fill('#0f0'));
group.add(draw.rect(100, 50).fill('#00f'));
group.scale(1.5); // увеличивает все элементы группы

При работе с группами важно учитывать, что внутренние координаты элементов сохраняются относительно группы, поэтому масштабирование влияет на все дочерние элементы одновременно.

Анимация масштабирования

SVG.js поддерживает плавное изменение масштаба через метод animate. Это позволяет создавать динамичные визуальные эффекты:

rect.animate(1000, '<>').scale(2, 2); // за 1 секунду увеличивает элемент вдвое

Параметр '<>' задаёт кривую ускорения/замедления (ease-in-out). Можно комбинировать с другими анимациями:

rect.animate(1500).scale(0.5).move(200, 100); // масштабирование и перемещение одновременно

Чек-лист ключевых моментов масштабирования

  • scale(s) — пропорциональное масштабирование.
  • scale(sx, sy) — масштабирование по отдельным осям.
  • Третий параметр scale(sx, sy, relative) задаёт относительность.
  • Четвёртый и пятый параметры задают центр трансформации (cx, cy).
  • Метод transform() объединяет масштабирование с другими трансформациями.
  • Масштабирование групп влияет на все дочерние элементы.
  • Анимация animate().scale() позволяет динамически изменять размер объектов.

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

Оглавление