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

【问题标题】：Overlapping opaque shapes drawn to a graphics object within a translucent container don't show the correct alpha in the overlapping region绘制到半透明容器内的图形对象的重叠不透明形状不会在重叠区域中显示正确的 alpha
【发布时间】：2018-07-05 05:11:58
【问题描述】：

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

明亮的正方形是两个多边形之间的重叠。看起来即使两个多边形都被绘制到同一个不透明图形对象上，就好像它们是具有自己的 alpha 通道的独立对象一样。

有没有办法将所有的多边形合并在一起，这样即使有一些重叠的多边形，生成的图形也会有统一的 alpha？

Pixi 版本是 4.7.3。

【问题讨论】：

标签： pixi.js

【解决方案1】：

您可以轻松地使用AlphaFilter 来实现此目的。看到这个帖子：https://github.com/pixijs/pixi.js/issues/4334

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

【讨论】：

【解决方案2】：

一般来说，解决这个问题的一个方法是绘制所有必要的几何图形，然后在 Graphics 对象上将 cacheAsBitmap 设置为 true。

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

不幸的是，使用cacheAsBitmap 与使用父图层或蒙版的对象可能存在错误，如果设置了任何一个，则会导致所有图形消失。

在我的特殊情况下，这对我没有帮助，因为我需要遮罩。希望它可以帮助别人。

编辑

如果您将图形放在容器中，然后将遮罩应用于容器，则上述解决方案有效。我在胡闹时完全偶然发现了这一点。

【讨论】：

非常好的答案。+1