adding polygon capture method

gvn · Dec 23, 2013 · f7a5e2d · f7a5e2d
1 parent aa09c7e
commit f7a5e2d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git 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
@@ -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,