<!DOCTYPE html>
<html>
<head>
<title>Javascript Clipper Library / Metrics / Area, Perimeter and Bounds</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>
</head>
<body>
<h2>Javascript Clipper Library / Metrics / Area, Perimeter and Bounds</h2>
<div id="svgcontainer"></div>
<script>
var path = [{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 scale = 100;
ClipperLib.JS.ScaleUpPath(path, scale);
// Scale down coordinates and draw ...
var print = '<svg style="background-color:#dddddd" width="160" height="160">';
print += '<path stroke="black" fill="none" stroke-width="2" d="' + paths2string([path], scale, true) + '"/>';
print += '</svg>';
print += '<br>Perimeter: ' + ClipperLib.JS.PerimeterOfPath(path, false, scale);
print += '<br>Bounds: ' + JSON.stringify(ClipperLib.JS.BoundsOfPath(path, scale)) + "<br>";
// Scale down coordinates and draw ...
print += '<br><svg style="background-color:#dddddd" width="160" height="160">';
print += '<path stroke="black" fill="yellow" stroke-width="2" d="' + paths2string([path], scale) + '"/>';
print += '</svg>';
print += '<br>Perimeter: ' + ClipperLib.JS.PerimeterOfPath(path, true, scale);
print += '<br>Area: ' + ClipperLib.JS.AreaOfPolygon(path, scale);
print += '<br>Bounds: ' + JSON.stringify(ClipperLib.JS.BoundsOfPath(path, scale)) + "<br>";
var paths = [[{"X":210.46,"Y":142.9},{"X":209.64,"Y":142.9},{"X":208,"Y":142.85},{"X":206.38,"Y":142.77},{"X":204.77,"Y":142.65},{"X":203.17,"Y":142.49},{"X":201.58,"Y":142.29},{"X":200,"Y":142.04},{"X":198.44,"Y":141.76},{"X":196.89,"Y":141.45},{"X":195.35,"Y":141.09},{"X":193.83,"Y":140.7},{"X":192.32,"Y":140.27},{"X":190.83,"Y":139.81},{"X":189.36,"Y":139.31},{"X":187.9,"Y":138.78},{"X":186.45,"Y":138.21},{"X":185.03,"Y":137.61},{"X":183.62,"Y":136.97},{"X":181.55,"Y":135.96},{"X":178.85,"Y":134.49},{"X":176.23,"Y":132.9},{"X":173.7,"Y":131.19},{"X":171.25,"Y":129.36},{"X":168.9,"Y":127.42},{"X":166.64,"Y":125.37},{"X":164.49,"Y":123.22},{"X":162.44,"Y":120.96},{"X":160.5,"Y":118.61},{"X":158.67,"Y":116.16},{"X":156.96,"Y":113.63},{"X":155.37,"Y":111.01},{"X":153.9,"Y":108.31},{"X":152.89,"Y":106.23},{"X":152.25,"Y":104.83},{"X":151.65,"Y":103.4},{"X":151.08,"Y":101.96},{"X":150.55,"Y":100.5},{"X":150.05,"Y":99.03},{"X":149.58,"Y":97.54},{"X":149.16,"Y":96.03},{"X":148.76,"Y":94.51},{"X":148.41,"Y":92.97},{"X":148.09,"Y":91.42},{"X":147.81,"Y":89.86},{"X":147.57,"Y":88.28},{"X":147.37,"Y":86.69},{"X":147.21,"Y":85.09},{"X":147.09,"Y":83.48},{"X":147,"Y":81.86},{"X":146.96,"Y":80.22},{"X":146.96,"Y":79.4},{"X":146.96,"Y":78.58},{"X":147,"Y":76.94},{"X":147.09,"Y":75.32},{"X":147.21,"Y":73.71},{"X":147.37,"Y":72.11},{"X":147.57,"Y":70.52},{"X":147.81,"Y":68.94},{"X":148.09,"Y":67.38},{"X":148.41,"Y":65.83},{"X":148.76,"Y":64.29},{"X":149.16,"Y":62.77},{"X":149.58,"Y":61.26},{"X":150.05,"Y":59.77},{"X":150.55,"Y":58.3},{"X":151.08,"Y":56.84},{"X":151.65,"Y":55.4},{"X":152.25,"Y":53.97},{"X":152.89,"Y":52.57},{"X":153.9,"Y":50.49},{"X":155.37,"Y":47.79},{"X":156.96,"Y":45.17},{"X":158.67,"Y":42.64},{"X":160.5,"Y":40.19},{"X":162.44,"Y":37.84},{"X":164.49,"Y":35.59},{"X":166.64,"Y":33.43},{"X":168.9,"Y":31.38},{"X":171.25,"Y":29.44},{"X":173.7,"Y":27.61},{"X":176.23,"Y":25.9},{"X":178.85,"Y":24.31},{"X":181.55,"Y":22.84},{"X":183.62,"Y":21.83},{"X":185.03,"Y":21.19},{"X":186.45,"Y":20.59},{"X":187.9,"Y":20.02},{"X":189.36,"Y":19.49},{"X":190.83,"Y":18.99},{"X":192.32,"Y":18.53},{"X":193.83,"Y":18.1},{"X":195.35,"Y":17.71},{"X":196.89,"Y":17.35},{"X":198.44,"Y":17.04},{"X":200,"Y":16.76},{"X":201.58,"Y":16.51},{"X":203.17,"Y":16.31},{"X":204.77,"Y":16.15},{"X":206.38,"Y":16.03},{"X":208,"Y":15.95},{"X":209.64,"Y":15.9},{"X":210.46,"Y":15.9},{"X":211.25,"Y":15.9},{"X":212.82,"Y":15.94},{"X":214.39,"Y":16.02},{"X":215.96,"Y":16.14},{"X":217.51,"Y":16.29},{"X":219.06,"Y":16.48},{"X":220.61,"Y":16.71},{"X":222.14,"Y":16.98},{"X":223.67,"Y":17.29},{"X":225.18,"Y":17.63},{"X":226.69,"Y":18.01},{"X":228.18,"Y":18.42},{"X":229.67,"Y":18.87},{"X":231.14,"Y":19.36},{"X":232.6,"Y":19.88},{"X":234.04,"Y":20.44},{"X":235.47,"Y":21.03},{"X":236.89,"Y":21.66},{"X":238.29,"Y":22.32},{"X":239.67,"Y":23.02},{"X":241.04,"Y":23.75},{"X":242.39,"Y":24.51},{"X":243.73,"Y":25.31},{"X":245.04,"Y":26.14},{"X":246.33,"Y":27},{"X":247.61,"Y":27.9},{"X":248.86,"Y":28.83},{"X":250.09,"Y":29.79},{"X":251.31,"Y":30.78},{"X":252.49,"Y":31.8},{"X":253.66,"Y":32.86},{"X":254.8,"Y":33.94},{"X":255.36,"Y":34.5},{"X":255.92,"Y":35.06},{"X":257,"Y":36.2},{"X":258.06,"Y":37.37},{"X":259.08,"Y":38.55},{"X":260.07,"Y":39.76},{"X":261.03,"Y":41},{"X":261.96,"Y":42.25},{"X":262.86,"Y":43.53},{"X":263.72,"Y":44.82},{"X":264.55,"Y":46.13},{"X":265.35,"Y":47.47},{"X":266.11,"Y":48.82},{"X":266.84,"Y":50.18},{"X":267.54,"Y":51.57},{"X":268.2,"Y":52.97},{"X":268.83,"Y":54.39},{"X":269.42,"Y":55.82},{"X":269.98,"Y":57.26},{"X":270.5,"Y":58.72},{"X":270.99,"Y":60.19},{"X":271.44,"Y":61.68},{"X":271.85,"Y":63.17},{"X":272.23,"Y":64.68},{"X":272.57,"Y":66.19},{"X":272.88,"Y":67.72},{"X":273.14,"Y":69.25},{"X":273.37,"Y":70.8},{"X":273.57,"Y":72.35},{"X":273.72,"Y":73.9},{"X":273.84,"Y":75.47},{"X":273.92,"Y":77.04},{"X":273.96,"Y":78.61},{"X":273.96,"Y":79.4},{"X":273.95,"Y":80.22},{"X":273.91,"Y":81.86},{"X":273.83,"Y":83.48},{"X":273.71,"Y":85.09},{"X":273.55,"Y":86.69},{"X":273.34,"Y":88.28},{"X":273.1,"Y":89.86},{"X":272.82,"Y":91.42},{"X":272.51,"Y":92.97},{"X":272.15,"Y":94.51},{"X":271.76,"Y":96.03},{"X":271.33,"Y":97.54},{"X":270.87,"Y":99.03},{"X":270.37,"Y":100.5},{"X":269.83,"Y":101.96},{"X":269.27,"Y":103.4},{"X":268.66,"Y":104.83},{"X":268.03,"Y":106.23},{"X":267.02,"Y":108.31},{"X":265.55,"Y":111.01},{"X":263.96,"Y":113.63},{"X":262.25,"Y":116.16},{"X":260.42,"Y":118.61},{"X":258.48,"Y":120.96},{"X":256.43,"Y":123.22},{"X":254.27,"Y":125.37},{"X":252.02,"Y":127.42},{"X":249.67,"Y":129.36},{"X":247.22,"Y":131.19},{"X":244.69,"Y":132.9},{"X":242.07,"Y":134.49},{"X":239.37,"Y":135.96},{"X":237.29,"Y":136.97},{"X":235.89,"Y":137.61},{"X":234.46,"Y":138.21},{"X":233.02,"Y":138.78},{"X":231.56,"Y":139.31},{"X":230.09,"Y":139.81},{"X":228.59,"Y":140.27},{"X":227.09,"Y":140.7},{"X":225.57,"Y":141.09},{"X":224.03,"Y":141.45},{"X":222.48,"Y":141.76},{"X":220.92,"Y":142.04},{"X":219.34,"Y":142.29},{"X":217.75,"Y":142.49},{"X":216.15,"Y":142.65},{"X":214.54,"Y":142.77},{"X":212.91,"Y":142.85},{"X":211.28,"Y":142.9}],[{"X":38.16,"Y":132.99},{"X":53.45,"Y":86.01},{"X":13.44,"Y":56.97},{"X":62.89,"Y":56.97},{"X":78.17,"Y":9.99},{"X":93.46,"Y":56.97},{"X":142.91,"Y":56.97},{"X":102.9,"Y":86.01},{"X":118.18,"Y":132.99},{"X":78.17,"Y":103.96}],[{"X":210.46,"Y":111.15},{"X":211.28,"Y":111.14},{"X":212.9,"Y":111.06},{"X":214.5,"Y":110.9},{"X":216.08,"Y":110.66},{"X":217.63,"Y":110.34},{"X":219.15,"Y":109.95},{"X":220.64,"Y":109.49},{"X":222.1,"Y":108.95},{"X":223.53,"Y":108.35},{"X":224.91,"Y":107.68},{"X":226.26,"Y":106.95},{"X":227.57,"Y":106.15},{"X":228.84,"Y":105.3},{"X":230.06,"Y":104.38},{"X":231.24,"Y":103.41},{"X":232.37,"Y":102.39},{"X":233.44,"Y":101.31},{"X":234.47,"Y":100.18},{"X":235.44,"Y":99},{"X":236.35,"Y":97.78},{"X":237.21,"Y":96.52},{"X":238,"Y":95.21},{"X":238.74,"Y":93.86},{"X":239.41,"Y":92.47},{"X":240.01,"Y":91.04},{"X":240.54,"Y":89.58},{"X":241.01,"Y":88.09},{"X":241.4,"Y":86.57},{"X":241.72,"Y":85.02},{"X":241.96,"Y":83.45},{"X":242.12,"Y":81.84},{"X":242.2,"Y":80.22},{"X":242.21,"Y":79.4},{"X":242.2,"Y":78.58},{"X":242.12,"Y":76.96},{"X":241.96,"Y":75.36},{"X":241.72,"Y":73.78},{"X":241.4,"Y":72.23},{"X":241.01,"Y":70.71},{"X":240.54,"Y":69.22},{"X":240.01,"Y":67.76},{"X":239.41,"Y":66.33},{"X":238.74,"Y":64.94},{"X":238,"Y":63.6},{"X":237.21,"Y":62.29},{"X":236.35,"Y":61.02},{"X":235.44,"Y":59.8},{"X":234.47,"Y":58.62},{"X":233.44,"Y":57.49},{"X":232.37,"Y":56.42},{"X":231.24,"Y":55.39},{"X":230.06,"Y":54.42},{"X":228.84,"Y":53.51},{"X":227.57,"Y":52.65},{"X":226.26,"Y":51.85},{"X":224.91,"Y":51.12},{"X":223.53,"Y":50.45},{"X":222.1,"Y":49.85},{"X":220.64,"Y":49.32},{"X":219.15,"Y":48.85},{"X":217.63,"Y":48.46},{"X":216.08,"Y":48.14},{"X":214.5,"Y":47.9},{"X":212.9,"Y":47.74},{"X":211.28,"Y":47.66},{"X":210.46,"Y":47.65},{"X":209.64,"Y":47.66},{"X":208.01,"Y":47.74},{"X":206.41,"Y":47.9},{"X":204.84,"Y":48.14},{"X":203.29,"Y":48.46},{"X":201.76,"Y":48.85},{"X":200.27,"Y":49.32},{"X":198.81,"Y":49.85},{"X":197.39,"Y":50.45},{"X":196,"Y":51.12},{"X":194.65,"Y":51.85},{"X":193.34,"Y":52.65},{"X":192.08,"Y":53.51},{"X":190.85,"Y":54.42},{"X":189.68,"Y":55.39},{"X":188.55,"Y":56.42},{"X":187.47,"Y":57.49},{"X":186.45,"Y":58.62},{"X":185.48,"Y":59.8},{"X":184.56,"Y":61.02},{"X":183.71,"Y":62.29},{"X":182.91,"Y":63.6},{"X":182.18,"Y":64.94},{"X":181.51,"Y":66.33},{"X":180.91,"Y":67.76},{"X":180.37,"Y":69.22},{"X":179.91,"Y":70.71},{"X":179.52,"Y":72.23},{"X":179.2,"Y":73.78},{"X":178.96,"Y":75.36},{"X":178.8,"Y":76.96},{"X":178.72,"Y":78.58},{"X":178.71,"Y":79.4},{"X":178.72,"Y":80.22},{"X":178.8,"Y":81.84},{"X":178.96,"Y":83.45},{"X":179.2,"Y":85.02},{"X":179.52,"Y":86.57},{"X":179.91,"Y":88.09},{"X":180.37,"Y":89.58},{"X":180.91,"Y":91.04},{"X":181.51,"Y":92.47},{"X":182.18,"Y":93.86},{"X":182.91,"Y":95.21},{"X":183.71,"Y":96.52},{"X":184.56,"Y":97.78},{"X":185.48,"Y":99},{"X":186.45,"Y":100.18},{"X":187.47,"Y":101.31},{"X":188.55,"Y":102.39},{"X":189.68,"Y":103.41},{"X":190.85,"Y":104.38},{"X":192.08,"Y":105.3},{"X":193.34,"Y":106.15},{"X":194.65,"Y":106.95},{"X":196,"Y":107.68},{"X":197.39,"Y":108.35},{"X":198.81,"Y":108.95},{"X":200.27,"Y":109.49},{"X":201.76,"Y":109.95},{"X":203.29,"Y":110.34},{"X":204.84,"Y":110.66},{"X":206.41,"Y":110.9},{"X":208.01,"Y":111.06},{"X":209.64,"Y":111.14}]];
var 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}]];
ClipperLib.JS.ScaleUpPaths(paths, scale);
// Scale down coordinates and draw ...
print += '<br><svg style="background-color:#dddddd" width="320" height="160">';
print += '<path stroke="black" fill="yellow" stroke-width="2" d="' + paths2string(paths, scale) + '"/>';
print += '</svg>';
print += '<br>Perimeter: ' + ClipperLib.JS.PerimeterOfPaths(paths, true, scale);
print += '<br>Area: ' + ClipperLib.JS.AreaOfPolygons(paths, scale);
print += '<br>Bounds: ' + JSON.stringify(ClipperLib.JS.BoundsOfPaths(paths, scale)) + "<br>";
document.getElementById("svgcontainer").innerHTML = print;
// Converts Paths to SVG path string
// and scales down the coordinates
function paths2string (paths, scale, open) {
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);
}
if (!open) svgpath += "Z";
}
if (svgpath=="") svgpath = "M0,0";
return svgpath;
}
</script>
</body>
</html>