Получение bbox (bounding box)

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

Метод bbox()

В SVG.js любой элемент имеет метод bbox(), который возвращает объект с координатами и размерами:

let rect = draw.rect(100, 50).move(10, 20);
let box = rect.bbox();
console.log(box);

Возвращаемый объект имеет следующую структуру:

{
  x: 10,       // координата x верхнего левого угла
  y: 20,       // координата y верхнего левого угла
  width: 100,  // ширина элемента
  height: 50   // высота элемента
}

Важно: bbox() учитывает текущие трансформации элемента, такие как rotate, scale и translate.

Применение bbox для позиционирования

Полученный bbox позволяет точно позиционировать элементы относительно других объектов:

let circle = draw.circle(40).move(50, 50);
let rect = draw.rect(60, 30).move(circle.bbox().x + circle.bbox().width + 10, circle.bbox().y);

В этом примере прямоугольник размещается справа от круга с отступом в 10 единиц.

Отличие от метода rbox()

SVG.js также предоставляет метод rbox(), возвращающий bounding box с учётом всех родительских трансформаций:

let group = draw.group().move(100, 100);
let rect = group.rect(50, 30);
console.log(rect.bbox());  // координаты относительно элемента
console.log(rect.rbox());  // координаты относительно корня SVG
  • bbox() — локальные координаты элемента.
  • rbox() — глобальные координаты элемента в контексте всего SVG.

Получение bbox сложных элементов

Для групп и сложных контейнеров bbox() возвращает прямоугольник, охватывающий все дочерние элементы:

let group = draw.group();
group.rect(50, 50).move(0, 0);
group.circle(30).move(40, 20);

console.log(group.bbox());
// x = 0, y = 0, width = 70, height = 50

bbox() автоматически учитывает смещения и размеры всех дочерних объектов, формируя минимальный охватывающий прямоугольник.

bbox и трансформации

Трансформации элементов влияют на возвращаемый объект bbox:

let rect = draw.rect(100, 50).move(10, 20).rotate(45, 10, 20);
console.log(rect.bbox());

В этом случае координаты и размеры отражают прямоугольник после поворота вокруг указанной точки (10, 20).

  • translate смещает bbox на заданные координаты.
  • scale увеличивает или уменьшает размеры bbox.
  • rotate изменяет положение и размеры прямоугольника bbox, формируя минимальный охватывающий прямоугольник после поворота.

Использование bbox для динамической анимации

Метод bbox() широко применяется для анимации элементов, например, чтобы центрировать объект относительно другого:

let rect = draw.rect(100, 50);
let circle = draw.circle(50);

circle.animate(1000).during(function(pos) {
  let box = rect.bbox();
  this.center(box.cx, box.cy);
});

В объекте bbox можно получить дополнительные свойства центра:

let box = rect.bbox();
console.log(box.cx, box.cy); // координаты центра прямоугольника
  • cx = x + width / 2
  • cy = y + height / 2

Это упрощает позиционирование и выравнивание элементов.

Производительность и ограничения

  • bbox() вычисляется динамически, поэтому для больших сцен с множеством элементов частые вызовы могут снижать производительность.
  • Не все SVG-элементы поддерживают bbox одинаково: текстовые элементы могут возвращать bbox, который отличается от визуально наблюдаемого размера шрифта.
  • Для элементов с масками и clip-path bbox может быть больше, чем визуально отображаемая область.

Полезные приёмы работы с bbox

  1. Сравнение размеров элементов:
let rectBox = rect.bbox();
let circleBox = circle.bbox();

if (rectBox.width > circleBox.width) {
  console.log('Прямоугольник шире круга');
}
  1. Автоматическое выравнивание:
let rect1 = draw.rect(80, 40);
let rect2 = draw.rect(60, 30);

let box1 = rect1.bbox();
rect2.move(box1.x + box1.width / 2 - rect2.bbox().width / 2, box1.y);
  1. Обновление bbox после трансформаций:
rect.scale(2);
let updatedBox = rect.bbox(); // размеры изменились

Bounding box в SVG.js — универсальный инструмент для анализа размеров, позиции и взаимодействия элементов. Он позволяет работать как с простыми фигурами, так и с группами, учитывая трансформации и иерархию SVG. Использование bbox() и rbox() обеспечивает точное позиционирование, выравнивание и создание динамических визуальных эффектов.

Оглавление