TextBlock: шрифт, выравнивание, перенос, тени

TextBlock в Babylon.js: Шрифт, выравнивание, перенос, тени

Babylon.js предоставляет мощные средства для создания и отображения текстов в 3D-пространстве. Одним из таких средств является объект TextBlock, который позволяет легко интегрировать текстовые элементы в сцены, контролируя их шрифт, выравнивание, перенос, а также добавлять различные визуальные эффекты, такие как тени.

Для создания объекта TextBlock необходимо использовать класс BABYLON.GUI.TextBlock. Этот объект представляет собой текстовый блок, который может быть размещен на AdvancedDynamicTexture (ADT) — специальном слое GUI, который служит для отображения различных интерфейсных элементов.

Пример создания базового TextBlock:

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
var textBlock = new BABYLON.GUI.TextBlock();
textBlock.text = "Пример текста";
advancedTexture.addControl(textBlock);

После этого текст будет отображаться в центре экрана. Однако для более тонкой настройки внешнего вида текста потребуется работать с различными свойствами объекта TextBlock.

Шрифт

В TextBlock можно настроить множество параметров, связанных с шрифтом, что позволяет гибко управлять его отображением.

Размер шрифта

Для изменения размера текста используется свойство fontSize. Это число, которое указывает размер шрифта в пикселях. Чем больше значение, тем крупнее текст.

textBlock.fontSize = 48;

Шрифт

Для задания шрифта можно использовать свойство fontFamily. Это строка, в которой указывается имя шрифта, поддерживаемое браузером.

textBlock.fontFamily = "Arial, Helvetica, sans-serif";

Если шрифт не доступен, то будет использован стандартный шрифт, указанный в системных настройках.

Жирность и стиль

Свойство fontWeight позволяет устанавливать жирность шрифта, а свойство fontStyle — его стиль (например, курсив).

textBlock.fontWeight = "bold";
textBlock.fontStyle = "italic";

Выравнивание текста

Текст, отображаемый через TextBlock, можно выравнивать по различным осям. Выравнивание осуществляется с помощью свойств textHorizontalAlignment и textVerticalAlignment.

Горизонтальное выравнивание

Для изменения горизонтального выравнивания текста существует несколько вариантов: LEFT, CENTER, RIGHT. Эти значения указывают, как текст будет располагаться по горизонтали внутри блока.

textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;

Вертикальное выравнивание

Аналогично горизонтальному выравниванию, вертикальное выравнивание текста можно настроить с помощью textVerticalAlignment. Доступные значения: TOP, CENTER, BOTTOM.

textBlock.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;

Перенос текста

Для корректного отображения длинных строк текста можно использовать автоматический перенос. Это достигается с помощью свойства resizeToFit. Если оно установлено в true, текст будет автоматически переноситься, чтобы уместиться в заданных размерах.

textBlock.resizeToFit = true;

Также можно ограничить размер блока, в который помещается текст, с помощью свойств width и height.

textBlock.width = "200px";
textBlock.height = "100px";

В этом случае текст будет автоматически подгоняться под эти размеры, что позволяет гибко работать с динамическими текстами.

Тени

Одной из интересных особенностей TextBlock является возможность добавления теней. Для этого используется свойство shadowColor, которое задает цвет тени, и свойство shadowOffset, которое определяет смещение тени относительно текста.

Цвет тени

Цвет тени задается через строку, например, в формате RGB или с использованием стандартных цветовых имен.

textBlock.shadowColor = "rgba(0, 0, 0, 0.5)";

Смещение тени

Смещение тени можно задать через свойство shadowOffset, которое принимает объект с двумя параметрами: x и y. Эти значения определяют, как далеко тень будет от текста по осям X и Y соответственно.

textBlock.shadowOffset = new BABYLON.Vector2(2, 2);

Пример использования

Ниже приведен пример более сложного текстового блока с использованием шрифта, выравнивания, переноса и тени:

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

var textBlock = new BABYLON.GUI.TextBlock();
textBlock.text = "Это пример текста с тенью, выравниванием и переносом";
textBlock.fontSize = 36;
textBlock.fontFamily = "Verdana, sans-serif";
textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
textBlock.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
textBlock.resizeToFit = true;
textBlock.shadowColor = "rgba(0, 0, 0, 0.5)";
textBlock.shadowOffset = new BABYLON.Vector2(4, 4);

advancedTexture.addControl(textBlock);

В этом примере текст отображается по центру экрана с тенью и автоматическим переносом строк. Такой подход позволяет легко работать с динамическими текстами в интерфейсе, улучшая визуальное восприятие информации.

Заключение

TextBlock является мощным инструментом для работы с текстом в Babylon.js, позволяя гибко настроить шрифт, выравнивание, перенос и тени. Эти возможности позволяют создавать сложные интерфейсы и отображать информацию в 3D-пространстве с высокой степенью детализации и визуальной привлекательности.

Оглавление