Implemented "a", "A". Added unit test for SVG "tiger" path (the canonical SVG example)

src/shapes/Path.js

@@ -34,6 +34,22 @@ Kinetic.Path = function(config) {
                 case 'Q':
                     context.quadraticCurveTo(p[0], p[1], p[2], p[3]);
                     break;
+                case 'A':
+					var cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6], fs = p[7];
+					
+					var r = (rx > ry) ? rx : ry;
+					var scaleX = (rx > ry) ? 1 : rx / ry;
+					var scaleY = (rx > ry) ? ry / rx : 1;
+
+					context.translate(cx, cy);
+					context.rotate(psi);
+					context.scale(scaleX, scaleY);
+					context.arc(0, 0, r, theta, theta + dTheta, 1 - fs);
+					context.scale(1 / scaleX, 1 / scaleY);
+					context.rotate(-psi);
+					context.translate(-cx, -cy);
+							
+                    break;					
                 case 'z':
                     context.closePath();
                     break;
@@ -78,15 +94,13 @@ Kinetic.Path.prototype = {
         //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 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.data;
         // command chars
-        var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z', 'c', 'C', 'q', 'Q', 't', 'T', 's', 'S'];
+        var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z', 'c', 'C', 'q', 'Q', 't', 'T', 's', 'S', 'a', 'A'];
         // convert white spaces to commas
         cs = cs.replace(new RegExp(' ', 'g'), ',');
         // create pipes so that we can split the data
@@ -253,7 +267,22 @@ Kinetic.Path.prototype = {
                         cmd = 'Q';
                         points.push(ctlPtx, ctlPty, cpx, cpy);
                         break;
-
+                    case 'A':
+                        var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift();
+                        var x1 = cpx, y1 = cpy;
+                        cpx = p.shift(), cpy = p.shift();
+                        
+                        cmd = 'A';
+                        points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
+                        break;
+                    case 'a':
+                        var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift();
+                        var x1 = cpx, y1 = cpy;
+                        cpx += p.shift(), cpy += p.shift();
+                        
+                        cmd = 'A';
+                        points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
+                        break;
                 }
 
                 ca.push({
@@ -282,12 +311,57 @@ Kinetic.Path.prototype = {
      * set SVG path data string.  This method
      *  also automatically parses the data string
      *  into a data array.  Currently supported SVG data:
-     *  M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, Z, z
+     *  M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z
      * @param {String} SVG path command string
      */
     setData: function(data) {
         this.attrs.data = data;
         this.dataArray = this.getDataArray();
+    },
+    _convertEndpointToCenterParameterization: function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) {
+    
+		// Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
+		
+		var psi = psiDeg * (Math.PI / 180.0);
+
+		var xp = Math.cos(psi) * (x1 - x2) / 2.0 + Math.sin(psi) * (y1 - y2) / 2.0;
+		var yp = -1 * Math.sin(psi) * (x1 - x2) / 2.0 + Math.cos(psi) * (y1 - y2) / 2.0;
+
+		var lambda = (xp*xp) / (rx*rx) + (yp*yp) / (ry*ry);
+		
+		if (lambda > 1) {
+			rx *= Math.sqrt(lambda);
+			ry *= Math.sqrt(lambda);
+		}
+		
+		var f = Math.sqrt((((rx*rx) * (ry*ry)) - ((rx*rx) * (yp*yp)) - ((ry*ry) * (xp*xp))) / ((rx*rx) * (yp*yp) + (ry*ry) * (xp*xp)));
+		
+		if (fa == fs) f *= -1;
+		if (isNaN(f)) f = 0;
+		
+		var cxp = f * rx * yp / ry;
+		var	cyp = f * -ry * xp / rx;
+	
+		var cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp;
+		var	cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp;
+		
+		var vMag = function(v) { return Math.sqrt(v[0]*v[0] + v[1]*v[1]); }
+		var vRatio = function(u, v) { return (u[0]*v[0] + u[1]*v[1]) / (vMag(u) * vMag(v)) }
+		var vAngle = function(u, v) { return (u[0]*v[1] < u[1]*v[0] ? -1 : 1) * Math.acos(vRatio(u,v)); }
+		
+		var theta = vAngle([1,0], [(xp - cxp) / rx, (yp - cyp) / ry]);
+
+		var u = [(xp - cxp) / rx, (yp - cyp) / ry];
+		var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
+		var dTheta = vAngle(u, v);
+		
+		if (vRatio(u,v) <= -1) dTheta = Math.PI;
+		if (vRatio(u,v) >= 1) dTheta = 0;
+
+		if (fs == 0 && dTheta > 0) dTheta = dTheta - 2 * Math.PI;
+		if (fs == 1 && dTheta < 0) dTheta = dTheta + 2 * Math.PI;
+	
+		return [cx, cy, rx, ry, theta, dTheta, psi, fs];       
     }
 };
 

tests/html/unitTests.html

@@ -1,17 +1,18 @@
 <!DOCTYPE HTML>
 <html>
-	<head>
+    <head>
-		<link rel="stylesheet" type="text/css"href="../base.css">
+        <link rel="stylesheet" type="text/css"href="../base.css">
-		<script src="../../dist/kinetic-core.js"></script>
+        <script src="../../dist/kinetic-core.js"></script>
-		<script src="../assets/worldMap.js"></script>
+        <script src="../assets/worldMap.js"></script>
-		<script src="../js/Test.js"></script>
+        <script src="../assets/tiger.js"></script>
-		<script src="../js/unitTests.js"></script>
+        <script src="../js/Test.js"></script>
-		<script>
+        <script src="../js/unitTests.js"></script>
+        <script>
             window.onload = function() {
                 var test = new Test();
                 test.run();
             };
-		</script>
+        </script>
-	</head>
+    </head>
-	<body onmousedown="return false;"></body>
+    <body onmousedown="return false;"></body>
 </html>

tests/js/unitTests.js

@@ -1640,6 +1640,64 @@ Test.prototype.tests = {
         stage.add(layer);
 
     },
+		'SHAPE - arc': 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,350 l 50,-25 a25,25 -30 0,1 50,-25 l 50,-25 a25,50 -30 0,1 50,-25 l 50,-25 a25,75 -30 0,1 50,-25 l 50,-25 a25,100 -30 0,1 50,-25 l 50,-25";
+
+		var path = new Kinetic.Path({
+			data: c,
+			fill: 'none',
+			stroke: '#999',
+			strokeWidth: 1,
+		});
+
+		path.on('mouseover', function() {
+			this.setFill('red');
+			layer.draw();
+		});
+
+		path.on('mouseout', function() {
+			this.setFill('none');
+			layer.draw();
+		});
+
+		layer.add(path);
+        stage.add(layer);
+
+    },	
+	'SHAPE - Tiger (RAWR!)': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 1024,
+            height: 480, 
+            scale: 0.25,
+            x: 50,
+            y: 50
+        });
+        var layer = new Kinetic.Layer();
+		var group = new Kinetic.Group();
+		
+		for (var i=0; i < tiger.length; i++)
+		{
+			var path = new Kinetic.Path(tiger[i]);
+			group.add(path);
+		}
+		
+		group.draggable(true);
+		layer.add(group);
+        stage.add(layer);
+
+    },	
     'SHAPE - add shape with custom attr pointing to self': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,