Класс Graphics как инструмент векторной графики

Класс Graphics в PixiJS является мощным инструментом для работы с векторной графикой. Он позволяет создавать линии, кривые, многоугольники, круги, прямоугольники и сложные фигуры с использованием кода, без необходимости загружать растровые изображения. Все объекты Graphics рендерятся на GPU, что обеспечивает высокую производительность и плавную анимацию.

Создание объекта Graphics выглядит следующим образом:

const graphics = new PIXI.Graphics();

После создания объекта можно задавать свойства заливки, линий и форм.

Настройка линий и заливки

Линии создаются с помощью метода lineStyle. Его параметры включают:

  • width — толщина линии в пикселях
  • color — цвет линии в формате 0xRRGGBB
  • alpha — прозрачность линии (от 0 до 1)

Пример:

graphics.lineStyle(5, 0xFF0000, 1); // красная линия толщиной 5 пикселей

Заливка задается методами beginFill и endFill. beginFill принимает цвет и прозрачность:

graphics.beginFill(0x00FF00, 0.5); // зеленая заливка с 50% прозрачностью
graphics.drawRect(50, 50, 100, 100); 
graphics.endFill();

Важно всегда использовать endFill(), чтобы корректно завершить заливку и избежать конфликтов при создании нескольких фигур.

Основные фигуры

Прямоугольники и квадраты

graphics.beginFill(0x0000FF);
graphics.drawRect(x, y, width, height);
graphics.endFill();

Для создания квадрата можно использовать drawRect с одинаковой шириной и высотой.

Круги и эллипсы

  • drawCircle(x, y, radius) — рисует круг с заданным радиусом
  • drawEllipse(x, y, width, height) — рисует эллипс с заданной шириной и высотой
graphics.beginFill(0xFFFF00);
graphics.drawCircle(200, 200, 50);
graphics.endFill();

Линии и многоугольники

  • moveTo(x, y) — устанавливает начальную точку линии
  • lineTo(x, y) — рисует линию к следующей точке
  • drawPolygon(points) — рисует замкнутый многоугольник по массиву координат
graphics.lineStyle(2, 0xFF00FF);
graphics.moveTo(300, 300);
graphics.lineTo(400, 300);
graphics.lineTo(350, 400);
graphics.closePath(); // замыкает линию

drawPolygon принимает как массив [x1, y1, x2, y2, x3, y3...], так и массив объектов {x, y}.

Комбинирование фигур и прозрачность

Graphics позволяет создавать сложные композиции, комбинируя несколько фигур. Каждая фигура может иметь собственные стиль линии и заливку. Прозрачность и цвета можно изменять динамически через свойства alpha, tint и blendMode.

graphics.beginFill(0x00FFFF, 0.7);
graphics.drawEllipse(100, 100, 80, 40);
graphics.endFill();

graphics.lineStyle(3, 0xFF0000);
graphics.drawCircle(100, 100, 50);

Маски и интерактивность

Объекты Graphics можно использовать как маски для других спрайтов и контейнеров:

const mask = new PIXI.Graphics();
mask.beginFill(0xFFFFFF);
mask.drawCircle(200, 200, 100);
mask.endFill();

sprite.mask = mask;

Интерактивные события (клик, наведение) работают только если у объекта установлен флаг interactive = true и при необходимости hitArea:

graphics.interactive = true;
graphics.buttonMode = true;
graphics.on('pointerdown', () => {
    console.log('Фигура нажата!');
});

Анимация и динамическая графика

Объекты Graphics можно изменять в реальном времени. Это удобно для создания динамических интерфейсов, игр или визуализаций данных. Например, изменение координат, размеров или цветов можно делать в игровом цикле:

app.ticker.add(() => {
    graphics.clear(); // очищает предыдущую графику
    graphics.beginFill(Math.random() * 0xFFFFFF);
    graphics.drawCircle(Math.random() * 400, Math.random() * 400, 50);
    graphics.endFill();
});

Метод clear() удаляет все линии и заливки, позволяя перерисовывать фигуры без накопления старых объектов.

Оптимизация работы с Graphics

  • Для статичных фигур рекомендуется использовать generateCanvasTexture() или renderTexture, чтобы превратить векторные объекты в текстуры и снизить нагрузку на GPU при рендеринге сложных сцен.
  • Использование lineStyle с минимальной толщиной и упрощение сложных многоугольников уменьшает количество вычислений.
  • Группировка объектов в контейнеры (PIXI.Container) помогает управлять трансформациями и скрытием большого числа графических объектов.

Заключение по возможностям

Класс Graphics сочетает гибкость в создании произвольных форм, возможность анимации и интеграции с интерактивностью, что делает его незаменимым инструментом для разработки визуально насыщенных проектов на PixiJS.

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

Оглавление