Объект TextStyle: шрифт, размер, цвет

TextStyle в PixiJS является фундаментальным инструментом для создания и управления стилем текста в 2D-графике. Он определяет визуальные свойства текста, такие как шрифт, размер, цвет, обводка, выравнивание и многое другое. В PixiJS TextStyle тесно связан с объектом PIXI.Text, который отображает текстовую информацию на канве.

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

Объект создается с помощью конструктора PIXI.TextStyle и принимает объект с настройками:

const style = new PIXI.TextStyle({
    fontFamily: "Arial",
    fontSize: 36,
    fill: "#ff0000",
    fontWeight: "bold",
    align: "center",
    stroke: "#000000",
    strokeThickness: 4,
    dropShadow: true,
    dropShadowColor: "#000000",
    dropShadowDistance: 6
});

Каждое свойство отвечает за отдельный визуальный аспект текста:

  • fontFamily — семейство шрифтов, поддерживаются стандартные и пользовательские шрифты.
  • fontSize — размер шрифта в пикселях или процентах.
  • fill — цвет текста, может быть строкой с HEX, RGB, RGBA или массивом для градиента.
  • fontWeight — толщина текста: normal, bold, bolder, lighter или числовое значение.
  • align — выравнивание текста внутри контейнера: left, center, right.
  • stroke — цвет обводки текста.
  • strokeThickness — толщина обводки в пикселях.
  • dropShadow — включение тени текста.
  • dropShadowColor — цвет тени.
  • dropShadowDistance — смещение тени относительно текста.

Основные свойства шрифта

  • fontFamily позволяет использовать как системные шрифты, так и подключенные через CSS или @font-face. При отсутствии указанного шрифта PixiJS использует дефолтный Arial.
  • fontSize задается числом и определяет высоту символа в пикселях. Можно динамически менять размер, создавая анимации текста или адаптивные интерфейсы.
  • fontWeight управляет визуальной тяжестью символов, важно при работе с жирными заголовками или кнопками.

Цвет и градиенты текста

Свойство fill может быть не только одноцветным, но и массивом для создания линейного градиента:

const gradientStyle = new PIXI.TextStyle({
    fontFamily: "Verdana",
    fontSize: 48,
    fill: ["#ff0000", "#00ff00", "#0000ff"], // градиент
    align: "center"
});

Градиенты работают слева направо по строке текста и создают плавный переход между цветами.

Обводка и тени

Обводка (stroke и strokeThickness) помогает выделить текст на сложном фоне. Тень (dropShadow) добавляет объем и глубину:

const shadowStyle = new PIXI.TextStyle({
    fontFamily: "Comic Sans MS",
    fontSize: 50,
    fill: "#ffffff",
    stroke: "#000000",
    strokeThickness: 5,
    dropShadow: true,
    dropShadowColor: "#555555",
    dropShadowBlur: 4,
    dropShadowAngle: Math.PI / 6,
    dropShadowDistance: 10
});
  • dropShadowBlur контролирует размытие тени.
  • dropShadowAngle задает направление источника света для тени.
  • dropShadowDistance указывает смещение тени относительно текста.

Выравнивание и обрезка

  • align определяет горизонтальное выравнивание текста в пределах контейнера.
  • Для вертикального выравнивания можно использовать контейнеры PixiJS или позиционирование y.
  • Свойства wordWrap и wordWrapWidth управляют автоматическим переносом текста на новую строку:
const wrappedStyle = new PIXI.TextStyle({
    fontSize: 24,
    fill: "#333333",
    wordWrap: true,
    wordWrapWidth: 200
});

Динамическое изменение стиля

Свойства TextStyle можно изменять в любой момент, чтобы обновлять отображение текста без пересоздания объекта:

text.style.fontSize = 60;
text.style.fill = "#00ff00";
text.style.fontWeight = "bold";

После изменения стиля объект автоматически перерисовывает текст с новыми параметрами.

Наследование и комбинирование стилей

TextStyle позволяет создавать базовые стили и расширять их для разных элементов интерфейса:

const baseStyle = new PIXI.TextStyle({ fontFamily: "Arial", fontSize: 30, fill: "#ffffff" });
const titleStyle = new PIXI.TextStyle({ ...baseStyle, fontSize: 48, fontWeight: "bold" });

Это упрощает поддержку единого визуального языка приложения.

Совместимость с мультимедиа

TextStyle поддерживает прозрачность через RGBA, а также интеграцию с фильтрами PixiJS (PIXI.filters), что позволяет создавать свечение, размытие, туман и другие эффекты поверх текста.

Оптимизация производительности

Для большого количества текстовых объектов рекомендуется использовать BitmapText с TextStyle, так как это снижает нагрузку на рендеринг, особенно при анимации и изменении цветов или размеров текста.

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

Оглавление