我正在尝试将 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 ？
最佳答案
当使用 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/
关于javascript - 如何在 pixijs 中应用 png mask ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43745466/