javascript - 如何在 pixijs 中应用 png mask ？

Question

我正在尝试将 png Sprite 应用为另一层的蒙版。我从 pixi.js 官方网站获得了演示并制作了这个 fiddle :

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”对象(它不是 Sprite 而是 Graphics() 元素)时， mask 效果很好。现在，如果您更改第 31 行和第 37 行以应用名为 brush 的 Sprite ， mask 不起作用。(点击打开和关闭蒙版)

如何为 png Sprite 制作 mask ？

Answer 1

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

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

以下是更新后的 fiddle : https://jsfiddle.net/ukc1rwrc/4/