jcuts
Version:
123 lines (116 loc) • 3.89 kB
HTML
<html>
<head>
<title>jcuts.js examples</title>
<script src="../src/jcuts.js"></script>
<script src="../bower_components/jmaths/jmaths.js"></script>
<script src="../bower_components/jpaths/jpaths.js"></script>
<style>
.canvas {
border: solid 1px #ccc;
width: 400px;
height: 400px;
position: relative;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="canvas"></div>
<div class="canvas" id="div-1"></div>
<div class="canvas" id="div-2"></div>
<!-- <canvas id="canvas-diff"></canvas> -->
</body>
<script>
(function() {
// var paper = jcuts.createPaper(5, 250, 250, 200);
// var paperCanvas = jpaths.create({
// parent: 'canvas'
// });
// paperCanvas.attr({
// path: 'M 1,0 L 10,100'
// });
function diffPolygon(a, b) {
var canvas1 = document.createElement("canvas");
var canvas2 = document.createElement("canvas");
var minX = Infinity;
var minY = Infinity;
var maxX = 0;
var maxY = 0;
for (var i = 0; i < a.length; i++) {
var point = a[i];
minX = (minX > point[0]) ? point[0] : minX;
minY = (minY > point[1]) ? point[1] : minY;
maxX = (maxX < point[0]) ? point[0] : maxX;
maxY = (maxY < point[1]) ? point[1] : maxY;
}
for (var i = 0; i < b.length; i++) {
var point = b[i];
minX = (minX > point[0]) ? point[0] : minX;
minY = (minY > point[1]) ? point[1] : minY;
maxX = (maxX < point[0]) ? point[0] : maxX;
maxY = (maxY < point[1]) ? point[1] : maxY;
}
var width = maxX - minX + 1;
var height = maxY - minY + 1;
console.log(width + "," + height);
canvas1.width = width;
canvas1.height = height;
canvas2.width = width;
canvas2.height = height;
document.getElementById('div-1').appendChild(canvas1);
document.getElementById('div-2').appendChild(canvas2);
// var canvasDiff = document.getElementById("canvas-diff");
drawPolygon(canvas1, a, minX, minY);
drawPolygon(canvas2, b, minX, minY);
var similarity = 1 - calculateDiff(canvas1, canvas2, width, height);
console.log('similarity: ' + similarity);
return similarity;
}
function drawPolygon(canvas, vertex, offsetX, offsetY) {
var offsetX = offsetX || 0;
var offsetY = offsetY || 0;
var context = canvas.getContext('2d');
context.beginPath();
var beginX;
var beginY;
for (var i = 0; i < vertex.length; i++) {
var point = vertex[i];
var x = point[0] - offsetX;
var y = point[1] - offsetY;
if (i === 0) {
beginX = x;
beginY = y;
context.moveTo(x, y);
} else {
context.lineTo(x, y);
}
}
context.lineTo(beginX, beginY);
context.closePath();
context.fill();
}
function calculateDiff(canvas1, canvas2, width, height) {
var context1 = canvas1.getContext('2d');
var context2 = canvas2.getContext('2d');
var imgData1 = context1.getImageData(0, 0, width, height);
var imgData2 = context2.getImageData(0, 0, width, height);
var diffPixelNum = 0;
var baseNum = 0;
for (var i = 0; i < imgData1.data.length; i += 4) {
baseNum += imgData1.data[i + 3] / 255;
baseNum += imgData2.data[i + 3] / 255;
var pixelDiff = Math.abs(imgData1.data[i + 3] - imgData2.data[i + 3]) / 255;
diffPixelNum += pixelDiff;
}
console.log(diffPixelNum + ',' + baseNum);
return diffPixelNum / baseNum;
}
var polygon1 = [[5, 5], [5, 15], [10, 15]];
var polygon2 = [[5, 5], [5, 15], [10, 5]];
var polygon3 = [[5, 0], [10, 0], [10, 10]];
diffPolygon(polygon1, polygon2);
})();
</script>
</html>