Поворот (rotate)

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

Синтаксис метода:

element.rotate(angle, cx, cy);
  • angle – угол поворота в градусах (по часовой стрелке). Может быть положительным или отрицательным.
  • cx и cy – координаты центра поворота. Если не заданы, объект вращается вокруг своей исходной позиции, определяемой в атрибутах x и y.

Например, простой поворот:

var s = Snap("#svg");
var rect = s.rect(50, 50, 100, 100);
rect.attr({ fill: "#3498db" });
rect.rotate(45); // Поворот на 45 градусов вокруг точки (0,0)

Если необходимо вращать объект вокруг его центра, вычисление координат центра происходит вручную:

var cx = rect.getBBox().cx;
var cy = rect.getBBox().cy;
rect.rotate(45, cx, cy);

getBBox() возвращает объект с параметрами x, y, width, height, cx, cy, что позволяет точно определить центр для вращения.

Свойства и особенности поворота

  1. Композитные трансформации Snap.svg позволяет комбинировать несколько трансформаций через цепочку методов или строковое представление:
rect.transform("r45,100,100t50,0");
  • r45,100,100 – поворот на 45 градусов вокруг точки (100,100).
  • t50,0 – смещение на 50 пикселей по оси X.

  1. Относительные и абсолютные повороты

    • Абсолютный угол задается напрямую через rotate(angle, cx, cy).
    • Относительный поворот выполняется через метод transform с символом ...:
rect.transform(rect.transform().localMatrix.rotate(30, cx, cy));
  1. Анимация вращения Для плавного поворота объектов используется метод animate:
rect.animate({ transform: "r360," + cx + "," + cy }, 2000, mina.easeinout);
  • r360,cx,cy – вращение на 360 градусов вокруг точки (cx, cy).
  • 2000 – время анимации в миллисекундах.
  • mina.easeinout – функция плавности изменения.

Практические советы

  • Использование центра объекта: всегда проверять координаты центра через getBBox(), особенно для сложных фигур.
  • Комбинирование с масштабированием и перемещением: порядок применения трансформаций влияет на результат. В Snap.svg повороты применяются до или после смещений в зависимости от записи.
  • Динамическое обновление угла: можно менять угол в цикле или через таймер для создания анимации вращающегося объекта.
var angle = 0;
setInterval(function() {
    angle += 5;
    rect.rotate(angle, cx, cy);
}, 50);
  • Трансформации групп: если элемент является частью группы g, вращение можно применить к группе, что позволяет одновременно поворачивать несколько объектов.
var g = s.group(rect, circle);
g.rotate(30, 150, 150);

Работа с осью поворота

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

  • Вокруг точки (0,0) – используется по умолчанию, если не задано иное.
  • Вокруг центра объекта – наиболее часто применяемый вариант.
  • Вокруг произвольной точки – позволяет создавать сложные механические или графические эффекты.
var arbitraryX = 200;
var arbitraryY = 100;
rect.rotate(90, arbitraryX, arbitraryY);

Ошибки и нюансы

  1. Неверные координаты центра приводят к неожиданному смещению объекта. Всегда проверять значения cx и cy.
  2. Накопление трансформаций – каждый вызов rotate добавляет поворот к предыдущему состоянию. Для абсолютного поворота лучше сбрасывать трансформацию:
rect.transform(""); // сброс трансформации
rect.rotate(45, cx, cy);
  1. Анимация и трансформации одновременно – при одновременном использовании animate и прямых трансформаций лучше работать с функцией transform() вместо rotate(), чтобы избежать конфликтов.

Заключение по применению

Функция rotate в Snap.svg является универсальным инструментом для управления ориентацией объектов SVG. Она обеспечивает простое и интуитивное управление углами, центрами вращения и позволяет создавать как статические повороты, так и сложные анимации с динамическими изменениями углов. Правильное использование getBBox(), комбинаций трансформаций и функций анимации позволяет добиться профессионального уровня работы с векторной графикой на JavaScript.

Оглавление