2.3 KiB
| title | date | draft | tags | ||||
|---|---|---|---|---|---|---|---|
| ♦️ Фигуры в PixiJS | 2022-08-15T01:55:35+03:00 | false |
|
В прошлых двух уроках мы уже разобрали азы движка PixiJS, однако азы азов не затронули.
Сейчас я расскажу тебе о фигурах.
Фигуры это класс PIXI.Graphics.
Он отвечает за рисование простых примитивов, таких как линии, круги и прямоугольники.
Их рисование похоже на рисование фигур Canvas в JavaScript.
const graphics = new PIXI.Graphics();
// Прямоугольник
graphics.beginFill(0xDE3249);
graphics.drawRect(50, 50, 100, 100);
graphics.endFill();
А так можно нарисовать диск.
// lineStyle(0) необходим, чтобы нарисовать круг без внешней обводки
graphics.lineStyle(0);
graphics.beginFill(0xDE3249, 1);
graphics.drawCircle(100, 250, 50);
graphics.endFill();
Или даже кольцо.
// А так мы нарисуем круг без заливки. Кольцо
graphics.lineStyle(2, 0xFEEB77, 1);
graphics.beginFill(0, 0);
graphics.drawCircle(250, 250, 50);
graphics.endFill();
Обрати внимание на два аргумента beginFill.
Первый отвечает за цвет, а второй за прозрачность.
Если изменить значение на graphics.beginFill(0, .5);,
мы получит полупрозрачный чёрный круг с жёлтой обводкой.
Больше примеров можно посмотреть на странице примеров.
Обрати внимание, что в данном примере фигуры рисуются в одном объекте.
Если к нему применить interactive = true, все фигуры будую являться одной "кнопкой".
graphics.interactive = true;
graphics.buttonMode = true;
graphics.on('click', (event) => { console.log('Click on shape'); });