Рисование прямоугольников и скруглённых прямоугольников

Для отображения простых геометрических фигур в PixiJS используется класс PIXI.Graphics, который предоставляет методы для рисования линий, заливок, кривых и фигур. Прямоугольник является одной из базовых фигур и может быть нарисован с помощью метода drawRect(x, y, width, height).

Пример создания простого прямоугольника:

const graphics = new PIXI.Graphics();

// Задаём цвет заливки
graphics.beginFill(0xff0000); // Красный цвет в формате 0xRRGGBB

// Рисуем прямоугольник
graphics.drawRect(50, 50, 200, 100);

// Завершаем заливку
graphics.endFill();

// Добавляем графику на сцену
app.stage.addChild(graphics);

Пояснение ключевых параметров метода drawRect:

  • x и y — координаты верхнего левого угла прямоугольника.
  • width и height — ширина и высота фигуры в пикселях.

Для изменения цвета, прозрачности или границы используется комбинация методов beginFill, lineStyle и endFill:

graphics.lineStyle(4, 0x0000ff, 1); // Толщина линии 4, синий цвет, полная непрозрачность
graphics.beginFill(0x00ff00, 0.5);  // Зелёная заливка с 50% прозрачностью
graphics.drawRect(100, 100, 150, 75);
graphics.endFill();

Скруглённые прямоугольники

PixiJS позволяет создавать прямоугольники с закруглёнными углами через метод drawRoundedRect(x, y, width, height, radius). Аргумент radius определяет радиус скругления углов.

Пример:

const rounded = new PIXI.Graphics();
rounded.beginFill(0xffa500); // Оранжевая заливка
rounded.lineStyle(2, 0x000000); // Черная граница толщиной 2px
rounded.drawRoundedRect(200, 200, 180, 90, 20); // Скругление углов радиусом 20
rounded.endFill();
app.stage.addChild(rounded);

Особенности работы со скруглёнными прямоугольниками:

  • Радиус скругления не должен превышать половины меньшей стороны прямоугольника, иначе углы будут искажены.
  • Скругление применяется ко всем четырём углам одновременно. Для создания фигур с разными радиусами на каждом углу потребуется использовать комбинацию moveTo, lineTo и arcTo.

Настройка границ и прозрачности

Для придания фигурам более выразительного вида можно использовать lineStyle, который позволяет настроить толщину, цвет и прозрачность границы:

graphics.lineStyle(5, 0x123456, 0.8); // Толщина 5px, цвет #123456, 80% непрозрачность
graphics.beginFill(0xabcdef, 0.6);
graphics.drawRoundedRect(50, 250, 150, 100, 15);
graphics.endFill();

Методы beginFill и lineStyle можно вызывать несколько раз для создания фигур с множественными слоями и градиентами (через маски и текстуры).

Комбинирование прямоугольников с другими фигурами

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

const complex = new PIXI.Graphics();

// Первый прямоугольник
complex.beginFill(0xff0000);
complex.drawRect(10, 10, 100, 50);
complex.endFill();

// Скруглённый прямоугольник поверх
complex.beginFill(0x00ff00, 0.7);
complex.drawRoundedRect(50, 50, 120, 60, 10);
complex.endFill();

app.stage.addChild(complex);

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

  • Для статичных фигур лучше создавать один объект Graphics и рисовать все элементы внутри него.
  • Если требуется часто обновлять форму или цвет, стоит использовать отдельные объекты Graphics для каждой фигуры, чтобы не перерисовывать всё сразу.
  • Для анимаций прямоугольников можно комбинировать Graphics с текстурами и спрайтами для повышения FPS, особенно при большом количестве объектов на сцене.

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

PixiJS позволяет делать фигуры интерактивными с помощью свойства interactive и событий мыши:

const interactiveRect = new PIXI.Graphics();
interactiveRect.beginFill(0x008800);
interactiveRect.drawRect(300, 50, 120, 80);
interactiveRect.endFill();
interactiveRect.interactive = true;

interactiveRect.on('pointerdown', () => {
    interactiveRect.tint = 0xff0000; // Меняем цвет при клике
});

app.stage.addChild(interactiveRect);

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

Оглавление