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

Для работы с графикой в PixiJS необходимо создать экземпляр Application, который объединяет рендерер и сцену (stage). Базовый код выглядит следующим образом:

const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb,
});
document.body.appendChild(app.view);

Экземпляр Application предоставляет доступ к app.stage, где размещаются все графические объекты. Рендеринг происходит автоматически при добавлении объектов на сцену.

Использование объекта Graphics

Для рисования фигур в PixiJS применяется класс PIXI.Graphics. Этот объект позволяет создавать линии, кривые, многоугольники и закрашенные фигуры.

const graphics = new PIXI.Graphics();
app.stage.addChild(graphics);

Методы Graphics делятся на несколько категорий: линии, заливки, кривые, многоугольники.

Линии и контуры

Для рисования линий используется метод lineStyle(width, color, alpha), где:

  • width — толщина линии в пикселях,
  • color — цвет линии в формате 0xRRGGBB,
  • alpha — прозрачность линии (0–1).
graphics.lineStyle(4, 0xff0000, 1);
graphics.moveTo(50, 50);  // начальная точка
graphics.lineTo(200, 50); // конечная точка
graphics.lineTo(200, 200);
graphics.closePath();      // замыкает линию на начальной точке

moveTo(x, y) перемещает “перо” в указанную точку без рисования, а lineTo(x, y) рисует линию до новой позиции. Метод closePath() автоматически соединяет последнюю точку с первой, что удобно для многоугольников.

Заливка фигур

Заливка начинается с вызова beginFill(color, alpha) и завершается endFill(). Все линии и контуры, нарисованные между этими вызовами, будут залиты указанным цветом.

graphics.beginFill(0x00ff00, 0.5);
graphics.drawRect(300, 50, 150, 100); // прямоугольник с заливкой
graphics.endFill();

Аналогично можно рисовать круги, эллипсы и многоугольники:

graphics.beginFill(0x0000ff);
graphics.drawCircle(150, 300, 50); // круг
graphics.drawEllipse(400, 300, 80, 40); // эллипс
graphics.endFill();

Многоугольники и произвольные контуры

Для создания сложных фигур используется drawPolygon(). Этот метод принимает массив координат [x1, y1, x2, y2, …] или массив объектов {x, y}.

graphics.beginFill(0xffff00);
graphics.lineStyle(2, 0x000000);

const points = [100, 400, 150, 450, 120, 500, 80, 480];
graphics.drawPolygon(points);
graphics.endFill();

Для произвольных контуров удобно использовать последовательность moveTo и lineTo, комбинируя с bezierCurveTo и quadraticCurveTo для кривых:

graphics.lineStyle(3, 0xff00ff);
graphics.moveTo(500, 400);
graphics.quadraticCurveTo(550, 350, 600, 400); // квадратичная кривая
graphics.bezierCurveTo(610, 420, 640, 380, 650, 400); // кубическая кривая

Создание многоугольников с динамическими вершинами

PixiJS позволяет генерировать массив вершин программно. Это полезно для фигур, основанных на алгоритмах или пользовательском вводе:

const polygonPoints = [];
for (let i = 0; i < 6; i++) {
    const angle = (i / 6) * Math.PI * 2;
    polygonPoints.push(400 + 100 * Math.cos(angle));
    polygonPoints.push(300 + 100 * Math.sin(angle));
}

graphics.beginFill(0xffa500, 0.7);
graphics.drawPolygon(polygonPoints);
graphics.endFill();

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

Комбинирование линий, заливки и кривых

PixiJS поддерживает комбинирование методов для сложных композиций:

graphics.lineStyle(2, 0x000000);
graphics.beginFill(0x00ffff, 0.5);
graphics.moveTo(100, 100);
graphics.lineTo(150, 150);
graphics.quadraticCurveTo(200, 50, 250, 150);
graphics.bezierCurveTo(300, 200, 350, 100, 400, 150);
graphics.closePath();
graphics.endFill();

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

Настройка внешнего вида контуров

Для изменения вида линий можно использовать дополнительные параметры:

  • lineTextureStyle(texture) — применять текстуру к линии.
  • lineAlpha(alpha) — устанавливать прозрачность линии.
  • lineJoin и lineCap — задают стиль соединений и концов линии (bevel, round, miter).
graphics.lineStyle({ width: 5, color: 0xff0000, alpha: 0.8, join: 'round', cap: 'round' });

Работа с многослойной графикой

Создание нескольких объектов Graphics и их добавление на сцену позволяет управлять слоями и порядком отрисовки:

const background = new PIXI.Graphics();
background.beginFill(0xcccccc);
background.drawRect(0, 0, 800, 600);
background.endFill();

const polygon = new PIXI.Graphics();
polygon.beginFill(0xff0000);
polygon.drawPolygon([50,50,150,50,100,150]);
polygon.endFill();

app.stage.addChild(background, polygon);

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

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

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

Методы lineStyle, beginFill, drawPolygon, moveTo, lineTo, quadraticCurveTo и bezierCurveTo формируют базу для построения любой 2D-графики, а структура Application и stage обеспечивает простое управление сценой и рендерингом.

Оглавление