如何在 pixjs 中应用 png 遮罩？答案

【问题标题】：How to apply png masking in pixijs?如何在 pixjs 中应用 png 遮罩？
【发布时间】：2017-09-30 10:11:24
【问题描述】：

我正在尝试将 png 精灵应用为另一层的蒙版。我从 pixi.js 官网得到了这个演示，做了这个小提琴：

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

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;

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

如何使 png 精灵的遮罩工作？

【问题讨论】：

标签： javascript css pixi.js

【解决方案1】：

我发现这个问题正在寻找相同问题的解决方案，我意识到这是一个老问题，但它可能会对未来的 Pixi、erm、pixies 有所帮助。

问题在于，尽管它被称为 alpha 遮罩，它同时适用于 alpha 和颜色 - 我对 GLSL 的了解有限，但看起来执行遮罩的着色器采用红色通道，我猜是因为锻炼每个 RGB 像素的真实亮度会很昂贵。

因此，PNG 上的黑色区域（红色 = 0）将掩盖目标显示对象，就像透明区域（alpha = 0）一样。这也允许您使用 JPG。

this 线程中的“官方”确认。着色器定义here。

【讨论】：

【解决方案2】：

当使用 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/

【讨论】：