Implemented 's' and 'S'

src/shapes/Path.js

@@ -73,17 +73,20 @@ Kinetic.Path.prototype = {
 		//C (x1 y1 x2 y2 x y)+ Absolute Bezier curve
 		//q (x1 y1 x y)+       Relative Quadratic Bezier
 		//Q (x1 y1 x y)+       Absolute Quadratic Bezier
-		
 		//t (x y)+	Shorthand/Smooth Relative Quadratic Bezier
 		//T (x y)+	Shorthand/Smooth Absolute Quadratic Bezier
+		//s (x2 y2 x y)+	   Shorthand/Smooth Relative Bezier curve
+		//S (x2 y2 x y)+	   Shorthand/Smooth Absolute Bezier curve
 		
-		// Note: SVG s,S,t,T,a,A not implemented here
+		// Note: SVG a,A not implemented here
+		//a (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ 	Relative Elliptical Arc
+		//A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+  Absolute Elliptical Arc
 	
 	
         // command string
         var cs = this.attrs.commands;
         // command chars
-        var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z', 'c', 'C', 'q', 'Q', 't', 'T'];
+        var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z', 'c', 'C', 'q', 'Q', 't', 'T', 's', 'S'];
         // convert white spaces to commas
         cs = cs.replace(new RegExp(' ', 'g'), ',');
         // create pipes so that we can split the commands
@@ -186,6 +189,32 @@ Kinetic.Path.prototype = {
 						cmd = 'C'
 						points.push(cpx, cpy);	
 						break;			
+					case 'S':
+						var ctlPtx = cpx, ctlPty = cpy;						
+						var prevCmd = ca[ca.length-1];
+						if (prevCmd.command === 'C') {
+							ctlPtx = cpx + (cpx - prevCmd.points[2]);
+							ctlPty = cpy + (cpy - prevCmd.points[3]);
+						}
+						points.push(ctlPtx, ctlPty, p.shift(), p.shift())
+						cpx = p.shift();
+						cpy = p.shift();
+						cmd = 'C';
+						points.push(cpx, cpy);
+						break;		
+					case 's':
+						var ctlPtx = cpx, ctlPty = cpy;						
+						var prevCmd = ca[ca.length-1];
+						if (prevCmd.command === 'C') {
+							ctlPtx = cpx + (cpx - prevCmd.points[2]);
+							ctlPty = cpy + (cpy - prevCmd.points[3]);
+						}
+						points.push(ctlPtx, ctlPty, cpx + p.shift(), cpy + p.shift())
+						cpx += p.shift();
+						cpy += p.shift();
+						cmd = 'C';
+						points.push(cpx, cpy);
+						break;		
 					case 'Q':
 						points.push(p.shift(), p.shift());
 						cpx = p.shift();
@@ -223,6 +252,7 @@ Kinetic.Path.prototype = {
 						cmd = 'Q';
 						points.push(ctlPtx, ctlPty, cpx, cpy);
 						break;		
+				
 				}
 
 				ca.push({
@@ -236,7 +266,6 @@ Kinetic.Path.prototype = {
 				ca.push( {command: 'z', points: [] });
         }			
 			
-		
         return ca;
     },
     /**
@@ -249,7 +278,7 @@ Kinetic.Path.prototype = {
      * set SVG path commands string.  This method
      *  also automatically parses the commands string
      *  into a commands array.  Currently supported SVG commands:
-     *  M, L, l, H, h, V, v, z
+     *  M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, Z, z
      * @param {String} SVG path command string
      */
     setCommands: function(commands) {

tests/js/unitTests.js

@@ -1412,6 +1412,80 @@ Test.prototype.tests = {
 		
         stage.add(layer);
 
+    },	
+    'SHAPE - Cubic Bezier Curve test from SVG w3c spec': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 1024,
+            height: 480,
+            throttle: 80,
+            scale: 0.5,
+            x: 50,
+            y: 10
+        });
+        var layer = new Kinetic.Layer();
+
+		var c = "M100,200 C100,100 250,100 250,200 S400,300 400,200";
+		
+		var path = new Kinetic.Path({
+			commands: c,
+			stroke: 'red',
+			strokeWidth: 5,
+		});
+
+		layer.add(path);
+		
+		layer.add(new Kinetic.Circle({
+			x: 100,
+			y: 200,
+			radius: 10,
+			stroke: '#888'
+		}));
+
+		layer.add(new Kinetic.Circle({
+			x: 250,
+			y: 200,
+			radius: 10,
+			stroke: '#888'
+		}));		
+
+		layer.add(new Kinetic.Circle({
+			x: 400,
+			y: 200,
+			radius: 10,
+			stroke: '#888'
+		}));	
+		
+		layer.add(new Kinetic.Circle({
+			x: 100,
+			y: 100,
+			radius: 10,
+			fill: '#888'
+		}));	
+		
+		layer.add(new Kinetic.Circle({
+			x: 250,
+			y: 100,
+			radius: 10,
+			fill: '#888'
+		}));
+		
+		layer.add(new Kinetic.Circle({
+			x: 400,
+			y: 300,
+			radius: 10,
+			fill: '#888'
+		}));
+		
+		layer.add(new Kinetic.Circle({
+			x: 250,
+			y: 300,
+			radius: 10,
+			stroke: 'blue'
+		}));
+		
+        stage.add(layer);
+
     },	
     'SHAPE - add shape with custom attr pointing to self': function(containerId) {
         var stage = new Kinetic.Stage({