Search code examples
pixi.js

PIXI Graphic not change color on mouseover and mouseout

I am trying to change color of a PIXI graphic when hovering. Here I've attached code fragment I tried. Both 'onmouseover' and 'onmouseout' functions hit when i hover but colors not changing.

I am Using pixi 7.2.1

let rect = new PIXI.Graphics();

rect.visible = true;
rect.beginFill(0X0000EE, 0.5);
rect.drawRoundedRect(0, 0, 100, 1000);
rect.endFill();

rect.on('pointerover', (e) => {
    this._onMouseOverFn(e);
}, allbckSprite);

rect.on('pointerout', (e) => {
    this._onMouseOutFn(e);
}, allbckSprite);

_onMouseOverFn: function (e) {
        e.target.tint = 0x0000EE;
        e.target.alpha = 0.5;
        console.error('on mouse over');
},

_onMouseOutFn: function (e) {
        e.target.tint = 0x000000;
        e.target.alpha = 0;
        console.error('on mouse out');
}
Solution

  • Graphics are static in PixiJS, which means that once they have been drawn by Pixi, they cannot be changed. If a graphic is to be changed, the .clear() method is called first and the graphic must be drawn again. This example on the PixiJS page shows the procedure well: PixiJS Dynamic Graphics Example