Измерение размеров текста

SVG.js предоставляет удобные методы для работы с элементами текста, включая динамическое измерение их размеров. Измерение текста необходимо при позиционировании, обрезке или выравнивании элементов на канвасе.

Классический способ получения размеров текста в SVG.js — использование метода bbox(). Этот метод возвращает объект с координатами и размерами ограничивающего прямоугольника (Bounding Box).

const draw = SVG().addTo('body').size(600, 400);
const text = draw.text('Пример текста').font({ size: 24, family: 'Arial' });

const bbox = text.bbox();
console.log(bbox.width, bbox.height);

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

  • x — координата X верхнего левого угла;
  • y — координата Y верхнего левого угла;
  • width — ширина текста;
  • height — высота текста;
  • cx, cy — координаты центра текста.

Влияние шрифта на размеры текста

Размеры текста напрямую зависят от параметров шрифта:

text.font({ size: 30, family: 'Times New Roman', weight: 'bold' });

Изменение size, family, weight и style может кардинально изменить bbox(). Для точного позиционирования необходимо измерять текст после применения всех параметров шрифта.

Работа с многострочным текстом

SVG.js позволяет создавать многострочные элементы текста через tspan. Каждый tspan может иметь свои размеры, поэтому для корректного измерения нужно учитывать все линии:

const multiLineText = draw.text(add => {
  add.tspan('Первая строка').newLine();
  add.tspan('Вторая строка').newLine();
}).font({ size: 20 });

const multiBbox = multiLineText.bbox();
console.log(multiBbox.width, multiBbox.height);

bbox() учитывает все строки, возвращая размеры всего блока текста.

Динамическое измерение перед отрисовкой

Иногда необходимо вычислить размеры текста перед добавлением на канвас для корректного выравнивания. Для этого можно создать временный элемент, измерить его и удалить:

const tempText = draw.text('Временный текст').font({ size: 18 }).opacity(0);
const tempBbox = tempText.bbox();
tempText.remove();

Этот подход позволяет заранее рассчитать ширину и высоту без визуального отображения текста.

Точные измерения с учётом трансформаций

Методы bbox() и rbox() различаются по контексту координат:

  • bbox() — размеры в локальных координатах элемента;
  • rbox() — размеры с учётом трансформаций и родительских контейнеров.
text.rotate(45);
const localBbox = text.bbox();
const transformedBbox = text.rbox();

rbox() полезен при сложных трансформациях, например, при масштабировании, поворотах или вложенных группах.

Практическое использование измерений

Измерение текста необходимо для:

  • Выравнивания — центрирование по X или Y на основе bbox().width и bbox().height.
  • Обрезки — создание масок или ограничивающих прямоугольников.
  • Динамических интерфейсов — автоматическая подгонка размера контейнера под текст.
const container = draw.rect(200, 50).fill('#eee');
const label = draw.text('Динамический текст').font({ size: 16 });

const labelBbox = label.bbox();
label.center(container.cx(), container.cy());

Учет внутренних отступов и линий базовой линии

Точная работа с текстом требует понимания baseline. SVG.js учитывает базовую линию по умолчанию, но при необходимости можно применять смещение через dy или dominant-baseline:

text.attr({ 'dominant-baseline': 'middle' });
text.tspan('Смещение').dy(5);

Это особенно важно при сложной верстке многострочного текста и при выравнивании с графическими элементами.

Резюме по измерению текста

  • bbox() — локальные размеры текста;
  • rbox() — размеры с учетом трансформаций;
  • Тщательно выбирать шрифт и параметры перед измерением;
  • Для многострочного текста измерять блок целиком;
  • Динамические элементы можно измерять временно перед отображением;
  • Учёт базовой линии и смещений позволяет точнее позиционировать текст.

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

Оглавление