Рисование окружностей и эллипсов

PixiJS предоставляет мощный инструмент для создания графики на основе WebGL и Canvas через класс Graphics, который позволяет рисовать примитивы, включая линии, многоугольники, окружности и эллипсы. Для создания окружности или эллипса используется метод drawCircle и drawEllipse соответственно.

const graphics = new PIXI.Graphics();

// Пример окружности
graphics.beginFill(0xff0000); // цвет заливки
graphics.lineStyle(2, 0x000000); // толщина и цвет контура
graphics.drawCircle(150, 150, 50); // x, y, радиус
graphics.endFill();
app.stage.addChild(graphics);

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

  • beginFill(color, alpha) — начинает заливку фигуры. Цвет задается в формате 0xRRGGBB, alpha по умолчанию равен 1.
  • lineStyle(width, color, alpha) — задает стиль контура. Если не вызывать, контур не будет отображаться.
  • drawCircle(x, y, radius) — рисует окружность с центром в (x, y) и радиусом radius.
  • endFill() — завершает заливку текущей фигуры.

Для эллипсов используется аналогичный подход:

graphics.beginFill(0x00ff00);
graphics.lineStyle(3, 0x000000);
graphics.drawEllipse(300, 150, 80, 50); // x, y, радиусы по осям
graphics.endFill();
app.stage.addChild(graphics);

Особенности метода drawEllipse:

  • Первый параметр — координата x центра эллипса.
  • Второй параметр — координата y центра эллипса.
  • Третий параметр — горизонтальный радиус.
  • Четвёртый параметр — вертикальный радиус.

Работа с прозрачностью и цветами

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

graphics.beginFill(0x0000ff, 0.5); // синяя заливка с 50% прозрачностью
graphics.lineStyle(4, 0xff00ff, 0.8); // фиолетовый контур с 80% прозрачностью
graphics.drawEllipse(500, 200, 100, 60);
graphics.endFill();

Использование кривых и сегментов для окружностей

Хотя drawCircle создаёт идеальную окружность, иногда требуется более точная настройка, например, для сегментов или дуг. Для этого применяется arc:

graphics.beginFill(0xffff00);
graphics.lineStyle(2, 0x000000);
graphics.arc(200, 400, 70, 0, Math.PI / 2); // дуга от 0 до 90 градусов
graphics.endFill();

Параметры arc:

  • x, y — центр дуги.
  • radius — радиус.
  • startAngle и endAngle — углы в радианах.
  • anticlockwise — необязательный параметр, направление рисования дуги.

Для эллипсов с сегментами необходимо использовать трансформации, так как встроенной функции ellipseArc нет. Создание эллиптической дуги можно осуществить через arc и масштабирование контейнера:

const ellipseContainer = new PIXI.Container();
ellipseContainer.scale.set(1.5, 1); // масштаб по осям
app.stage.addChild(ellipseContainer);

const ellipseSegment = new PIXI.Graphics();
ellipseSegment.beginFill(0xffa500);
ellipseSegment.lineStyle(2, 0x000000);
ellipseSegment.arc(0, 0, 50, 0, Math.PI); // полу-дуга
ellipseSegment.endFill();

ellipseContainer.addChild(ellipseSegment);
ellipseContainer.position.set(400, 400);

Анимация окружностей и эллипсов

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

let radius = 10;
app.ticker.add(() => {
    graphics.clear();
    graphics.beginFill(0xff0000);
    graphics.drawCircle(150, 150, radius);
    graphics.endFill();
    radius += 1;
    if (radius > 100) radius = 10;
});

Комбинирование фигур и контуров

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

graphics.clear();
graphics.lineStyle(2, 0x000000);
graphics.beginFill(0xff0000);
graphics.drawCircle(100, 100, 50);
graphics.endFill();

graphics.beginFill(0x00ff00);
graphics.drawEllipse(300, 100, 80, 40);
graphics.endFill();

Можно создавать сложные композиции с перекрывающимися заливками, изменяя порядок вызова beginFill и draw для достижения нужного визуального эффекта.

Сохранение и экспорт графики

Хотя PixiJS рендерит фигуры на канвас напрямую, для сохранения изображения можно использовать метод renderer.extract.canvas или renderer.extract.base64:

const canvas = app.renderer.extract.canvas(graphics);
document.body.appendChild(canvas); // вывод на страницу

const base64 = app.renderer.extract.base64(graphics);
console.log(base64); // строка с изображением в формате PNG

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

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

При работе с большим количеством окружностей и эллипсов рекомендуется:

  • Объединять графику в один объект Graphics, когда возможно.
  • Использовать clear() только при необходимости.
  • Применять контейнеры и трансформации для масштабирования и вращения вместо постоянного пересчета координат.
  • Для статических фигур рассмотреть генерацию текстур через generateTexture() и использование спрайтов для рендеринга.

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

Оглавление