new spline attr for the Line shape which enables splines

src/shapes/Line.js

@@ -10,6 +10,18 @@
     Kinetic.Line = function(config) {
         this._initLine(config);
     };
+    // function written by Rob Spencer
+    function getControlPoints(x0, y0, x1, y1, x2, y2, t) {
+        var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2));
+        var d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+        var fa = t * d01 / (d01 + d12);
+        var fb = t * d12 / (d01 + d12);
+        var p1x = x1 - fa * (x2 - x0);
+        var p1y = y1 - fa * (y2 - y0);
+        var p2x = x1 + fb * (x2 - x0);
+        var p2y = y1 + fb * (y2 - y0);
+        return [p1x, p1y, p2x, p2y];
+    }
 
     Kinetic.Line.prototype = {
         _initLine: function(config) {
@@ -17,7 +29,8 @@
                 points: [],
                 lineCap: 'butt',
                 dashArray: [],
-                detectionType: 'pixel'
+                detectionType: 'pixel',
+                spline: 0
             });
 
             this.shapeType = "Line";
@@ -27,13 +40,29 @@
             this._setDrawFuncs();
         },
         drawFunc: function(canvas) {
-            var lastPos = {}, points = this.getPoints(), length = points.length, dashArray = this.getDashArray(), dashLength = dashArray.length, context = canvas.getContext();
+            var points = this.getPoints(), length = points.length, dashArray = this.getDashArray(), dashLength = dashArray.length, context = canvas.getContext(), spline = this.getSpline();
             context.beginPath();
             context.moveTo(points[0].x, points[0].y);
 
-            for(var n = 1; n < length; n++) {
+            // spline
-                var point = points[n];
+            if(spline !== 0 && length > 2) {
-                context.lineTo(point.x, point.y);
+                var ap = this.allPoints, len = ap.length;
+                context.quadraticCurveTo(ap[0].x, ap[0].y, ap[1].x, ap[1].y);
+
+                var n = 2;
+                while(n < len - 1) {
+                    context.bezierCurveTo(ap[n].x, ap[n++].y, ap[n].x, ap[n++].y, ap[n].x, ap[n++].y);
+                }
+
+                context.quadraticCurveTo(ap[len - 1].x, ap[len - 1].y, points[length - 1].x, points[length - 1].y);
+
+            }
+            // no spline
+            else {
+                for(var n = 1; n < length; n++) {
+                    var point = points[n];
+                    context.lineTo(point.x, point.y);
+                }
             }
 
             canvas.stroke(this);
@@ -47,12 +76,41 @@
          */
         setPoints: function(val) {
             this.setAttr('points', Kinetic.Type._getPoints(val));
+            this._setAllPoints();
+        },
+        /**
+         * set spline
+         * @name setSpline
+         * @methodOf Kinetic.Line.prototype
+         * @param {Number} spline
+         */
+        setSpline: function(spline) {
+        	this.setAttr('spline', spline);
+        	this._setAllPoints();
+        },
+        _setAllPoints: function() {
+            var points = this.getPoints(), length = points.length, spline = this.getSpline(), allPoints = [];
+
+            for(var n = 1; n < length - 1; n++) {
+                var p0 = points[n - 1], p1 = points[n], p2 = points[n + 1], cp = getControlPoints(p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, spline);
+                allPoints.push({
+                    x: cp[0],
+                    y: cp[1]
+                });
+                allPoints.push(p1);
+                allPoints.push({
+                    x: cp[2],
+                    y: cp[3]
+                });
+            }
+
+            this.allPoints = allPoints;
         }
     };
     Kinetic.Global.extend(Kinetic.Line, Kinetic.Shape);
 
     // add getters setters
-    Kinetic.Node.addGetters(Kinetic.Line, ['points']);
+    Kinetic.Node.addGetters(Kinetic.Line, ['points', 'spline']);
 
     /**
      * get points array

tests/js/unit/containerTests.js

@@ -541,9 +541,9 @@ Test.Modules.CONTAINER = {
 
         var textpath = new Kinetic.TextPath({
             y: 35,
-            textStroke: 'black',
+            stroke: 'black',
-            textStrokeWidth: 1,
+            strokeWidth: 1,
-            textFill: 'orange',
+            fill: 'orange',
             fontSize: '18',
             fontFamily: 'Arial',
             text: 'The quick brown fox jumped over the lazy dog\'s back',

tests/js/unit/shapes/lineTests.js

@@ -47,6 +47,87 @@ Test.Modules.LINE = {
         line.setPoints([73, 160, 340, 23]);
         test(line.getPoints()[0].x === 73, 'first point x should be 73');
     },
+    'add curvy lines': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+
+        var line1 = new Kinetic.Line({
+            points: [{
+                x: 73,
+                y: 160
+            }, {
+                x: 340,
+                y: 23
+            }, {
+                x: 500,
+                y: 109
+            }, {
+                x: 300,
+                y: 109
+            }],
+            stroke: 'blue',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            spline: 1
+        });
+        
+        var line2 = new Kinetic.Line({
+            points: [{
+                x: 73,
+                y: 160
+            }, {
+                x: 340,
+                y: 23
+            }, {
+                x: 500,
+                y: 109
+            }],
+            stroke: 'red',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            spline: 1
+        });
+        
+        var line3 = new Kinetic.Line({
+            points: [{
+                x: 73,
+                y: 160
+            }, {
+                x: 340,
+                y: 23
+            }],
+            stroke: 'green',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            spline: 1
+        });
+
+        layer.add(line1);
+        layer.add(line2);
+        layer.add(line3);
+        stage.add(layer);
+
+        /*
+         line.transitionTo({
+         spline: 3,
+         duration: 3
+         });
+         */
+        
+        //console.log(layer.toDataURL());
+        warn(layer.toDataURL() === dataUrls['curvy lines'], 'problem with curvy lines');
+
+    },
     'add dashed line': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -95,5 +176,5 @@ Test.Modules.LINE = {
 
         test(line.getPoints().length === 4, 'line should have 4 points');
 
-    }	
+    }
 };