PixiJS：在图形对象中添加孔
PixiJS: Add hole into graphics object
我正在使用 PixiJS 库。我想在图形对象中创建孔。为此，我进行了搜索并尝试了很多方法，但无法提出任何解决方案。
最初我以为这个库会支持非零缠绕规则，所以我可以轻松实现我的目标，但它不支持缠绕规则，所以我尝试失败了。
与此同时，我发现绘图有一些奇怪的行为。我在 github 发布了一个错误。我不知道它是否与添加孔有关但在这里提到是因为有兴趣帮助我的人可能有助于更好地调查此案例。
我想出的其他解决方案是我可以使用名为 opposite of Masking 的东西来实现。我也试过这个，但不知道如何处理图形对象，也担心它是否适用于具有数千个切割的复杂对象。
下面是我要重现的简单测试。三个矩形彼此重叠，最上面的（红色矩形）有两个孔。对于简单的测试，采用圆孔，但可以是任何形状。
我卡在这个阶段并投入了大量时间但仍然没有结果。任何帮助都会非常可观。
从 Pixi.js v3 开始，您现在可以使用任何 sprite 作为另一个 sprite 的蒙版，因此您可以创建一个带有白色矩形和黑色圆圈的 alpha 透明 png，并使用它来创建 'holes' 在你的另一个精灵中。
Pixi v3.0.3
目前没有直接的本机函数可用于在图形对象中添加孔。确实可以使用掩码来完成，但我已经使用 earcut 实现了一个方便的实现，因此不再需要掩码和精灵来创建孔。
结帐完整线程 here。
WebGL 的内置方法是使用 gl.blendFunc(gl.ZERO,gl.ONE_MINUS_SRC_ALPHA);。
此混合操作创建一个洞而不是堆叠图像。它还考虑了半透明。它相当于常规 canvas.
上的 xor globalCompositeOperation
为了在 PIXI 中使用 gl.blendFunc(gl.ZERO,gl.ONE_MINUS_SRC_ALPHA);，您需要修改 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就可以了
然而，该方法的一个问题是，与常规 canvas 一样，生成的孔将是透明的。在您的示例中，这意味着孔的颜色将与 canvas 背景（黑色）相同，而不是绿色。
解决此问题的一种方法是使用选项 {transparent:true} 将多个 webgl canvas 堆叠在一起。
我正在使用 PixiJS 库。我想在图形对象中创建孔。为此，我进行了搜索并尝试了很多方法，但无法提出任何解决方案。
最初我以为这个库会支持非零缠绕规则，所以我可以轻松实现我的目标，但它不支持缠绕规则，所以我尝试失败了。
与此同时，我发现绘图有一些奇怪的行为。我在 github 发布了一个错误。我不知道它是否与添加孔有关但在这里提到是因为有兴趣帮助我的人可能有助于更好地调查此案例。
我想出的其他解决方案是我可以使用名为 opposite of Masking 的东西来实现。我也试过这个，但不知道如何处理图形对象，也担心它是否适用于具有数千个切割的复杂对象。
下面是我要重现的简单测试。三个矩形彼此重叠，最上面的（红色矩形）有两个孔。对于简单的测试，采用圆孔，但可以是任何形状。
我卡在这个阶段并投入了大量时间但仍然没有结果。任何帮助都会非常可观。
从 Pixi.js v3 开始，您现在可以使用任何 sprite 作为另一个 sprite 的蒙版，因此您可以创建一个带有白色矩形和黑色圆圈的 alpha 透明 png，并使用它来创建 'holes' 在你的另一个精灵中。
Pixi v3.0.3
目前没有直接的本机函数可用于在图形对象中添加孔。确实可以使用掩码来完成，但我已经使用 earcut 实现了一个方便的实现，因此不再需要掩码和精灵来创建孔。
结帐完整线程 here。
WebGL 的内置方法是使用 gl.blendFunc(gl.ZERO,gl.ONE_MINUS_SRC_ALPHA);。
此混合操作创建一个洞而不是堆叠图像。它还考虑了半透明。它相当于常规 canvas.
上的xor globalCompositeOperation
为了在 PIXI 中使用 gl.blendFunc(gl.ZERO,gl.ONE_MINUS_SRC_ALPHA);，您需要修改 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就可以了
然而，该方法的一个问题是，与常规 canvas 一样，生成的孔将是透明的。在您的示例中，这意味着孔的颜色将与 canvas 背景（黑色）相同，而不是绿色。
解决此问题的一种方法是使用选项 {transparent:true} 将多个 webgl canvas 堆叠在一起。