Pixi JS填充行为与SVG填充行为

Question

我想知道是否有一种方法可以让Pixi.JS的Graphics API的行为以与填充SVG路径相同的方式填充。我猜可能没有一个快速的解决方法。

基本上，在SVG中，当带有填充的路径穿过自身时，正空间将自动填充，而在Pixi.JS Graphics API中，如果路径穿过自身，它似乎会尝试填充最大的外部空间。

这很难在文本中解释，所以这里有一个代码笔来显示两者之间的差异，以及相同的数据将如何导致它们以不同的方式呈现。

所以你可以看到代码，这是我的SVG：

<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" style="background-color:#5BBA6F">
<path style="fill: #E74C3C; stroke:black; stroke-width:3" d="M 200 200 L 700 200 L 600 400 L 500 100 z" />
</svg>

下面是Pixi.js的实现：

import * as PIXI from "https://cdn.skypack.dev/pixi.js";
const app = new PIXI.Application({
width: 800,
height: 600,
backgroundColor: 0x5bba6f
});
app.start();
document.getElementById("root").appendChild(app.view)
const lineData = {
color: 0xe74c3c,
start: [200, 200],
lines: [
[700, 200],
[600, 400],
[500, 100],
]
};
const { start, lines, color } = lineData;
const g = new PIXI.Graphics();
if (g) {
g.clear();
g.lineStyle({width:3})
g.beginFill(color);
g.moveTo(start[0], start[1]);
lines.map((l) => g.lineTo(l[0], l[1]));
g.closePath();
g.endFill();
app.stage.addChild(g);
}

谢谢你看。

Answer 1

这是我们的答案(Pixi.js问题中就有(。

为了得到这种行为，你需要改变"；PIXI.graphicsUtils.buildPoly.striangulate"；函数并拉入另一个名为"的库；Tes2"；。

import Tess2 from 'https://cdn.skypack.dev/tess2';
function triangulate(graphicsData, graphicsGeometry)
{
let points = graphicsData.points;
const holes = graphicsData.holes;
const verts = graphicsGeometry.points;
const indices = graphicsGeometry.indices;
if (points.length >= 6)
{
const holeArray = [];
// Comming soon
for (let i = 0; i < holes.length; i++)
{
const hole = holes[i];
holeArray.push(points.length / 2);
points = points.concat(hole.points);
}
console.log(points)
// Tesselate
const res = Tess2.tesselate({
contours: [points],
windingRule: Tess2.WINDING_ODD ,
elementType: Tess2.POLYGONS,
polySize: 3,
vertexSize: 2
});
if (!res.elements.length)
{
return;
}
const vrt = res.vertices;
const elm = res.elements;
const vertPos = verts.length / 2;
for (var i = 0; i < res.elements.length; i++ )
{
indices.push(res.elements[i] + vertPos);
}
for(let i = 0; i < vrt.length; i++) {
verts.push(vrt[i]);
}
}
}

然后像这样扩展Pixi.js图形类：

class TessGraphics extends PIXI.Graphics {
render(r) {
PIXI.graphicsUtils.buildPoly.triangulate = triangulate;
super.render(r);
}
}

我已经更新了代码笔，以包含损坏的版本和修复的版本。

这不是一个非常容易的解决方案。但嘿，我很兴奋它正在进行！