PixiJS：在图形对象中添加孔

Question

我正在使用PixiJS库。我想在图形对象中创建漏洞。要做到这一点，我有搜索和尝试的方式，但无法提出任何解决方案。

最初我认为这个图书馆会支持非零缠绕规则，所以我可以很容易地完成我的目标，但是它不支持缠绕规则，所以我在尝试上失败了。

与此同时，我发现了一些奇怪的绘画行为。我在github发布了一个错误。我不知道这是否与添加洞有关，但这里提到的是因为有兴趣帮助我的人可能会更好地调查这个案例。

我提出的其他解决方案是我可以使用名为 opposite of Masking 的内容来实现。我也尝试了这个，但不知道如何使用图形对象，也担心它会适用于数千个剪切的复杂对象。

以下是我正在尝试重现的简单测试。有三个矩形在彼此的顶部，最顶部（红色矩形）有两个孔。对于简单的测试圆孔，但可以采用任何形状。

我陷入了这个阶段并投入了大量时间，但仍然没有结果。任何帮助都会非常明显。

Answer 1

从Pixi.js v3开始，你现在可以使用任何精灵作为另一个精灵的遮罩，这样你就可以创建一个带有白色矩形和黑色圆圈的alpha透明png并用它来创建＆＃39;孔＆＃ 39;在你的另一个精灵。

Answer 2

Pixi v3.0.3

目前没有直接的原生函数可用于在图形对象中添加孔。实际上它可以使用掩码完成，但我使用earcut为它做了一个方便的实现，因此不再需要屏蔽和精灵来创建漏洞。

结帐完整帖子here。

Answer 3

WebGL内置的方法是使用gl.blendFunc(gl.ZERO,gl.ONE_MINUS_SRC_ALPHA);。

此混合操作会创建一个洞而不是堆叠图像。它还考虑了半透明度。它相当于常规画布上的xor globalCompositeOperation。

为了将gl.blendFunc(gl.ZERO,gl.ONE_MINUS_SRC_ALPHA);与PIXI一起使用，您需要修改1行PIXI源代码。

在函数WebGLRenderer.prototype._mapGlModes中，更改

this.blendModes[CONST.BLEND_MODES.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];

到

this.blendModes[CONST.BLEND_MODES.EXCLUSION] = [gl.ZERO, gl.ONE_MINUS_SRC_ALPHA];

然后你可以设置mySprite.blendMode = PIXI.BLEND_MODES.EXCLUSION，它会起作用。

然而，该方法的一个问题是，与常规画布一样，生成的孔将是透明的。在您的示例中，这意味着孔的颜色与画布背景（黑色）相同，而不是绿色。

解决这个问题的一种方法是使用选项{transparent:true}将多个webgl画布堆叠在一起。