如何在pixijs中应用png遮罩？

Question

我正在尝试应用 png 精灵作为另一层的蒙版。我从 pixi.js 官方网站获取了演示并制作了这个小提琴：

https://jsfiddle.net/raphadko/ukc1rwrc/

这是我正在使用的屏蔽的核心代码：

var brush =  PIXI.Sprite.fromImage('http://i.imgur.com/LtSbbSP.png');
brush.anchor.set(0.5);
app.stage.addChild(brush);
brush.x = app.renderer.width / 2;
brush.y = app.renderer.height / 2;

var thing = new PIXI.Graphics();
app.stage.addChild(thing);
thing.x = app.renderer.width / 2;
thing.y = app.renderer.height / 2;
thing.lineStyle(0);

container.mask = thing;

您可以看到，当应用“things”对象（不是精灵而是 Graphics() 元素）时，遮罩效果很好。现在，如果您更改第 31 行和 37 行以应用名为 Brush 的精灵，则遮罩不起作用.（单击可打开和关闭遮罩）

如何对 png 精灵进行遮罩？

Answer 1

使用 Sprite 作为遮罩时，明亮区域可见，而黑暗区域被隐藏。使用白色图像将使 png 蒙版正常工作。

var brush =  PIXI.Sprite.fromImage('https://0201.nccdn.net/1_2/000/000/11a/e17/house-xxl.png');

以下是更新的小提琴： https://jsfiddle.net/ukc1rwrc/4/