<!DOCTYPE html>
<html>
<head>
<title>Javascript Clipper Library / Minkowski Sum</title>
<script src="clipper.js"></script>
<style>
h3{ margin-bottom:2px}
body,th,td,input,legend,fieldset,p,b,button,select,textarea {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<script>
function draw()
{
var scale = 100;
// Star & Donut shape ...
var paths = [[{"X":89.85,"Y":355.85},{"X":131.72,"Y":227.13},{"X":22.1,"Y":147.57},{"X":157.6,"Y":147.57},{"X":199.47,"Y":18.85},{"X":241.34,"Y":147.57},{"X":376.84,"Y":147.57},{"X":267.22,"Y":227.13},{"X":309.09,"Y":355.85},{"X":199.47,"Y":276.29}]];
var paths = [[{"X":65.2,"Y":222.98},{"X":89.75,"Y":146.2},{"X":25.47,"Y":98.75},{"X":104.92,"Y":98.75},{"X":129.47,"Y":21.98},{"X":154.02,"Y":98.75},{"X":233.47,"Y":98.75},{"X":169.2,"Y":146.2},{"X":193.75,"Y":222.98},{"X":129.47,"Y":175.53},{"X":65.2,"Y":222.98}],[{"X":351.32,"Y":219.98},{"X":350.04,"Y":219.97},{"X":347.5,"Y":219.91},{"X":344.96,"Y":219.78},{"X":342.45,"Y":219.59},{"X":339.95,"Y":219.33},{"X":337.48,"Y":219.02},{"X":335.02,"Y":218.64},{"X":332.58,"Y":218.21},{"X":330.17,"Y":217.71},{"X":327.77,"Y":217.16},{"X":325.4,"Y":216.55},{"X":323.05,"Y":215.88},{"X":320.72,"Y":215.16},{"X":318.42,"Y":214.38},{"X":316.15,"Y":213.55},{"X":313.9,"Y":212.66},{"X":311.68,"Y":211.72},{"X":309.49,"Y":210.73},{"X":307.32,"Y":209.69},{"X":305.19,"Y":208.6},{"X":303.08,"Y":207.45},{"X":301.01,"Y":206.26},{"X":298.97,"Y":205.02},{"X":296.96,"Y":203.73},{"X":294.99,"Y":202.4},{"X":293.05,"Y":201.02},{"X":291.14,"Y":199.59},{"X":289.27,"Y":198.12},{"X":287.44,"Y":196.61},{"X":285.64,"Y":195.05},{"X":283.88,"Y":193.46},{"X":282.16,"Y":191.82},{"X":280.48,"Y":190.14},{"X":278.84,"Y":188.42},{"X":277.25,"Y":186.66},{"X":275.69,"Y":184.86},{"X":274.18,"Y":183.03},{"X":272.71,"Y":181.16},{"X":271.28,"Y":179.26},{"X":269.9,"Y":177.31},{"X":268.57,"Y":175.34},{"X":267.28,"Y":173.33},{"X":266.04,"Y":171.29},{"X":264.85,"Y":169.22},{"X":263.7,"Y":167.11},{"X":262.61,"Y":164.98},{"X":261.57,"Y":162.81},{"X":260.58,"Y":160.62},{"X":259.64,"Y":158.4},{"X":258.75,"Y":156.15},{"X":257.92,"Y":153.88},{"X":257.14,"Y":151.58},{"X":256.42,"Y":149.25},{"X":255.75,"Y":146.9},{"X":255.14,"Y":144.53},{"X":254.59,"Y":142.14},{"X":254.09,"Y":139.72},{"X":253.66,"Y":137.28},{"X":253.28,"Y":134.82},{"X":252.97,"Y":132.35},{"X":252.71,"Y":129.85},{"X":252.52,"Y":127.34},{"X":252.39,"Y":124.81},{"X":252.33,"Y":122.26},{"X":252.32,"Y":120.98},{"X":252.33,"Y":119.7},{"X":252.39,"Y":117.15},{"X":252.52,"Y":114.62},{"X":252.71,"Y":112.11},{"X":252.97,"Y":109.61},{"X":253.28,"Y":107.13},{"X":253.66,"Y":104.67},{"X":254.09,"Y":102.24},{"X":254.59,"Y":99.82},{"X":255.14,"Y":97.42},{"X":255.75,"Y":95.05},{"X":256.42,"Y":92.7},{"X":257.14,"Y":90.38},{"X":257.92,"Y":88.08},{"X":258.75,"Y":85.8},{"X":259.64,"Y":83.56},{"X":260.58,"Y":81.33},{"X":261.57,"Y":79.14},{"X":262.61,"Y":76.98},{"X":263.7,"Y":74.84},{"X":264.85,"Y":72.74},{"X":266.04,"Y":70.67},{"X":267.28,"Y":68.62},{"X":268.57,"Y":66.62},{"X":269.9,"Y":64.64},{"X":271.28,"Y":62.7},{"X":272.71,"Y":60.79},{"X":274.18,"Y":58.92},{"X":275.69,"Y":57.09},{"X":277.25,"Y":55.29},{"X":278.84,"Y":53.54},{"X":280.48,"Y":51.82},{"X":282.16,"Y":50.14},{"X":283.88,"Y":48.5},{"X":285.64,"Y":46.9},{"X":287.44,"Y":45.34},{"X":289.27,"Y":43.83},{"X":291.14,"Y":42.36},{"X":293.05,"Y":40.94},{"X":294.99,"Y":39.56},{"X":296.96,"Y":38.22},{"X":298.97,"Y":36.93},{"X":301.01,"Y":35.69},{"X":303.08,"Y":34.5},{"X":305.19,"Y":33.36},{"X":307.32,"Y":32.27},{"X":309.49,"Y":31.22},{"X":311.68,"Y":30.23},{"X":313.9,"Y":29.29},{"X":316.15,"Y":28.41},{"X":318.42,"Y":27.57},{"X":320.72,"Y":26.79},{"X":323.05,"Y":26.07},{"X":325.4,"Y":25.4},{"X":327.77,"Y":24.79},{"X":330.17,"Y":24.24},{"X":332.58,"Y":23.75},{"X":335.02,"Y":23.31},{"X":337.48,"Y":22.94},{"X":339.95,"Y":22.62},{"X":342.45,"Y":22.37},{"X":344.96,"Y":22.18},{"X":347.5,"Y":22.05},{"X":350.04,"Y":21.98},{"X":351.32,"Y":21.98},{"X":352.55,"Y":21.98},{"X":355.01,"Y":22.04},{"X":357.46,"Y":22.17},{"X":359.89,"Y":22.35},{"X":362.32,"Y":22.59},{"X":364.74,"Y":22.89},{"X":367.15,"Y":23.25},{"X":369.54,"Y":23.66},{"X":371.92,"Y":24.14},{"X":374.28,"Y":24.67},{"X":376.63,"Y":25.26},{"X":378.96,"Y":25.91},{"X":381.27,"Y":26.61},{"X":383.57,"Y":27.37},{"X":385.84,"Y":28.19},{"X":388.09,"Y":29.06},{"X":390.32,"Y":29.98},{"X":392.53,"Y":30.96},{"X":394.71,"Y":31.99},{"X":396.87,"Y":33.08},{"X":399.01,"Y":34.21},{"X":401.11,"Y":35.4},{"X":403.19,"Y":36.65},{"X":405.24,"Y":37.94},{"X":407.26,"Y":39.29},{"X":409.24,"Y":40.68},{"X":411.2,"Y":42.13},{"X":413.12,"Y":43.63},{"X":415.01,"Y":45.18},{"X":416.86,"Y":46.77},{"X":418.68,"Y":48.42},{"X":420.46,"Y":50.11},{"X":421.33,"Y":50.97},{"X":422.2,"Y":51.85},{"X":423.89,"Y":53.63},{"X":425.53,"Y":55.44},{"X":427.13,"Y":57.29},{"X":428.67,"Y":59.18},{"X":430.17,"Y":61.1},{"X":431.62,"Y":63.06},{"X":433.01,"Y":65.05},{"X":434.36,"Y":67.06},{"X":435.66,"Y":69.11},{"X":436.9,"Y":71.19},{"X":438.09,"Y":73.3},{"X":439.23,"Y":75.43},{"X":440.31,"Y":77.59},{"X":441.34,"Y":79.77},{"X":442.32,"Y":81.98},{"X":443.25,"Y":84.21},{"X":444.12,"Y":86.46},{"X":444.93,"Y":88.74},{"X":445.69,"Y":91.03},{"X":446.39,"Y":93.34},{"X":447.04,"Y":95.67},{"X":447.63,"Y":98.02},{"X":448.16,"Y":100.39},{"X":448.64,"Y":102.76},{"X":449.06,"Y":105.16},{"X":449.41,"Y":107.56},{"X":449.71,"Y":109.98},{"X":449.96,"Y":112.41},{"X":450.14,"Y":114.85},{"X":450.26,"Y":117.29},{"X":450.32,"Y":119.75},{"X":450.32,"Y":120.98},{"X":450.32,"Y":122.26},{"X":450.25,"Y":124.81},{"X":450.13,"Y":127.34},{"X":449.93,"Y":129.85},{"X":449.68,"Y":132.35},{"X":449.37,"Y":134.82},{"X":448.99,"Y":137.28},{"X":448.56,"Y":139.72},{"X":448.06,"Y":142.14},{"X":447.51,"Y":144.53},{"X":446.9,"Y":146.9},{"X":446.23,"Y":149.25},{"X":445.51,"Y":151.58},{"X":444.73,"Y":153.88},{"X":443.9,"Y":156.15},{"X":443.01,"Y":158.4},{"X":442.07,"Y":160.62},{"X":441.08,"Y":162.81},{"X":440.04,"Y":164.98},{"X":438.94,"Y":167.11},{"X":437.8,"Y":169.22},{"X":436.61,"Y":171.29},{"X":435.37,"Y":173.33},{"X":434.08,"Y":175.34},{"X":432.75,"Y":177.31},{"X":431.37,"Y":179.26},{"X":429.94,"Y":181.16},{"X":428.47,"Y":183.03},{"X":426.96,"Y":184.86},{"X":425.4,"Y":186.66},{"X":423.8,"Y":188.42},{"X":422.16,"Y":190.14},{"X":420.49,"Y":191.82},{"X":418.77,"Y":193.46},{"X":417.01,"Y":195.05},{"X":415.21,"Y":196.61},{"X":413.38,"Y":198.12},{"X":411.51,"Y":199.59},{"X":409.6,"Y":201.02},{"X":407.66,"Y":202.4},{"X":405.69,"Y":203.73},{"X":403.68,"Y":205.02},{"X":401.64,"Y":206.26},{"X":399.56,"Y":207.45},{"X":397.46,"Y":208.6},{"X":395.33,"Y":209.69},{"X":393.16,"Y":210.73},{"X":390.97,"Y":211.72},{"X":388.75,"Y":212.66},{"X":386.5,"Y":213.55},{"X":384.22,"Y":214.38},{"X":381.92,"Y":215.16},{"X":379.6,"Y":215.88},{"X":377.25,"Y":216.55},{"X":374.88,"Y":217.16},{"X":372.48,"Y":217.71},{"X":370.07,"Y":218.21},{"X":367.63,"Y":218.64},{"X":365.17,"Y":219.02},{"X":362.69,"Y":219.33},{"X":360.2,"Y":219.59},{"X":357.68,"Y":219.78},{"X":355.15,"Y":219.91},{"X":352.6,"Y":219.97}],[{"X":351.32,"Y":170.48},{"X":352.6,"Y":170.47},{"X":355.13,"Y":170.34},{"X":357.63,"Y":170.09},{"X":360.09,"Y":169.71},{"X":362.5,"Y":169.22},{"X":364.88,"Y":168.6},{"X":367.2,"Y":167.88},{"X":369.48,"Y":167.05},{"X":371.7,"Y":166.11},{"X":373.86,"Y":165.07},{"X":375.97,"Y":163.92},{"X":378.01,"Y":162.68},{"X":379.98,"Y":161.35},{"X":381.89,"Y":159.92},{"X":383.72,"Y":158.41},{"X":385.48,"Y":156.81},{"X":387.16,"Y":155.13},{"X":388.76,"Y":153.38},{"X":390.27,"Y":151.54},{"X":391.7,"Y":149.64},{"X":393.03,"Y":147.66},{"X":394.27,"Y":145.62},{"X":395.41,"Y":143.51},{"X":396.46,"Y":141.35},{"X":397.39,"Y":139.13},{"X":398.23,"Y":136.86},{"X":398.95,"Y":134.53},{"X":399.56,"Y":132.16},{"X":400.06,"Y":129.74},{"X":400.43,"Y":127.28},{"X":400.68,"Y":124.79},{"X":400.81,"Y":122.26},{"X":400.82,"Y":120.98},{"X":400.81,"Y":119.7},{"X":400.68,"Y":117.17},{"X":400.43,"Y":114.67},{"X":400.06,"Y":112.21},{"X":399.56,"Y":109.8},{"X":398.95,"Y":107.42},{"X":398.23,"Y":105.1},{"X":397.39,"Y":102.83},{"X":396.46,"Y":100.6},{"X":395.41,"Y":98.44},{"X":394.27,"Y":96.34},{"X":393.03,"Y":94.29},{"X":391.7,"Y":92.32},{"X":390.27,"Y":90.41},{"X":388.76,"Y":88.58},{"X":387.16,"Y":86.82},{"X":385.48,"Y":85.14},{"X":383.72,"Y":83.54},{"X":381.89,"Y":82.03},{"X":379.98,"Y":80.61},{"X":378.01,"Y":79.27},{"X":375.97,"Y":78.03},{"X":373.86,"Y":76.89},{"X":371.7,"Y":75.85},{"X":369.48,"Y":74.91},{"X":367.2,"Y":74.07},{"X":364.88,"Y":73.35},{"X":362.5,"Y":72.74},{"X":360.09,"Y":72.25},{"X":357.63,"Y":71.87},{"X":355.13,"Y":71.62},{"X":352.6,"Y":71.49},{"X":351.32,"Y":71.48},{"X":350.04,"Y":71.49},{"X":347.51,"Y":71.62},{"X":345.02,"Y":71.87},{"X":342.56,"Y":72.25},{"X":340.14,"Y":72.74},{"X":337.77,"Y":73.35},{"X":335.45,"Y":74.07},{"X":333.17,"Y":74.91},{"X":330.95,"Y":75.85},{"X":328.79,"Y":76.89},{"X":326.68,"Y":78.03},{"X":324.64,"Y":79.27},{"X":322.67,"Y":80.61},{"X":320.76,"Y":82.03},{"X":318.93,"Y":83.54},{"X":317.17,"Y":85.14},{"X":315.49,"Y":86.82},{"X":313.89,"Y":88.58},{"X":312.38,"Y":90.41},{"X":310.95,"Y":92.32},{"X":309.62,"Y":94.29},{"X":308.38,"Y":96.34},{"X":307.24,"Y":98.44},{"X":306.19,"Y":100.6},{"X":305.25,"Y":102.83},{"X":304.42,"Y":105.1},{"X":303.7,"Y":107.42},{"X":303.09,"Y":109.8},{"X":302.59,"Y":112.21},{"X":302.22,"Y":114.67},{"X":301.96,"Y":117.17},{"X":301.84,"Y":119.7},{"X":301.83,"Y":120.98},{"X":301.84,"Y":122.26},{"X":301.96,"Y":124.79},{"X":302.22,"Y":127.28},{"X":302.59,"Y":129.74},{"X":303.09,"Y":132.16},{"X":303.7,"Y":134.53},{"X":304.42,"Y":136.86},{"X":305.25,"Y":139.13},{"X":306.19,"Y":141.35},{"X":307.24,"Y":143.51},{"X":308.38,"Y":145.62},{"X":309.62,"Y":147.66},{"X":310.95,"Y":149.64},{"X":312.38,"Y":151.54},{"X":313.89,"Y":153.38},{"X":315.49,"Y":155.13},{"X":317.17,"Y":156.81},{"X":318.93,"Y":158.41},{"X":320.76,"Y":159.92},{"X":322.67,"Y":161.35},{"X":324.64,"Y":162.68},{"X":326.68,"Y":163.92},{"X":328.79,"Y":165.07},{"X":330.95,"Y":166.11},{"X":333.17,"Y":167.05},{"X":335.45,"Y":167.88},{"X":337.77,"Y":168.6},{"X":340.14,"Y":169.22},{"X":342.56,"Y":169.71},{"X":345.02,"Y":170.09},{"X":347.51,"Y":170.34},{"X":350.04,"Y":170.47}]];
ClipperLib.JS.ScaleUpPaths (paths, 100);
// Diagonal brush shape ...
var shape = [{"X":4,"Y":-6},{"X":6,"Y":-6},{"X":-4,"Y":6},{"X":-6,"Y":6}];
ClipperLib.JS.ScaleUpPath (shape, 100);
var solution = ClipperLib.Clipper.MinkowskiSum(shape, paths, ClipperLib.PolyFillType.pftEvenOdd, false);
svg = '<svg style="margin-top:10px; margin-right:10px;margin-bottom:10px;background-color:#dddddd" width="485" height="250">';
svg += '<path stroke="black" fill="yellow" stroke-width="2" d="' + paths2string(paths, scale) + '"/>';
svg += '</svg>';
svg += '<svg style="margin-top:10px; margin-right:10px;margin-bottom:10px;background-color:#dddddd" width="485" height="250">';
svg += '<path stroke="black" fill="yellow" stroke-width="2" d="' + paths2string(solution, 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>
</head>
<body onload="draw()">
<h2>Javascript Clipper Library / Boolean operations / SVG example</h2>
This page shows an example of boolean operations on polygons and drawing them using SVG.
<div id="svgcontainer"></div>
</body>
</html>