Линии: стиль, толщина, цвет, alpha

В библиотеке PixiJS для создания линий используется класс Graphics. Этот класс позволяет строить линии и фигуры с разнообразными стилями и свойствами. Линия в PixiJS — это последовательность соединённых точек, которые можно стилизовать по толщине, цвету, прозрачности и типу обводки.

const graphics = new PIXI.Graphics();

После создания объекта Graphics можно задавать стили линии с помощью метода lineStyle().

Настройка толщины линии

Толщина линии определяется первым параметром метода lineStyle():

graphics.lineStyle(5); // Толщина линии 5 пикселей
graphics.moveTo(50, 50);
graphics.lineTo(200, 50);

Ключевые моменты:

  • Значение толщины в пикселях.
  • Толщина влияет только на последующие линии после вызова lineStyle().
  • Толщина линии может быть дробной (2.5), что создаёт эффект антиалиасинга.

Цвет линии

Цвет задаётся вторым параметром lineStyle() и указывается в формате HEX:

graphics.lineStyle(5, 0xFF0000); // Красная линия
graphics.moveTo(50, 70);
graphics.lineTo(200, 70);

Особенности:

  • Цвет принимает число в шестнадцатеричном формате (0xRRGGBB).
  • Можно динамически менять цвет между линиями, создавая разноцветные сегменты.

Прозрачность линии (Alpha)

Третий параметр метода lineStyle() отвечает за прозрачность линии:

graphics.lineStyle(5, 0x00FF00, 0.5); // Полупрозрачная зелёная линия
graphics.moveTo(50, 90);
graphics.lineTo(200, 90);

Важные моменты:

  • Alpha принимает значения от 0 (полностью прозрачная) до 1 (полностью непрозрачная).
  • Прозрачность может комбинироваться с цветом для создания мягких визуальных эффектов.

Применение к сложным формам

PixiJS позволяет рисовать сложные линии с кривыми и соединёнными сегментами. Для этого используются методы moveTo() и lineTo(), а также кривые bezierCurveTo() и quadraticCurveTo().

graphics.lineStyle(4, 0x0000FF, 0.8);
graphics.moveTo(100, 100);
graphics.lineTo(200, 100);
graphics.lineTo(200, 200);
graphics.lineTo(100, 200);
graphics.closePath();

Особенности:

  • closePath() соединяет последнюю точку с первой, замыкая фигуру.
  • Можно комбинировать линии с заливкой (beginFill(), endFill()), создавая контрастные фигуры.

Дополнительные параметры стиля линии

Метод lineStyle() поддерживает расширенные опции через объект:

graphics.lineStyle({
    width: 6,             // Толщина линии
    color: 0xFFA500,      // Цвет линии
    alpha: 0.7,           // Прозрачность
    alignment: 0.5,       // Центр линии по траектории (0 — внутрь, 1 — наружу)
    join: PIXI.LINE_JOIN.ROUND,   // Соединение углов: MITER, ROUND, BEVEL
    cap: PIXI.LINE_CAP.ROUND      // Концы линии: BUTT, ROUND, SQUARE
});

Пояснения:

  • alignment определяет расположение линии относительно траектории: внутрь, по центру или наружу.
  • join управляет видом углов при соединении сегментов.
  • cap задаёт стиль концов линии, влияя на визуальное завершение каждого сегмента.

Изменение стиля динамически

PixiJS позволяет менять свойства линии в процессе рисования. Для этого достаточно вызвать lineStyle() с новыми параметрами:

graphics.moveTo(50, 250);
graphics.lineTo(150, 250);

graphics.lineStyle(8, 0xFF00FF, 1); // Новый стиль
graphics.lineTo(250, 250);

Особенности:

  • Каждый вызов lineStyle() влияет на линии, нарисованные после него.
  • Это позволяет создавать линии с градиентной толщиной, цветом и прозрачностью.

Советы по производительности

  • Для сложных сцен стоит объединять линии в один объект Graphics, чтобы минимизировать количество draw calls.
  • Частое изменение стиля или создание большого числа отдельных объектов Graphics может снижать производительность на слабых устройствах.
  • Использование cacheAsBitmap = true позволяет рендерить статические линии один раз, а затем отображать их как текстуру.

Примеры комбинирования параметров

const graphics = new PIXI.Graphics();

// Синяя линия с округлыми углами и концами
graphics.lineStyle({
    width: 5,
    color: 0x0000FF,
    alpha: 0.9,
    join: PIXI.LINE_JOIN.ROUND,
    cap: PIXI.LINE_CAP.ROUND
});
graphics.moveTo(50, 300);
graphics.lineTo(200, 300);

// Красная линия с квадратными концами
graphics.lineStyle({
    width: 3,
    color: 0xFF0000,
    alpha: 1,
    cap: PIXI.LINE_CAP.SQUARE
});
graphics.moveTo(50, 320);
graphics.lineTo(200, 320);

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

Оглавление