Added Ring Shape

Ring shape—circle with hollow center.

Gruntfile.js

@@ -20,6 +20,7 @@ module.exports = function(grunt) {
     'src/shapes/Rect.js', 
     'src/shapes/Circle.js', 
     'src/shapes/Ellipse.js',
+    'src/shapes/Ring.js',
     'src/shapes/Wedge.js', 
     'src/shapes/Arc.js',
     'src/shapes/Image.js', 

src/shapes/Ring.js

@@ -0,0 +1,105 @@
+(function() {
+    // the 0.0001 offset fixes a bug in Chrome 27
+    var PIx2 = (Math.PI * 2) - 0.0001;
+    
+    /**
+     * Ring constructor
+     * @constructor
+     * @augments Kinetic.Shape
+     * @param {Object} config
+     * @param {Number} config.angle
+     * @param {Number} config.angleDeg angle in degrees
+     * @param {Number} config.innerRadius
+     * @param {Number} config.outerRadius
+     * @param {Boolean} [config.clockwise]
+     * @@shapeParams
+     * @@nodeParams
+     * @example
+     * var Ring = new Kinetic.Ring({<br>
+     *   innerRadius: 40,<br>
+     *   outerRadius: 80,<br>
+     *   fill: 'red',<br>
+     *   stroke: 'black',<br>
+     *   strokeWidth: 5<br>
+     * });
+     */
+    Kinetic.Ring = function(config) {
+        this.___init(config);
+    };
+
+    Kinetic.Ring.prototype = {
+        ___init: function(config) {
+            // call super constructor
+            Kinetic.Shape.call(this, config);
+            this.className = 'Ring';
+        },
+        drawFunc: function(context) {
+            context.beginPath();
+            context.arc(0, 0, this.getInnerRadius(), 0, PIx2, false);
+            context.moveTo(this.getOuterRadius(), 0);
+            context.arc(0, 0, this.getOuterRadius(), PIx2, 0, true);
+            context.closePath();
+            context.fillStrokeShape(this);
+        },
+        // implements Shape.prototype.getWidth()
+        getWidth: function() {
+            return this.getOuterRadius() * 2;
+        },
+        // implements Shape.prototype.getHeight()
+        getHeight: function() {
+            return this.getOuterRadius() * 2;
+        },
+        // implements Shape.prototype.setWidth()
+        setWidth: function(width) {
+            Kinetic.Node.prototype.setWidth.call(this, width);
+            this.setOuterRadius(width / 2);
+        },
+        // implements Shape.prototype.setHeight()
+        setHeight: function(height) {
+            Kinetic.Node.prototype.setHeight.call(this, height);
+            this.setOuterRadius(height / 2);
+        }
+    };
+    Kinetic.Util.extend(Kinetic.Ring, Kinetic.Shape);
+
+    // add getters setters
+    Kinetic.Factory.addGetterSetter(Kinetic.Ring, 'innerRadius', function() {
+        return 0;
+    });
+
+    /**
+     * set innerRadius
+     * @name setInnerRadius
+     * @method
+     * @memberof Kinetic.Ring.prototype
+     * @param {Number} innerRadius
+     */
+
+     /**
+     * get innerRadius
+     * @name getInnerRadius
+     * @method
+     * @memberof Kinetic.Ring.prototype
+     * @returns {Number}
+     */
+     
+    Kinetic.Factory.addGetterSetter(Kinetic.Ring, 'outerRadius', function() {
+        return 0;
+    });
+
+    /**
+     * set outerRadius
+     * @name setOuterRadius
+     * @method
+     * @memberof Kinetic.Ring.prototype
+     * @param {Number} innerRadius
+     */
+
+     /**
+     * get outerRadius
+     * @name getOuterRadius
+     * @method
+     * @memberof Kinetic.Ring.prototype
+     * @returns {Number}
+     */
+})();

test/runner.html

@@ -64,6 +64,7 @@
     <script src="unit/shapes/Sprite-test.js"></script>
     <script src="unit/shapes/Wedge-test.js"></script>
     <script src="unit/shapes/Arc-test.js"></script>
+    <script src="unit/shapes/Ring-test.js"></script>
 
     <!-- extensions -->
     <script src="unit/Animation-test.js"></script>

test/unit/shapes/Ring-test.js

@@ -0,0 +1,23 @@
+suite('Ring', function() {
+
+  // ======================================================
+  test('add ring', function() {
+      var stage = addStage();
+      var layer = new Kinetic.Layer();
+      var ring = new Kinetic.Ring({
+          x: stage.getWidth() / 2,
+          y: stage.getHeight() / 2,
+          innerRadius: 50,
+          outerRadius: 90,
+          fill: 'green',
+          stroke: 'black',
+          strokeWidth: 4
+      });
+      layer.add(ring);
+      stage.add(layer);
+      assert.equal(ring.getClassName(), 'Ring');
+
+      var trace = layer.getContext().getTrace();
+      assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,50,0,6.283,false);moveTo(90,0);arc(0,0,90,6.283,0,true);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
+   });
+});