Точка трансформации

В библиотеке SVG.js каждая трансформация объекта — будь то поворот, масштабирование или сдвиг — осуществляется относительно точки трансформации (transform origin). По умолчанию эта точка совпадает с левым верхним углом элемента, но её можно менять для достижения точного эффекта. Правильное понимание точки трансформации критично для сложных анимаций и группировок элементов.

Установка точки трансформации

В SVG.js для задания точки трансформации используется метод transform() с объектом, содержащим параметры cx и cy:

const rect = draw.rect(100, 50).fill('#f06');
rect.transform({ cx: 50, cy: 25 });
  • cx — координата X точки трансформации относительно элемента.
  • cy — координата Y точки трансформации относительно элемента.

После установки этих значений все последующие трансформации будут применяться относительно указанной точки.

Влияние точки трансформации на поворот

Поворот (rotate) без указания точки трансформации производится относительно стандартной точки (левый верхний угол). Если необходимо вращение вокруг центра или произвольной точки, важно сначала определить cx и cy:

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

Здесь прямоугольник поворачивается на 45 градусов вокруг точки (50, 25) внутри элемента, а не вокруг угла.

Масштабирование с учётом точки трансформации

Трансформация scale также зависит от точки трансформации. При масштабировании относительно центра элемент увеличивается или уменьшается вокруг заданной точки:

rect.transform({ cx: 50, cy: 25 }).scale(2);

Результат: прямоугольник удваивается в размерах, оставаясь “привязанным” к точке (50, 25). Без указания cx и cy элемент смещается, так как масштаб применяется относительно угла.

Смещение и комбинированные трансформации

Метод transform() позволяет комбинировать несколько трансформаций сразу:

rect.transform({
  cx: 50,
  cy: 25,
  rotate: 30,
  scale: 1.5,
  translateX: 20,
  translateY: 10
});
  • translateX / translateY — смещение по осям X и Y.
  • rotate — поворот в градусах относительно cx, cy.
  • scale — масштаб относительно точки трансформации.

Порядок применения этих трансформаций критичен: сначала масштабирование, затем поворот, потом смещение. SVG.js автоматически управляет порядком при использовании объекта в transform().

Применение точки трансформации к группам элементов

Группировка элементов через group() позволяет задавать одну точку трансформации для всех элементов внутри:

const group = draw.group();
const circle = group.circle(50).fill('blue');
const square = group.rect(50, 50).fill('red');

group.transform({ cx: 50, cy: 50, rotate: 45 });

Группа будет вращаться как единый объект вокруг точки (50, 50), сохраняя относительное расположение всех дочерних элементов.

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

Часто требуется установить точку трансформации в центр элемента. Для прямоугольников и кругов удобно использовать bbox():

const box = rect.bbox();
rect.transform({ cx: box.cx, cy: box.cy }).rotate(90);

bbox() возвращает объект с координатами x, y, width, height, а также вычисляет центр cx, cy. Это обеспечивает точное вращение или масштабирование вокруг центра.

Анимации и точка трансформации

В анимациях важно учитывать точку трансформации, чтобы движение выглядело естественным:

rect.transform({ cx: 50, cy: 25 })
    .animate(1000)
    .rotate(360);

Элемент вращается на 360 градусов вокруг заданной точки, а не смещается по холсту, что делает анимацию стабильной и предсказуемой.

Итоговые рекомендации

  • Использовать cx и cy для всех нестандартных трансформаций.
  • Для центрирования элементов применять bbox().
  • При работе с группами задавать трансформацию на уровне группы.
  • Всегда помнить о порядке трансформаций при комбинировании scale, rotate и translate.

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

Оглавление