HTMLText и встроенный HTML-рендеринг

PixiJS предоставляет мощные возможности для отображения текста с использованием как стандартного класса Text, так и более гибкого подхода с HTML-рендерингом через HTMLText. Этот подход особенно полезен для сложной типографики, где требуется поддержка форматирования, стилей и встроенных элементов HTML.

Основы `HTMLText`

HTMLText в PixiJS позволяет рендерить текст с применением HTML-подобных тегов. Основная цель класса — дать возможность использовать стилизация текста, аналогичную веб-странице, без необходимости вручную делить текст на отдельные объекты или управлять стилями каждого фрагмента.

Создание объекта HTMLText:

import { HTMLText } from 'pixi.js';

const htmlString = `
  <span style="color: red; font-weight: bold;">Красный жирный текст</span>
  <span style="font-size: 24px;">Большой шрифт</span>
`;

const htmlText = new HTMLText(htmlString, {
  fontFamily: 'Arial',
  fontSize: 18,
  fill: '#ffffff',
  wordWrap: true,
  wordWrapWidth: 400
});

app.stage.addChild(htmlText);

Ключевой особенностью является использование CSS-подобных стилей внутри span и div. PixiJS интерпретирует их и создаёт визуальное представление текста в канвасе.

Поддерживаемые CSS-свойства

HTMLText не поддерживает полный CSS, но основные свойства работают корректно:

color — цвет текста.
font-weight — жирность (normal, bold).
font-style — стиль шрифта (italic).
font-size — размер текста.
text-decoration — подчёркивание, зачёркивание.
font-family — шрифт текста.
background-color — фон за текстом (ограниченно).
line-height — межстрочный интервал.
text-align — выравнивание по горизонтали.

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

Встроенные теги и структура текста

Основной набор тегов для форматирования:

<span> — стилизованный фрагмент текста.
<div> — блочный контейнер текста.
<br> — перенос строки.
<b>, <i>, <u> — стандартные HTML-теги для жирного, курсивного и подчёркнутого текста.

Пример сложного форматирования:

const complexHTML = `
  <div style="font-size: 20px; color: #00ff00;">
    Заголовок
  </div>
  <div style="font-size: 16px; color: #ffffff;">
    Обычный текст с <b>жирным</b> и <i>курсивом</i>.
    <br>
    Новая строка текста
  </div>
`;

const htmlTextComplex = new HTMLText(complexHTML, { wordWrap: true, wordWrapWidth: 500 });
app.stage.addChild(htmlTextComplex);

Каждый <div> создаёт отдельный визуальный блок, позволяя комбинировать различные стили в одном объекте.

Настройка поведения текста

HTMLText наследует свойства от базового класса Text, что позволяет управлять:

Выравниванием текста: align = 'left' | 'center' | 'right'.
Обтеканием текста: через wordWrap = true и wordWrapWidth.
Масштабированием и трансформациями: через стандартные методы PixiJS, такие как scale.set(), rotation, position.

Пример с выравниванием:

htmlTextComplex.style.align = 'center';
htmlTextComplex.x = app.screen.width / 2;
htmlTextComplex.y = 50;
htmlTextComplex.pivot.x = htmlTextComplex.width / 2;

Динамическое обновление HTML

Объект HTMLText поддерживает динамическое обновление содержимого через свойство html:

htmlTextComplex.html = `
  <div style="color: yellow; font-size: 22px;">Обновлённый текст</div>
`;

После изменения содержимого текст автоматически перерендеривается, сохраняя стили и параметры форматирования.

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

Большие объёмы текста: чем больше HTML-структура, тем выше нагрузка на GPU, особенно при анимации.
Не все CSS-свойства: сложные свойства вроде float, flex, grid не поддерживаются.
Рендеринг изображений внутри HTML: прямого встроенного <img> нет, но можно использовать <sprite> через кастомные расширения.
События мыши: можно назначать интерактивность всему объекту HTMLText, но выделение по фрагментам не поддерживается стандартно.

Комбинирование с другими элементами PixiJS

HTMLText легко интегрируется с контейнерами, спрайтами и графикой:

const container = new PIXI.Container();
container.addChild(htmlTextComplex);

const background = new PIXI.Graphics();
background.beginFill(0x000000, 0.5);
background.drawRoundedRect(0, 0, htmlTextComplex.width + 20, htmlTextComplex.height + 20, 10);
background.endFill();

container.addChildAt(background, 0); // фон под текстом
app.stage.addChild(container);

Такой подход позволяет создавать панели, всплывающие подсказки и сложные интерфейсы с текстом, полностью стилизованным через HTML.

Анимация текста

Для анимации текста можно использовать Tween-библиотеки или встроенные методы PixiJS:

app.ticker.add(() => {
  htmlTextComplex.rotation += 0.01;
  htmlTextComplex.alpha = 0.5 + 0.5 * Math.sin(performance.now() / 500);
});

Благодаря рендерингу на канвасе анимация остаётся плавной даже при сложных стилях текста.