Pixi JS fill behaviour vs SVG fill behaviour - web

Question

I'm wondering if there's a way to get the behaviour of Pixi.JS's Graphics API to fill the same way SVG paths are filled. I am guessing there may not be a quick-fix way to do this.
Basically, in SVGs when a path with a fill crosses over itself, the positive space will automatically get filled, whereas in the Pixi.JS Graphics API, if the path crosses itself it seems to try and fill the largest outside space.
This is quite difficult to explain in text so here is a codepen to show the differences between the two and how the same data will cause them to render in different ways.
And so you can see the code, here is my 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>
And here is the Pixi.js implementation:
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);
}
Thanks for taking a look.

Answer 1

Here's our answer (it was right there in the Pixi.js issues).
To get this behaviour you need to change the "PIXI.graphicsUtils.buildPoly.triangulate" function and pull in another library called "Tess2".
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]);
}
}
}
Then extend the Pixi.js graphics class like this:
class TessGraphics extends PIXI.Graphics {
render(r) {
PIXI.graphicsUtils.buildPoly.triangulate = triangulate;
super.render(r);
}
}
I've updated the codepen to contain the broken version and the fixed version.
Not exactly a super easy fix. But hey I'm excited it's going!