<html>
<head>
<title>Starter Boolean PolyTree</title>
<script src="clipper.js"></script>
</head>
<body>
<div id="svgcontainer"></div>
<script>
var subj_paths = [[{X:10,Y:10},{X:110,Y:10},{X:110,Y:110},{X:10,Y:110}],
[{X:20,Y:20},{X:20,Y:100},{X:100,Y:100},{X:100,Y:20}]];
var clip_paths = [[{X:50,Y:50},{X:150,Y:50},{X:150,Y:150},{X:50,Y:150}],
[{X:60,Y:60},{X:60,Y:140},{X:140,Y:140},{X:140,Y:60}]];
var cpr = new ClipperLib.Clipper();
var scale = 100;
ClipperLib.JS.ScaleUpPaths(subj_paths, scale);
ClipperLib.JS.ScaleUpPaths(clip_paths, scale);
cpr.AddPaths(subj_paths, ClipperLib.PolyType.ptSubject, true); // true means closed path
cpr.AddPaths(clip_paths, ClipperLib.PolyType.ptClip, true);
var solution_polytree = new ClipperLib.PolyTree();
var succeeded = cpr.Execute(ClipperLib.ClipType.ctUnion, solution_polytree, ClipperLib.PolyFillType.pftNonZero, ClipperLib.PolyFillType.pftNonZero);
var solution_paths = ClipperLib.Clipper.PolyTreeToPaths(solution_polytree);
// To exPolygons, when use_deprecate = true
//var solution_expolygons = new ClipperLib.ExPolygons();
//ClipperLib.Clipper.PolyTreeToExPolygons(solution_polytree, solution_expolygons);
// Extract closed paths from PolyTree
//var solution_closed_paths = ClipperLib.Clipper.ClosedPathsFromPolyTree(solution_polytree);
// Extract open paths from PolyTree
//var solution_open_paths = ClipperLib.Clipper.OpenPathsFromPolyTree(solution_polytree);
// console.log(JSON.stringify(solution_paths));
// Scale down coordinates and draw ...
var svg = '<svg style="background-color:#dddddd" width="160" height="160">';
svg += '<path stroke="black" fill="yellow" stroke-width="2" d="' + paths2string(solution_paths, scale) + '"/>';
svg += '</svg>';
document.getElementById("svgcontainer").innerHTML = svg;
// Converts Paths to SVG path string
// and scales down the coordinates
function paths2string (paths, scale) {
var svgpath = "", i, j;
if (!scale) scale = 1;
for(i = 0; i < paths.length; i++) {
for(j = 0; j < paths[i].length; j++){
if (!j) svgpath += "M";
else svgpath += "L";
svgpath += (paths[i][j].X / scale) + ", " + (paths[i][j].Y / scale);
}
svgpath += "Z";
}
if (svgpath=="") svgpath = "M0,0";
return svgpath;
}
</script>
</body>
</html>