diff --git a/_ui/css/main.css b/_ui/css/main.css index 0cb4e25..97bf4e6 100755 --- a/_ui/css/main.css +++ b/_ui/css/main.css @@ -143,6 +143,10 @@ video { margin-right: 10px; } + video:hover { + cursor: crosshair; + } + canvas, img { width: 640px; height: 480px; diff --git a/_ui/js/main.js b/_ui/js/main.js index f615e15..7a38ceb 100755 --- a/_ui/js/main.js +++ b/_ui/js/main.js @@ -30,6 +30,7 @@ window.VIDEO = { // Canvas Setup + self.ctx.imageSmoothingEnabled = true; self.ctx.fillStyle = '#666'; self.ctx.fillRect(0, 0, self.options.width, self.options.height); @@ -79,6 +80,30 @@ window.VIDEO = { self.ctx.drawImage(self.elVideo, 0, 0, self.options.width, self.options.height); self.ctx.restore(); }, + /** + * Capture a polygonal shape from the video feed and render it onto the canvas + * @param {Array} points An array of arrays containing two Number values for x and y coords + */ + updatePolygon: function (points) { + var self = this; + + if (points.length < 3) { + throw 'Polygons must have at least 3 points'; + } + + self.ctx.save(); + self.ctx.beginPath(); + self.ctx.moveTo(points[0][0], points[0][1]); + + for (var i = 1; i < points.length; i++) { + self.ctx.lineTo(points[i][0], points[i][1]); + } + + self.ctx.closePath(); + self.ctx.clip(); + self.ctx.drawImage(self.elVideo, 0, 0, self.options.width, self.options.height); + self.ctx.restore(); + }, startRowGrab: function () { var self = this, x = 0,