Added Shape AnnularSection

AnnularSection is a section of an annulus (ring)
http://en.wikipedia.org/wiki/Annulus_%28mathematics%29

Gruntfile.js

@@ -21,6 +21,7 @@ module.exports = function(grunt) {
     'src/shapes/Circle.js', 
     'src/shapes/Ellipse.js',
     'src/shapes/Wedge.js', 
+    'src/shapes/AnnularSection.js',
     'src/shapes/Image.js', 
     'src/shapes/Text.js', 
     'src/shapes/Line.js', 

src/shapes/AnnularSection.js

@@ -0,0 +1,139 @@
+(function() {
+    /**
+     * AnnularSection 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
+     * // draw a AnnularSection that's pointing downwards<br>
+     * var AnnularSection = new Kinetic.AnnularSection({<br>
+     *   innerRadius: 40,<br>
+     *   outerRadius: 80,<br>
+     *   fill: 'red',<br>
+     *   stroke: 'black'<br>
+     *   strokeWidth: 5,<br>
+     *   angleDeg: 60,<br>
+     *   rotationDeg: -120<br>
+     * });
+     */
+    Kinetic.AnnularSection = function(config) {
+        this.___init(config);
+    };
+
+    Kinetic.AnnularSection.prototype = {
+        ___init: function(config) {
+            // call super constructor
+            Kinetic.Shape.call(this, config);
+            this.className = 'AnnularSection';
+        },
+        drawFunc: function(context) {
+            context.beginPath();
+            context.arc(0, 0, this.getOuterRadius(), 0, this.getAngle(), this.getClockwise());
+            context.arc(0, 0, this.getInnerRadius(), this.getAngle(), 0, !this.getClockwise());
+            context.closePath();
+            context.fillStrokeShape(this);
+        }
+    };
+    Kinetic.Util.extend(Kinetic.AnnularSection, Kinetic.Shape);
+
+    // add getters setters
+    Kinetic.Factory.addGetterSetter(Kinetic.AnnularSection, 'innerRadius', function() {
+        return 0;
+    });
+
+    /**
+     * set innerRadius
+     * @name setInnerRadius
+     * @method
+     * @memberof Kinetic.AnnularSection.prototype
+     * @param {Number} innerRadius
+     */
+
+     /**
+     * get innerRadius
+     * @name getInnerRadius
+     * @method
+     * @memberof Kinetic.AnnularSection.prototype
+     * @returns {Number}
+     */
+     
+    Kinetic.Factory.addGetterSetter(Kinetic.AnnularSection, 'outerRadius', function() {
+        return 0;
+    });
+
+    /**
+     * set outerRadius
+     * @name setOuterRadius
+     * @method
+     * @memberof Kinetic.AnnularSection.prototype
+     * @param {Number} innerRadius
+     */
+
+     /**
+     * get outerRadius
+     * @name getOuterRadius
+     * @method
+     * @memberof Kinetic.AnnularSection.prototype
+     * @returns {Number}
+     */
+
+    Kinetic.Factory.addRotationGetterSetter(Kinetic.AnnularSection, 'angle', 0);
+
+    /**
+     * set angle
+     * @name setAngle
+     * @method
+     * @memberof Kinetic.AnnularSection.prototype
+     * @param {Number} angle
+     */
+
+     /**
+     * set angle in degrees
+     * @name setAngleDeg
+     * @method
+     * @memberof Kinetic.AnnularSection.prototype
+     * @param {Number} angleDeg
+     */
+
+     /**
+     * get angle
+     * @name getAngle
+     * @method
+     * @memberof Kinetic.AnnularSection.prototype
+     * @returns {Number}
+     */
+
+     /**
+     * get angle in degrees
+     * @name getAngleDeg
+     * @method
+     * @memberof Kinetic.AnnularSection.prototype
+     * @returns {Number}
+     */
+
+    Kinetic.Factory.addGetterSetter(Kinetic.AnnularSection, 'clockwise', false);
+
+    /**
+     * set clockwise draw direction.  If set to true, the AnnularSection will be drawn clockwise
+     *  If set to false, the AnnularSection will be drawn anti-clockwise.  The default is false.
+     * @name setClockwise
+     * @method
+     * @memberof Kinetic.AnnularSection.prototype
+     * @param {Boolean} clockwise
+     */
+
+    /**
+     * get clockwise
+     * @name getClockwise
+     * @method
+     * @memberof Kinetic.AnnularSection.prototype
+     * @returns {Boolean}
+     */
+})();

test/runner.html

@@ -63,6 +63,7 @@
     <script src="unit/shapes/Spline-test.js"></script>
     <script src="unit/shapes/Sprite-test.js"></script>
     <script src="unit/shapes/Wedge-test.js"></script>
+    <script src="unit/shapes/AnnularSection-test.js"></script>
 
     <!-- extensions -->
     <script src="unit/Animation-test.js"></script>

test/unit/shapes/AnnularSection-test.js

@@ -0,0 +1,52 @@
+suite('AnnularSection', function() {
+    // ======================================================
+    test('add annular section', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var annularsection = new Kinetic.AnnularSection({
+            x: 100,
+            y: 100,
+            innerRadius: 50,
+            outerRadius: 80,
+            angle: Math.PI * 0.4,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'myAnnularSection',
+            draggable: true
+        });
+
+        layer.add(annularsection);
+        stage.add(layer);
+
+        assert.equal(annularsection.getClassName(), 'AnnularSection');
+
+        var trace = layer.getContext().getTrace();
+        //console.log(trace);
+        assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,80,0,1.257,false);arc(0,0,50,1.257,0,true);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
+    });
+
+    // ======================================================
+    test('set annular section angle using degrees', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var annularsection = new Kinetic.AnnularSection({
+            x: 100,
+            y: 100,
+            innerRadius: 50,
+            outerRadius: 80,
+            angleDeg: 90,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'myAnnularSection',
+            draggable: true,
+            lineJoin: 'round'
+        });
+
+        layer.add(annularsection);
+        stage.add(layer);
+
+        assert.equal(annularsection.getAngle(), Math.PI / 2);
+    });
+});