diff --git a/Gruntfile.js b/Gruntfile.js index f47ab788..923eb9e4 100644 --- a/Gruntfile.js +++ b/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', diff --git a/src/shapes/AnnularSection.js b/src/shapes/AnnularSection.js new file mode 100644 index 00000000..e939f0de --- /dev/null +++ b/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
+ * var AnnularSection = new Kinetic.AnnularSection({
+ * innerRadius: 40,
+ * outerRadius: 80,
+ * fill: 'red',
+ * stroke: 'black'
+ * strokeWidth: 5,
+ * angleDeg: 60,
+ * rotationDeg: -120
+ * }); + */ + 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} + */ +})(); diff --git a/test/runner.html b/test/runner.html index d263d5b8..53ef47fb 100644 --- a/test/runner.html +++ b/test/runner.html @@ -63,6 +63,7 @@ + diff --git a/test/unit/shapes/AnnularSection-test.js b/test/unit/shapes/AnnularSection-test.js new file mode 100644 index 00000000..abdb4277 --- /dev/null +++ b/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); + }); +}); \ No newline at end of file