Команды moveTo, lineTo, bezierCurveTo, quadraticCurveTo

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

Метод moveTo(x, y)

Метод moveTo задаёт начальную точку контура. Все последующие линии и кривые будут строиться относительно этой точки. Если вызвать lineTo без предварительного moveTo, контур начнётся из позиции (0, 0) по умолчанию.

Пример использования:

const graphics = new PIXI.Graphics();
graphics.lineStyle(2, 0xff0000, 1);
graphics.moveTo(50, 50); // начальная точка
graphics.lineTo(150, 50);
graphics.lineTo(150, 150);
graphics.lineTo(50, 150);
graphics.closePath(); // замыкает контур
app.stage.addChild(graphics);

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

  • moveTo не рисует линию, а просто перемещает “перо” в заданную точку.
  • Можно использовать несколько moveTo в одном объекте Graphics, чтобы создавать разрозненные фигуры на одном слое.

Метод lineTo(x, y)

Метод lineTo соединяет текущую точку контура с указанной координатой прямой линией. Каждое последующее вызова lineTo продолжает контур из последней точки.

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

graphics.moveTo(100, 100);
graphics.lineTo(200, 100);
graphics.lineTo(150, 200);
graphics.lineTo(100, 100); // возвращение к начальной точке

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

  • Линии рисуются в порядке вызова методов, создавая замкнутые или открытые фигуры.
  • Сочетается с lineStyle, чтобы задать цвет, толщину и прозрачность линии.

Метод quadraticCurveTo(cpX, cpY, toX, toY)

Квадратичная кривая (second-order Bézier curve) строится с использованием одной контрольной точки. Контрольная точка определяет изгиб линии между текущей точкой и конечной точкой.

Синтаксис:

graphics.quadraticCurveTo(cpX, cpY, toX, toY);
  • cpX, cpY – координаты контрольной точки.
  • toX, toY – конечная точка кривой.

Пример:

graphics.moveTo(50, 250);
graphics.quadraticCurveTo(150, 100, 250, 250);

В результате получится плавная арка, направленная через контрольную точку (150, 100).

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

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

Метод bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY)

Кубическая кривая (third-order Bézier curve) использует две контрольные точки, что позволяет более точно управлять формой кривой. Она подходит для сложных кривых и анимационных траекторий.

Синтаксис:

graphics.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
  • cp1X, cp1Y – первая контрольная точка.
  • cp2X, cp2Y – вторая контрольная точка.
  • toX, toY – конечная точка кривой.

Пример:

graphics.moveTo(50, 300);
graphics.bezierCurveTo(150, 100, 250, 500, 350, 300);

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

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

  • Кубические кривые дают полный контроль над изгибом.
  • Часто используются для анимации объектов по плавной траектории.
  • Можно комбинировать с lineTo и quadraticCurveTo для построения комбинированных контуров.

Комбинирование команд

Методы moveTo, lineTo, quadraticCurveTo и bezierCurveTo можно комбинировать в рамках одного объекта Graphics для создания сложных фигур и динамических рисунков.

Пример сложного контура:

graphics.lineStyle(3, 0x0000ff, 1);
graphics.moveTo(50, 400);
graphics.lineTo(150, 400);
graphics.quadraticCurveTo(200, 300, 250, 400);
graphics.bezierCurveTo(300, 500, 350, 300, 400, 400);
graphics.lineTo(450, 400);

В этом примере линия чередуется с квадратичной и кубической кривой, создавая разнообразный контур.

Рекомендации по работе с кривыми

  • Контроль точек: Для качественного результата важно тщательно подбирать контрольные точки.
  • Оптимизация: Частое использование сложных кривых может нагрузить GPU, особенно при динамической анимации.
  • Закрытие контура: closePath() помогает замкнуть фигуру без необходимости вручную соединять последнюю точку с первой.
  • Стили: lineStyle и beginFill/endFill позволяют управлять внешним видом линий и заливки.

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

Оглавление