PixiJS каков наилучший способ изменить цвет графического объекта?

#javascript #pixi.js

Вопрос:

Я пытаюсь заставить простой квадратный объект мигать зеленым, синим и красным цветом в зависимости от разных условий. Я понимаю, что в PixiJS нет прямого способа изменить цвет графического объекта. В настоящее время я создаю три графических объекта, которые идентичны, за исключением цветов. Перекрывая эти объекты и регулируя видимость, я могу выполнить анимацию мигания.

Мне было интересно, есть ли лучший способ «изменить» цвет вместо того, чтобы обманывать его видимостью.

Мой текущий код:

 let square_red = new PIXI.Graphics(); square.beginFill(red, opacity); square.lineStyle(lineStyle); square.drawRect(0, 0, width, height); square.position.set(x, y);  let square_green = new PIXI.Graphics(); square.beginFill(green, opacity); square.lineStyle(lineStyle); square.drawRect(0, 0, width, height); square.position.set(x, y);  let square_blue = new PIXI.Graphics(); square.beginFill(blue, opacity); square.lineStyle(lineStyle); square.drawRect(0, 0, width, height); square.position.set(x, y);  square_red.visible = true; square_green.visible = false; square_blue.visible = false;  

Ответ №1:

Вы можете создать белый круг и изменить его оттенок.

 const circle = new PIXI.Graphics(); circle.beginFill(0xffffff); circle.drawCircle(0, 0, 100); circle.endFill();  circle.tint = 0xff0000;