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

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

Создание цепочек трансформаций

В SVG.js трансформации можно применять к элементу несколькими способами:

const draw = SVG().addTo('body').size(600, 400);
const rect = draw.rect(100, 50).fill('#f06');

rect.move(50, 50)
    .rotate(45)
    .scale(1.5)
    .skew(20, 0);

Здесь каждая функция возвращает объект элемента, что позволяет вызывать методы последовательно, формируя цепочку. Порядок вызовов имеет критическое значение: трансформации применяются в том порядке, в котором они указаны. Например, вращение до перемещения изменяет конечную позицию элемента на холсте.

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

Перемещение (move и center)

  • move(x, y) — устанавливает координаты верхнего левого угла элемента.
  • center(cx, cy) — устанавливает центр элемента в заданные координаты.

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

  • scale(sx, sy, cx, cy) — изменяет размер элемента. Если sy не указан, используется sx. Параметры cx и cy задают точку центра масштабирования.

Вращение (rotate)

  • rotate(angle, cx, cy) — поворачивает элемент на angle градусов вокруг точки (cx, cy). Если центр не указан, используется текущий центр элемента.

Наклон (skew)

  • skew(sx, sy) — наклоняет элемент по горизонтали и вертикали.

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

Цепочки трансформаций особенно полезны при необходимости комбинировать несколько эффектов:

rect.rotate(30)
    .scale(2)
    .move(200, 100)
    .skew(10, 15);

Внутренне SVG.js создает матричную трансформацию, объединяя все вызовы в единый атрибут transform. Это обеспечивает точность и позволяет применять анимации без потери качества.

Трансформации относительно центра

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

rect.rotate(45, rect.cx(), rect.cy());

Использование cx() и cy() возвращает координаты центра элемента, что позволяет управлять трансформациями независимо от текущего положения.

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

SVG.js позволяет анимировать трансформации через метод animate():

rect.animate(1000, '<>')
    .rotate(360)
    .scale(1.2)
    .move(300, 200);

Метод animate() возвращает объект анимации, на который можно навешивать дополнительные события (after(), loop()) и комбинировать с другими анимациями. Цепочки трансформаций работают так же, как при статическом изменении, но их значения интерполируются плавно.

Управление порядком и комбинированные эффекты

Важнейший принцип — порядок вызовов определяет конечный результат. Например:

rect.scale(2).rotate(45);

не эквивалентно:

rect.rotate(45).scale(2);

В первом случае элемент сначала увеличивается, затем вращается, во втором — сначала вращается, затем масштабируется, что визуально меняет результат. Это особенно критично при сложной анимации или группировке элементов.

Группы и наследование трансформаций

SVG.js поддерживает группировку элементов через group(). Все трансформации группы применяются ко всем вложенным элементам:

const g = draw.group();
g.add(rect).add(draw.circle(50).fill('#0f9'));
g.rotate(30).move(100, 50);

В этом примере и прямоугольник, и круг вращаются и перемещаются одновременно, сохраняя относительное положение друг к другу.

Сохранение и восстановление трансформаций

SVG.js позволяет сохранять текущее состояние трансформаций для последующего восстановления:

const t = rect.transform();
rect.rotate(90);
rect.transform(t); // Возвращение к исходному состоянию

Метод transform() может как считывать текущую матрицу трансформации, так и задавать новую, что удобно для динамических изменений и анимаций.

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

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

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

Оглавление