Поворот: rotate

В библиотеке SVG.js поворот (rotate) используется для вращения графических объектов вокруг определённой точки. Метод .rotate() позволяет управлять углом поворота в градусах и точкой центра вращения. Синтаксис метода:

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

Пример поворота прямоугольника на 45° вокруг его центра:

const draw = SVG().addTo('body').size(300, 300);
const rect = draw.rect(100, 50).fill('#f06');
rect.rotate(45);

Если требуется сместить точку вращения, указываются координаты:

rect.rotate(45, 150, 75);

Связь с трансформациями

Метод .rotate() является частью трансформаций, которые могут комбинироваться с .translate(), .scale() и .skew(). В SVG.js все трансформации применяются через внутреннюю матрицу трансформации. При последовательном вызове методов трансформации они суммируются:

rect.translate(50, 50).rotate(30).scale(1.5);

Здесь прямоугольник сначала смещается, затем поворачивается, а затем увеличивается.

Использование с анимацией

Поворот можно анимировать, используя метод .animate(). Пример плавного вращения на 360° за 2 секунды:

rect.animate(2000, '<>').rotate(360);
  • Первый параметр — продолжительность анимации в миллисекундах.
  • Второй параметр — тип кривой анимации ('linear', '<>', 'ease-in' и др.).
  • Поворот будет происходить относительно текущей точки вращения элемента.

Можно комбинировать анимацию поворота с другими трансформациями:

rect.animate(3000).rotate(180).scale(2);

В этом случае обе трансформации выполняются параллельно.

Получение текущего угла поворота

Чтобы узнать текущий угол поворота элемента, используется метод .transform(), который возвращает объект с параметрами трансформации:

const t = rect.transform();
console.log(t.rotation); // выводит угол поворота в градусах

Если элемент не был повёрнут вручную, свойство rotation возвращает 0.

Поворот вокруг произвольной точки

Часто требуется вращать элементы вокруг точек, не совпадающих с центром. Для этого удобно использовать цепочку .center() и .rotate():

rect.center(200, 150).rotate(90);

Здесь центр прямоугольника временно смещается в точку (200, 150), после чего выполняется вращение на 90°. Важно помнить, что метод .center() изменяет координаты элемента, что влияет на дальнейшие трансформации.

Интерактивное управление поворотом

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

rect.on('mousedown', function(event) {
  let startAngle = event.offsetX; // начальная точка
  rect.on('mousemove', function(ev) {
    let angle = ev.offsetX - startAngle;
    rect.rotate(angle);
  });
});

Таким образом можно создавать динамическую визуализацию, реагирующую на движение курсора.

Комбинирование с группами

При работе с SVG.js элементы можно объединять в группы через group(). Поворот группы поворачивает все вложенные элементы относительно точки группы:

const group = draw.group();
group.add(rect).add(draw.circle(50).fill('#0f6'));
group.rotate(45, 200, 200);

Это позволяет создавать сложные композиции, которые можно вращать как единое целое.

Особенности использования в разных элементах

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

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

Оглавление