implemented dashed and dotted line styling for Kinetic.Line based on method written by Phrogz

src/shapes/Line.js

@@ -10,17 +10,32 @@
 Kinetic.Line = function(config) {
     this.setDefaultAttrs({
         points: {},
-        lineCap: 'butt'
+        lineCap: 'butt',
+        dashArray: []
     });
 
     this.shapeType = "Line";
     config.drawFunc = function() {
         var context = this.getContext();
+        var lastPos = {};
         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);
+            var x = this.attrs.points[n].x;
+            var y = this.attrs.points[n].y;
+            if(this.attrs.dashArray.length > 0) {
+                // draw dashed line
+                var lastX = this.attrs.points[n - 1].x;
+                var lastY = this.attrs.points[n - 1].y;
+                this._dashedLine(lastX, lastY, x, y, this.attrs.dashArray);
+            }
+            else {
+                // draw normal line
+                context.lineTo(x, y);
+            }
         }
 
         if(!!this.attrs.lineCap) {
@@ -60,6 +75,59 @@ Kinetic.Line.prototype = {
      */
     getLineCap: function() {
         return this.attrs.lineCap;
+    },
+    /**
+     * set dash array.
+     * @param {Array} dashArray
+     *  examples:<br>
+     *  [10, 5] dashes are 10px long and 5 pixels apart
+     *  [10, 20, 0, 20] if using a round lineCap, the line will
+     *  be made up of alternating dashed lines that are 10px long
+     *  and 20px apart, and dots that have a radius of 5 and are 20px
+     *  apart
+     */
+    setDashArray: function(dashArray) {
+        this.attrs.dashArray = dashArray;
+    },
+    /**
+     * get dash array
+     */
+    getDashArray: function() {
+        return this.attrs.dashArray;
+    },
+    /**
+     * draw dashed line.  Written by Phrogz
+     */
+    _dashedLine: function(x, y, x2, y2, dashArray) {
+        var context = this.getContext();
+        var dashCount = dashArray.length;
+
+        var dx = (x2 - x), dy = (y2 - y);
+        var xSlope = (Math.abs(dx) > Math.abs(dy));
+        var slope = (xSlope) ? dy / dx : dx / dy;
+        var distRemaining = Math.sqrt(dx * dx + dy * dy);
+        var dashIndex = 0, draw = true;
+        while(distRemaining >= 0.1 && dashIndex < 10000) {
+            var dashLength = dashArray[dashIndex++ % dashCount];
+            if(dashLength === 0) {
+                dashLength = 0.001;
+            }
+            if(dashLength > distRemaining) {
+                dashLength = distRemaining;
+            }
+            var step = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
+            if(xSlope) {
+                x += step;
+                y += slope * step;
+            }
+            else {
+                x += slope * step;
+                y += step;
+            }
+            context[draw ? 'lineTo' : 'moveTo'](x, y);
+            distRemaining -= dashLength;
+            draw = !draw;
+        }
     }
 };