PIXI 图形在鼠标悬停和鼠标移出时不会改变颜色

Question

我试图在悬停时更改 PIXI 图形的颜色。这里我附上了我尝试过的代码片段。当我悬停时，“onmouseover”和“onmouseout”功能都会起作用，但颜色不会改变。

我使用的是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');
}

Answer 1

PixiJS 中的图形是静态的，这意味着一旦 Pixi 绘制了图形，就无法更改。如果要更改图形，则首先调用 .clear() 方法，然后必须重新绘制图形。 PixiJS 页面上的这个示例很好地展示了该过程：PixiJS 动态图形示例