added new Line Shape

Thorfile

@@ -6,7 +6,7 @@ class Build < Thor
     "license.js", "src/GlobalObject.js", "src/Node.js", "src/Container.js", "src/Stage.js",
     "src/Layer.js", "src/Group.js", "src/Shape.js", "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Image.js",
     "src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js",
-    "src/util/Transform.js", "src/util/Transition.js"
+    "src/shapes/Line.js", "src/util/Transform.js", "src/util/Transition.js"
   ]
   
   desc "dev", "Concatenate all the js files into /dist/kinetic-VERSION.js."

dist/kinetic-core.js

@@ -2397,6 +2397,21 @@ Kinetic.Shape.prototype = {
     getCanvas: function() {
         return this.tempLayer.getCanvas();
     },
+    /**
+     * helper method to stroke shape
+     */
+    stroke: function() {
+        var context = this.getContext();
+
+        if(!!this.attrs.stroke || !!this.attrs.strokeWidth) {
+            var stroke = !!this.attrs.stroke ? this.attrs.stroke : 'black';
+            var strokeWidth = !!this.attrs.strokeWidth ? this.attrs.strokeWidth : 2;
+
+            context.lineWidth = strokeWidth;
+            context.strokeStyle = stroke;
+            context.stroke();
+        }
+    },
     /**
      * helper method to fill and stroke a shape
      *  based on its fill, stroke, and strokeWidth, properties
@@ -2413,14 +2428,7 @@ Kinetic.Shape.prototype = {
             context.fill();
         }
 
-        if(!!this.attrs.stroke || !!this.attrs.strokeWidth) {
+        this.stroke();
-            var stroke = !!this.attrs.stroke ? this.attrs.stroke : 'black';
-            var strokeWidth = !!this.attrs.strokeWidth ? this.attrs.strokeWidth : 2;
-
-            context.lineWidth = strokeWidth;
-            context.strokeStyle = stroke;
-            context.stroke();
-        }
     },
     /**
      * helper method to set the line join of a shape
@@ -3326,6 +3334,74 @@ Kinetic.Text.prototype = {
 // extend Shape
 Kinetic.GlobalObject.extend(Kinetic.Text, Kinetic.Shape);
 
+///////////////////////////////////////////////////////////////////////
+//  Line
+///////////////////////////////////////////////////////////////////////
+/**
+ * Line constructor.  Lines are defined by an array of points
+ * @constructor
+ * @augments Kinetic.Shape
+ * @param {Object} config
+ */
+Kinetic.Line = function(config) {
+    this.setDefaultAttrs({
+        points: {},
+        lineCap: 'butt'
+    });
+
+    this.shapeType = "Line";
+    config.drawFunc = function() {
+        var context = this.getContext();
+        context.beginPath();
+        this.applyLineJoin();
+        context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
+        for(var n = 1; n < this.attrs.points.length; n++) {
+            context.lineTo(this.attrs.points[n].x, this.attrs.points[n].y);
+        }
+
+        if(!!this.attrs.lineCap) {
+            context.lineCap = this.attrs.lineCap;
+        }
+        this.stroke();
+    };
+    // call super constructor
+    Kinetic.Shape.apply(this, [config]);
+};
+/*
+ * Line methods
+ */
+Kinetic.Line.prototype = {
+    /**
+     * set points array
+     * @param {Array} points
+     */
+    setPoints: function(points) {
+        this.attrs.points = points;
+    },
+    /**
+     * get points array
+     */
+    getPoints: function() {
+        return this.attrs.points;
+    },
+    /**
+     * set line cap.  Can be butt, round, or square
+     * @param {String} lineCap
+     */
+    setLineCap: function(lineCap) {
+        this.attrs.lineCap = lineCap;
+    },
+    /**
+     * get line cap
+     */
+    getLineCap: function() {
+        return this.attrs.lineCap;
+    }
+};
+
+// extend Shape
+Kinetic.GlobalObject.extend(Kinetic.Line, Kinetic.Shape);
+
 /*
 * Last updated November 2011
 * By Simon Sarris

src/Shape.js

@@ -50,6 +50,21 @@ Kinetic.Shape.prototype = {
     getCanvas: function() {
         return this.tempLayer.getCanvas();
     },
+    /**
+     * helper method to stroke shape
+     */
+    stroke: function() {
+        var context = this.getContext();
+
+        if(!!this.attrs.stroke || !!this.attrs.strokeWidth) {
+            var stroke = !!this.attrs.stroke ? this.attrs.stroke : 'black';
+            var strokeWidth = !!this.attrs.strokeWidth ? this.attrs.strokeWidth : 2;
+
+            context.lineWidth = strokeWidth;
+            context.strokeStyle = stroke;
+            context.stroke();
+        }
+    },
     /**
      * helper method to fill and stroke a shape
      *  based on its fill, stroke, and strokeWidth, properties
@@ -66,14 +81,7 @@ Kinetic.Shape.prototype = {
             context.fill();
         }
 
-        if(!!this.attrs.stroke || !!this.attrs.strokeWidth) {
+        this.stroke();
-            var stroke = !!this.attrs.stroke ? this.attrs.stroke : 'black';
-            var strokeWidth = !!this.attrs.strokeWidth ? this.attrs.strokeWidth : 2;
-
-            context.lineWidth = strokeWidth;
-            context.strokeStyle = stroke;
-            context.stroke();
-        }
     },
     /**
      * helper method to set the line join of a shape

src/shapes/Line.js

@@ -0,0 +1,67 @@
+///////////////////////////////////////////////////////////////////////
+//  Line
+///////////////////////////////////////////////////////////////////////
+/**
+ * Line constructor.  Lines are defined by an array of points
+ * @constructor
+ * @augments Kinetic.Shape
+ * @param {Object} config
+ */
+Kinetic.Line = function(config) {
+    this.setDefaultAttrs({
+        points: {},
+        lineCap: 'butt'
+    });
+
+    this.shapeType = "Line";
+    config.drawFunc = function() {
+        var context = this.getContext();
+        context.beginPath();
+        this.applyLineJoin();
+        context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
+        for(var n = 1; n < this.attrs.points.length; n++) {
+            context.lineTo(this.attrs.points[n].x, this.attrs.points[n].y);
+        }
+
+        if(!!this.attrs.lineCap) {
+            context.lineCap = this.attrs.lineCap;
+        }
+        this.stroke();
+    };
+    // call super constructor
+    Kinetic.Shape.apply(this, [config]);
+};
+/*
+ * Line methods
+ */
+Kinetic.Line.prototype = {
+    /**
+     * set points array
+     * @param {Array} points
+     */
+    setPoints: function(points) {
+        this.attrs.points = points;
+    },
+    /**
+     * get points array
+     */
+    getPoints: function() {
+        return this.attrs.points;
+    },
+    /**
+     * set line cap.  Can be butt, round, or square
+     * @param {String} lineCap
+     */
+    setLineCap: function(lineCap) {
+        this.attrs.lineCap = lineCap;
+    },
+    /**
+     * get line cap
+     */
+    getLineCap: function() {
+        return this.attrs.lineCap;
+    }
+};
+
+// extend Shape
+Kinetic.GlobalObject.extend(Kinetic.Line, Kinetic.Shape);

tests/js/Test.js

@@ -10,7 +10,7 @@ function log(message) {
  * Test constructor
  */
 function Test() {
-    this.testOnly = 'TRANSITION - all transition types';
+    this.testOnly = '';
     this.counter = 0;
 }
 /**

tests/js/unitTests.js

@@ -960,6 +960,38 @@ Test.prototype.tests = {
         });
         //stage.start();
     },
+    'SHAPES - add line': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+
+        var points = [{
+            x: 73,
+            y: 160
+        }, {
+            x: 340,
+            y: 23
+        }, {
+            x: 500,
+            y: 109
+        }];
+
+        var line = new Kinetic.Line({
+            points: points,
+            stroke: 'blue',
+            strokeWidth: 20,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true
+        });
+
+        layer.add(line);
+        stage.add(layer);
+
+    },
     'SHAPES - add regular polygon triangle': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,