在半透明容器中绘制到图形对象的重叠不透明形状在重叠区域中未显示正确的alpha

Question

我在PIXI.Container中有一个PIXI.Graphics（以及其他一些东西，包括遮罩和边框）。图形对象用于绘制各种多边形。容器的alpha属性设置为0.5。结果如下：

明亮的正方形是两个多边形之间的重叠。似乎即使两个多边形都绘制到同一个不透明图形对象上，也好像它们是具有各自的Alpha通道的单独对象。

是否有任何方法可以将所有多边形合并在一起，以使尽管有一些重叠的多边形，但生成的图形仍具有统一的alpha值？

Pixi版本是4.7.3。

Answer 1

通常，解决此问题的一种方法是绘制所有必要的几何图形，然后在Graphics对象上将cacheAsBitmap设置为true。

cacheAsBitmap非常适合不经常更改的图形，使用它的另一个好处是可以加快渲染速度。

不幸的是，似乎cacheAsBitmap与使用父图层或蒙版的对象一起使用时可能会出现错误，如果设置了其中任何一个，则所有图形都会消失。

在我的特定情况下，这对我没有帮助，因为我需要掩蔽。希望它可以帮助其他人。

修改

如果将图形放置在容器中并将蒙版应用于容器，则上述解决方案有效。我在弄乱的时候完全是偶然发现的。

Answer 2

您可以轻松地使用AlphaFilter来实现此目的。查看此线程：https://github.com/pixijs/pixi.js/issues/4334

const colorMatrix = new filters.AlphaFilter();
colorMatrix.alpha = 0.5;
container.filters = [colorMatrix];