PolygonTools - Subtract
https://www.npmjs.com/package/polygon-tools
HTML
<script src="https://fpcdn.s3.amazonaws.com/apps/polygon-tools/0.4.0/polygon-tools.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>
JavaScript
var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(500, 500);
document.body.appendChild(renderer.view);
const POLYGON = [
[0, 0],
[100, 0],
[100, 100],
[0, 100]
];
const HOLE = [
[50, 50],
[75, 50],
[75, 75],
[50, 75]
]
const HOLE2 = [
[25, 25],
[45, 25],
[45, 45],
[25, 45]
]
function randomColor () {
let r = Math.round(Math.random() * 0xff),
g = Math.round(Math.random() * 0xff),
b = Math.round(Math.random() * 0xff);
return r << 16 | g << 8 | b;
}
let triangles = PolygonTools.polygon.subtract(POLYGON, HOLE);
console.dir(triangles)
let triangles2 = PolygonTools.polygon.subtract(POLYGON, HOLE2);
console.dir(triangles2)
var paths = triangles.map(triangle => {
return triangle.reduce((p, pt) => {
return p.concat(pt.map(p => p));
}, []);
});
var g = new PIXI.Graphics();
paths.forEach(path => {
g.beginFill(randomColor());
g.drawPolygon(path);
});
stage.addChild(g);
renderer.render(stage);