Обводка текста stroke

В PixiJS текстовые объекты создаются с помощью класса PIXI.Text. Для придания текста выразительности и визуальной глубины используется свойство обводки, называемое stroke. Обводка представляет собой контур вокруг символов, который можно настроить по цвету, толщине и стилю.

Создание текста с обводкой

Текст создается через объект PIXI.TextStyle, где задаются все параметры стиля, включая обводку:

const style = new PIXI.TextStyle({
    fontFamily: "Arial",
    fontSize: 48,
    fill: "#ffffff",       // цвет заливки текста
    stroke: "#ff0000",     // цвет обводки
    strokeThickness: 4,    // толщина обводки
});

const text = new PIXI.Text("Привет, PixiJS!", style);
app.stage.addChild(text);
  • stroke — цвет контура, может быть задан в любом CSS-формате (hex, rgb, rgba).
  • strokeThickness — толщина обводки в пикселях. Значения выше 0 включают обводку. Чем больше число, тем шире контур.

Тонкая настройка обводки

Обводка может быть динамически изменена после создания текста:

text.style.stroke = "#00ff00";
text.style.strokeThickness = 6;

Для плавной визуальной вариации можно применять анимацию толщины обводки:

let thickness = 1;
app.ticker.add(() => {
    thickness = (thickness % 10) + 0.1;
    text.style.strokeThickness = thickness;
});

Это создаёт эффект “пульсирующей” обводки вокруг текста.

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

Обводка и заливка текста обрабатываются независимо:

const style = new PIXI.TextStyle({
    fontSize: 64,
    fill: "yellow",
    stroke: "black",
    strokeThickness: 8,
    dropShadow: true,
    dropShadowColor: "#000000",
    dropShadowBlur: 4
});
  • Обводка рисуется поверх заливки.
  • Можно комбинировать с тенью (dropShadow), чтобы создать более выразительный визуальный эффект.
  • Цвет обводки можно делать прозрачным с использованием RGBA, например rgba(0,0,0,0.5).

Использование градиентов и текстур для обводки

PixiJS 7 поддерживает кастомные шейдерные решения для более сложной стилизации обводки, включая градиенты:

// Создание спрайта с текстурной обводкой
const canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 100;
const ctx = canvas.getContext("2d");

ctx.font = "48px Arial";
ctx.lineWidth = 6;
ctx.strokeStyle = "#ff00ff";
ctx.strokeText("Текст", 0, 50);
ctx.fillStyle = "#00ffff";
ctx.fillText("Текст", 0, 50);

const texture = PIXI.Texture.from(canvas);
const sprite = new PIXI.Sprite(texture);
app.stage.addChild(sprite);

Такой метод позволяет создавать обводку с градиентами, текстурами и сложной графикой, которую стандартный PIXI.Text реализовать не способен.

Ограничения и особенности

  1. Производительность: увеличение strokeThickness и большой размер шрифта могут сильно нагружать GPU при множестве текстовых объектов.
  2. Совместимость: старые версии PixiJS (<v5) имели ограниченную поддержку сглаживания обводки при масштабировании текста. Современные версии используют WebGL для более точного рендеринга.
  3. Трансформации: при масштабировании текста с обводкой линия контура масштабируется пропорционально, что может изменять визуальное восприятие.

Практические приёмы

  • Для эффекта “неонового текста” используют яркую обводку толщиной 6–10 px поверх заливки.
  • Для маленьких шрифтов часто применяют минимальную обводку 1–2 px, чтобы сохранить читаемость.
  • Комбинирование stroke с dropShadow создаёт объёмный эффект без использования сложных графических ресурсов.

Обводка текста в PixiJS является мощным инструментом для повышения читаемости и визуальной выразительности. Гибкая настройка цвета, толщины и комбинация с другими эффектами позволяет создавать динамичные и стильные интерфейсы.

Оглавление