Merge pull request #218 from Arthaey/master

Support creating shapes with points like [[x1,y1],[x2,y2]].

src/shapes/Blob.js

@@ -5,8 +5,8 @@
      * @constructor
      * @augments Kinetic.Spline
      * @param {Object} config
-     * @param {Array} config.points can be a flattened array of points, or an array of point objects.
+     * @param {Array} config.points can be a flattened array of points, an array of point arrays, or an array of point objects.
-     *  e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
+     *  e.g. [0,1,2,3], [[0,1],[2,3]] and [{x:0,y:1},{x:2,y:3}] are equivalent
      * @param {Number} [config.tension] default value is 1.  Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
      * @param {String} [config.fill] fill color
      * @param {Image} [config.fillPatternImage] fill pattern image

src/shapes/Line.js

@@ -4,8 +4,8 @@
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
-     * @param {Array} config.points can be a flattened array of points, or an array of point objects.
+     * @param {Array} config.points can be a flattened array of points, an array of point arrays, or an array of point objects.
-     *  e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
+     *  e.g. [0,1,2,3], [[0,1],[2,3]] and [{x:0,y:1},{x:2,y:3}] are equivalent
      * 
      *
      * @param {String} [config.fill] fill color

src/shapes/Polygon.js

@@ -4,8 +4,8 @@
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
-     * @param {Array} config.points can be a flattened array of points, or an array of point objects.
+     * @param {Array} config.points can be a flattened array of points, an array of point arrays, or an array of point objects.
-     *  e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
+     *  e.g. [0,1,2,3], [[0,1],[2,3]] and [{x:0,y:1},{x:2,y:3}] are equivalent
      * 
      *
      * @param {String} [config.fill] fill color

src/shapes/Spline.js

@@ -5,8 +5,8 @@
      * @constructor
      * @augments Kinetic.Line
      * @param {Object} config
-     * @param {Array} config.points can be a flattened array of points, or an array of point objects.
+     * @param {Array} config.points can be a flattened array of points, an array of point arrays, or an array of point objects.
-     *  e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
+     *  e.g. [0,1,2,3], [[0,1],[2,3]] and [{x:0,y:1},{x:2,y:3}] are equivalent
      * @param {Number} [config.tension] default value is 1.  Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
      * 
      *

src/util/Type.js

@@ -172,6 +172,7 @@
         },
         /*
          * arg will be an array of numbers or
+         *  an array of point arrays or
          *  an array of point objects
          */
         _getPoints: function(arg) {
@@ -179,6 +180,22 @@
                 return [];
             }
 
+            // an array of arrays
+            if(this._isArray(arg[0])) {
+                /*
+                 * convert array of arrays into an array
+                 * of objects containing x, y
+                 */
+                var arr = [];
+                for(var n = 0; n < arg.length; n++) {
+                    arr.push({
+                        x: arg[n][0],
+                        y: arg[n][1]
+                    });
+                }
+
+                return arr;
+            }
             // an array of objects
             if(this._isObject(arg[0])) {
                 return arg;

tests/js/unit/shapes/splineTests.js

@@ -79,5 +79,96 @@ Test.Modules.SPLINE = {
         //console.log(layer.toDataURL());
         warn(layer.toDataURL() === dataUrls['curvy lines'], 'problem with curvy lines');
 
+    },
+    'create from points represented as a flat array': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+
+        var line = new Kinetic.Spline({
+            points: [
+                73, 160,
+                340, 23,
+                500, 109,
+                300, 109
+            ],
+            stroke: 'blue',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            tension: 1
+        });
+
+        layer.add(line);
+        stage.add(layer);
+
+        test(line.getPoints().length === 4, 'line should have 4 points');
+    },
+    'create from points represented as an array of objects': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+
+        var line = new Kinetic.Spline({
+            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,
+            tension: 1
+        });
+
+        layer.add(line);
+        stage.add(layer);
+
+        test(line.getPoints().length === 4, 'line should have 4 points');
+    },
+    'create from points represented as an array of arrays': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+
+        var line = new Kinetic.Spline({
+            points: [
+                [73, 160],
+                [340, 23],
+                [500, 109],
+                [300, 109]
+            ],
+            stroke: 'blue',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            tension: 1
+        });
+
+        layer.add(line);
+        stage.add(layer);
+
+        test(line.getPoints().length === 4, 'line should have 4 points');
     }
 };