在半透明容器内绘制到图形对象的重叠不透明形状不会在重叠区域显示正确的 alpha
Overlapping opaque shapes drawn to a graphics object within a translucent container don't show the correct alpha in the overlapping region
我在 PIXI.Container 中有一个 PIXI.Graphics（以及其他一些东西，包括遮罩和边框）。图形对象用于绘制各种多边形。 Container 的 alpha 属性 设置为 0.5。这是结果：
明亮的正方形是两个多边形之间的重叠。似乎即使两个多边形都被绘制到同一个不透明图形对象，它们也好像是具有自己的 alpha 通道的独立对象。
有没有什么方法可以将所有多边形合并在一起，以便生成的图形具有统一的 alpha，尽管有一些重叠的多边形？
Pixi 版本为 4.7.3.
一般来说，解决此问题的一个方法是绘制所有必要的几何图形，然后在 Graphics 对象上将 cacheAsBitmap 设置为 true。
cacheAsBitmap 非常适合不经常更改的图形，使用它的另一个好处是它可以加快渲染速度。
不幸的是，使用 cacheAsBitmap 和使用父图层或蒙版的对象似乎可能存在错误，如果设置了其中一个，会导致所有图形消失。
在我的特殊情况下，这对我没有帮助，因为我需要屏蔽。希望它能帮助别人。
编辑
如果您将图形放在容器中，并将蒙版应用于容器，则上述解决方案有效。我在闲逛时完全偶然发现了这一点。
您可以轻松地使用 AlphaFilter 来实现这一点。请参阅此线程：https://github.com/pixijs/pixi.js/issues/4334
const colorMatrix = new filters.AlphaFilter();
colorMatrix.alpha = 0.5;
container.filters = [colorMatrix];
我在 PIXI.Container 中有一个 PIXI.Graphics（以及其他一些东西，包括遮罩和边框）。图形对象用于绘制各种多边形。 Container 的 alpha 属性 设置为 0.5。这是结果：
明亮的正方形是两个多边形之间的重叠。似乎即使两个多边形都被绘制到同一个不透明图形对象，它们也好像是具有自己的 alpha 通道的独立对象。
有没有什么方法可以将所有多边形合并在一起，以便生成的图形具有统一的 alpha，尽管有一些重叠的多边形？
Pixi 版本为 4.7.3.
一般来说，解决此问题的一个方法是绘制所有必要的几何图形，然后在 Graphics 对象上将 cacheAsBitmap 设置为 true。
cacheAsBitmap 非常适合不经常更改的图形，使用它的另一个好处是它可以加快渲染速度。
不幸的是，使用 cacheAsBitmap 和使用父图层或蒙版的对象似乎可能存在错误，如果设置了其中一个，会导致所有图形消失。
在我的特殊情况下，这对我没有帮助，因为我需要屏蔽。希望它能帮助别人。
编辑
如果您将图形放在容器中，并将蒙版应用于容器，则上述解决方案有效。我在闲逛时完全偶然发现了这一点。
您可以轻松地使用 AlphaFilter 来实现这一点。请参阅此线程：https://github.com/pixijs/pixi.js/issues/4334
const colorMatrix = new filters.AlphaFilter();
colorMatrix.alpha = 0.5;
container.filters = [colorMatrix];