diff --git a/src/Factory.js b/src/Factory.js index 7f67cb2d..979fa7ac 100644 --- a/src/Factory.js +++ b/src/Factory.js @@ -88,12 +88,6 @@ this.addPointsSetter(constructor, attr); this.addOverloadedGetterSetter(constructor, attr); }, - addRotationGetterSetter: function(constructor, attr, def) { - this.addRotationGetter(constructor, attr, def); - this.addRotationSetter(constructor, attr); - this.addOverloadedGetterSetter(constructor, attr); - this.addOverloadedGetterSetter(constructor, attr + DEG); - }, addColorGetterSetter: function(constructor, attr) { this.addGetter(constructor, attr); this.addSetter(constructor, attr); @@ -182,27 +176,6 @@ }; }; }, - addRotationGetter: function(constructor, attr, def) { - var that = this, - method = GET + Kinetic.Util._capitalize(attr); - - // radians - constructor.prototype[method] = function() { - var val = this.attrs[attr]; - if (val === undefined) { - val = def; - } - return val; - }; - // degrees - constructor.prototype[method + DEG] = function() { - var val = this.attrs[attr]; - if (val === undefined) { - val = def; - } - return Kinetic.Util._radToDeg(val); - }; - }, // setter adders addColorRGBSetter: function(constructor, attr) { @@ -309,20 +282,6 @@ return this; }; }, - addRotationSetter: function(constructor, attr) { - var method = SET + Kinetic.Util._capitalize(attr); - - // radians - constructor.prototype[method] = function(val) { - this._setAttr(attr, val); - return this; - }; - // degrees - constructor.prototype[method + DEG] = function(deg) { - this._setAttr(attr, Kinetic.Util._degToRad(deg)); - return this; - }; - }, addOverloadedGetterSetter: function(constructor, attr) { var that = this, capitalizedAttr = Kinetic.Util._capitalize(attr), diff --git a/src/Node.js b/src/Node.js index a3f6e7d6..f8728747 100644 --- a/src/Node.js +++ b/src/Node.js @@ -842,7 +842,7 @@ } }, /** - * rotate node by an amount in radians relative to its current rotation + * rotate node by an amount in degrees relative to its current rotation * @method * @memberof Kinetic.Node.prototype * @param {Number} theta @@ -852,17 +852,6 @@ this.setRotation(this.getRotation() + theta); return this; }, - /** - * rotate node by an amount in degrees relative to its current rotation - * @method - * @memberof Kinetic.Node.prototype - * @param {Number} deg - * @returns {Kinetic.Node} - */ - rotateDeg: function(deg) { - this.setRotation(this.getRotation() + Kinetic.Util._degToRad(deg)); - return this; - }, /** * move node to the top of its siblings * @method @@ -1121,7 +1110,7 @@ var m = new Kinetic.Transform(), x = this.getX(), y = this.getY(), - rotation = this.getRotation(), + rotation = this.getRotation() * Math.PI / 180, scaleX = this.getScaleX(), scaleY = this.getScaleY(), skewX = this.getSkewX(), @@ -1639,36 +1628,21 @@ * node.id('foo'); */ - Kinetic.Factory.addRotationGetterSetter(Kinetic.Node, 'rotation', 0); + Kinetic.Factory.addGetterSetter(Kinetic.Node, 'rotation', 0); /** - * get/set rotation in radians + * get/set rotation in degrees * @name rotation * @method * @memberof Kinetic.Node.prototype * @param {Number} rotation * @returns {Number} * @example - * // get rotation in radians
+ * // get rotation in degrees
* var rotation = node.rotation();

* - * // set rotation in radians
- * node.rotation(Math.PI / 2); - */ - - /** - * get/set rotation in degrees - * @name rotationDeg - * @method - * @memberof Kinetic.Node.prototype - * @param {Number} rotationDeg - * @returns {Number} - * @example - * // get rotation in degrees
- * var rotationDeg = node.rotationDeg();

- * * // set rotation in degrees
- * node.rotationDeg(45); + * node.rotation(45); */ Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'scale', 1); diff --git a/src/Shape.js b/src/Shape.js index d7411e9b..2bc8bd69 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -1404,7 +1404,7 @@ * @returns {Number} */ - Kinetic.Factory.addRotationGetterSetter(Kinetic.Shape, 'fillPatternRotation', 0); + Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternRotation', 0); /** * set fill pattern rotation in radians diff --git a/src/shapes/Arc.js b/src/shapes/Arc.js index bae4d6f4..ae3b35db 100644 --- a/src/shapes/Arc.js +++ b/src/shapes/Arc.js @@ -35,9 +35,12 @@ this.sceneFunc(this._sceneFunc); }, _sceneFunc: function(context) { + var angle = this.angle() * Math.PI / 180, + clockwise = this.clockwise(); + 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.arc(0, 0, this.getOuterRadius(), 0, angle, clockwise); + context.arc(0, 0, this.getInnerRadius(), angle, 0, !clockwise); context.closePath(); context.fillStrokeShape(this); } @@ -45,96 +48,74 @@ Kinetic.Util.extend(Kinetic.Arc, Kinetic.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Arc, 'innerRadius', function() { - return 0; - }); + Kinetic.Factory.addGetterSetter(Kinetic.Arc, 'innerRadius', 0); /** - * set innerRadius - * @name setInnerRadius + * get/set innerRadius + * @name innerRadius * @method * @memberof Kinetic.Arc.prototype * @param {Number} innerRadius - */ - - /** - * get innerRadius - * @name getInnerRadius - * @method - * @memberof Kinetic.Arc.prototype * @returns {Number} + * @example + * // get inner radius + * var innerRadius = arc.innerRadius(); + * + * // set inner radius + * arc.innerRadius(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Arc, 'outerRadius', function() { - return 0; - }); + Kinetic.Factory.addGetterSetter(Kinetic.Arc, 'outerRadius', 0); /** - * set outerRadius - * @name setOuterRadius - * @method - * @memberof Kinetic.Arc.prototype - * @param {Number} innerRadius - */ - - /** - * get outerRadius - * @name getOuterRadius + * get/set outerRadius + * @name outerRadius * @method * @memberof Kinetic.Arc.prototype + * @param {Number} outerRadius * @returns {Number} + * @example + * // get outer radius + * var outerRadius = arc.outerRadius(); + * + * // set outer radius + * arc.outerRadius(20); */ - Kinetic.Factory.addRotationGetterSetter(Kinetic.Arc, 'angle', 0); + Kinetic.Factory.addGetterSetter(Kinetic.Arc, 'angle', 0); /** - * set angle - * @name setAngle + * get/set angle in degrees + * @name angle * @method * @memberof Kinetic.Arc.prototype * @param {Number} angle - */ - - /** - * set angle in degrees - * @name setAngleDeg - * @method - * @memberof Kinetic.Arc.prototype - * @param {Number} angleDeg - */ - - /** - * get angle - * @name getAngle - * @method - * @memberof Kinetic.Arc.prototype - * @returns {Number} - */ - - /** - * get angle in degrees - * @name getAngleDeg - * @method - * @memberof Kinetic.Arc.prototype * @returns {Number} + * @example + * // get angle + * var angle = arc.angle(); + * + * // set angle + * arc.angle(20); */ Kinetic.Factory.addGetterSetter(Kinetic.Arc, 'clockwise', false); /** - * set clockwise draw direction. If set to true, the Arc will be drawn clockwise - * If set to false, the Arc will be drawn anti-clockwise. The default is false. - * @name setClockwise + * get/set clockwise flag + * @name clockwise * @method * @memberof Kinetic.Arc.prototype - * @param {Boolean} clockwise - */ - - /** - * get clockwise - * @name getClockwise - * @method - * @memberof Kinetic.Arc.prototype - * @returns {Boolean} + * @param {Number} clockwise + * @returns {Number} + * @example + * // get clockwise flag + * var clockwise = arc.clockwise(); + * + * // draw arc counter-clockwise + * arc.clockwise(false); + * + * // draw arc clockwise + * arc.clockwise(true); */ })(); diff --git a/src/shapes/Wedge.js b/src/shapes/Wedge.js index ccf98d4b..0bacbd60 100644 --- a/src/shapes/Wedge.js +++ b/src/shapes/Wedge.js @@ -34,7 +34,7 @@ }, _sceneFunc: function(context) { context.beginPath(); - context.arc(0, 0, this.getRadius(), 0, this.getAngle(), this.getClockwise()); + context.arc(0, 0, this.getRadius(), 0, this.getAngle() * Math.PI / 180, this.getClockwise()); context.lineTo(0, 0); context.closePath(); context.fillStrokeShape(this); @@ -43,9 +43,7 @@ Kinetic.Util.extend(Kinetic.Wedge, Kinetic.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Wedge, 'radius', function() { - return 0; - }); + Kinetic.Factory.addGetterSetter(Kinetic.Wedge, 'radius', 0); /** * set radius @@ -63,7 +61,7 @@ * @returns {Number} */ - Kinetic.Factory.addRotationGetterSetter(Kinetic.Wedge, 'angle', 0); + Kinetic.Factory.addGetterSetter(Kinetic.Wedge, 'angle', 0); /** * set angle diff --git a/test/unit/Node-test.js b/test/unit/Node-test.js index 777ce40a..214835bb 100644 --- a/test/unit/Node-test.js +++ b/test/unit/Node-test.js @@ -712,14 +712,14 @@ suite('Node', function() { fill: 'green', stroke: 'black', strokeWidth: 4, - rotationDeg: 10 + rotation: 10 }); - assert.equal(rect.getRotationDeg(), 10); - rect.setRotationDeg(20); - assert.equal(rect.getRotationDeg(), 20); - rect.rotateDeg(20); - assert.equal(rect.getRotationDeg(), 40); + assert.equal(rect.rotation(), 10); + rect.rotation(20); + assert.equal(rect.rotation(), 20); + rect.rotate(20); + assert.equal(rect.rotation(), 40); layer.add(rect); stage.add(layer); @@ -774,14 +774,14 @@ suite('Node', function() { x: 0.5, y: 0.5 }, - rotation: 20 * Math.PI / 180 + rotation: 20 }); assert.equal(rect.getPosition().x, 200); assert.equal(rect.getPosition().y, 100); assert.equal(rect.getScale().x, 0.5); assert.equal(rect.getScale().y, 0.5); - assert.equal(rect.getRotation(), 20 * Math.PI / 180); + assert.equal(rect.getRotation(), 20); rect.setScale({x:2, y:0.3}); assert.equal(rect.getScale().x, 2); @@ -1160,14 +1160,14 @@ suite('Node', function() { fill: 'green', stroke: 'black', strokeWidth: 4, - rotationDeg: 10 + rotation: 10 }); - assert.equal(rect.getRotationDeg(), 10); - rect.setRotationDeg(20); - assert.equal(rect.getRotationDeg(), 20); - rect.rotateDeg(20); - assert.equal(rect.getRotationDeg(), 40); + assert.equal(rect.rotation(), 10); + rect.rotation(20); + assert.equal(rect.rotation(), 20); + rect.rotate(20); + assert.equal(rect.rotation(), 40); layer.add(rect); stage.add(layer); @@ -1513,7 +1513,7 @@ suite('Node', function() { //console.log(rect.getAbsoluteTransform().getTranslation()) - stage.rotate(Math.PI / 3); + stage.rotate(180 / 3); stage.setScale({x:0.5, y:0.5}); stage.draw(); @@ -1568,7 +1568,7 @@ suite('Node', function() { var group = new Kinetic.Group({ name: 'groupName', id: 'groupId', - rotationDeg: 45, + rotation: 45, center: {x:side / 2, y:side / 2}, x: diagonal / 2, y: diagonal / 2 @@ -1895,7 +1895,7 @@ suite('Node', function() { }); var group = new Kinetic.Group({ x: 100, - rotationDeg: 90 + rotation: 90 }); var rect = new Kinetic.Rect({ @@ -2843,9 +2843,6 @@ suite('Node', function() { circle.rotation(2); assert.equal(circle.rotation(), 2); - circle.rotationDeg(3); - assert.equal(Math.round(circle.rotationDeg()), 3); - circle.scale({x: 2, y: 2}); assert.equal(circle.scale().x, 2); assert.equal(circle.scale().y, 2); @@ -3074,7 +3071,7 @@ suite('Node', function() { x: 100, y: 100, draggable: true, - rotationDeg: 20, + rotation: 20, scaleX: 2, scaleY: 2 }); diff --git a/test/unit/Shape-test.js b/test/unit/Shape-test.js index e230122b..e4149616 100644 --- a/test/unit/Shape-test.js +++ b/test/unit/Shape-test.js @@ -193,7 +193,7 @@ suite('Shape', function() { fillPatternY: -30, fillPatternScale: {x: 0.5, y:0.5}, fillPatternOffset: {x: 219, y: 150}, - fillPatternRotation: Math.PI * 0.5, + fillPatternRotation: 90, fillPatternRepeat: 'no-repeat', stroke: 'blue', @@ -217,11 +217,11 @@ suite('Shape', function() { assert.equal(star.getFillPatternScale().y, 0.5, 'star fill scale y should be 0.5'); assert.equal(star.getFillPatternOffset().x, 219, 'star fill offset x should be 219'); assert.equal(star.getFillPatternOffset().y, 150, 'star fill offset y should be 150'); - assert.equal(star.getFillPatternRotation(), Math.PI * 0.5, 'star fill rotation should be Math.PI * 0.5'); + assert.equal(star.getFillPatternRotation(), 90, 'star fill rotation should be 90'); - star.setFillPatternRotationDeg(180); + star.setFillPatternRotation(180); - assert.equal(star.getFillPatternRotation(), Math.PI, 'star fill rotation should be Math.PI'); + assert.equal(star.getFillPatternRotation(), 180, 'star fill rotation should be 180'); star.setFillPatternScale({x:1, y:1}); diff --git a/test/unit/shapes/Arc-test.js b/test/unit/shapes/Arc-test.js index a237a96d..0ba27de2 100644 --- a/test/unit/shapes/Arc-test.js +++ b/test/unit/shapes/Arc-test.js @@ -1,4 +1,4 @@ -suite('AnnularSection', function() { +suite('Arc', function() { // ====================================================== test('add arc', function() { var stage = addStage(); @@ -8,7 +8,7 @@ suite('AnnularSection', function() { y: 100, innerRadius: 50, outerRadius: 80, - angle: Math.PI * 0.4, + angle: 90, fill: 'green', stroke: 'black', strokeWidth: 4, @@ -23,30 +23,7 @@ suite('AnnularSection', function() { 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();'); + assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,80,0,1.571,false);arc(0,0,50,1.571,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 arc = new Kinetic.Arc({ - x: 100, - y: 100, - innerRadius: 50, - outerRadius: 80, - angleDeg: 90, - fill: 'green', - stroke: 'black', - strokeWidth: 4, - name: 'myArc', - draggable: true, - lineJoin: 'round' - }); - - layer.add(arc); - stage.add(layer); - - assert.equal(arc.getAngle(), Math.PI / 2); - }); }); \ No newline at end of file diff --git a/test/unit/shapes/Wedge-test.js b/test/unit/shapes/Wedge-test.js index cc094b54..9991e384 100644 --- a/test/unit/shapes/Wedge-test.js +++ b/test/unit/shapes/Wedge-test.js @@ -7,7 +7,7 @@ suite('Wedge', function() { x: 100, y: 100, radius: 70, - angle: Math.PI * 0.4, + angle: 180 * 0.4, fill: 'green', stroke: 'black', strokeWidth: 4, @@ -25,26 +25,4 @@ suite('Wedge', function() { assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,1.257,false);lineTo(0,0);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'); }); - // ====================================================== - test('set wedge angle using degrees', function() { - var stage = addStage(); - var layer = new Kinetic.Layer(); - var wedge = new Kinetic.Wedge({ - x: 100, - y: 100, - radius: 70, - angleDeg: 90, - fill: 'green', - stroke: 'black', - strokeWidth: 4, - name: 'myCircle', - draggable: true, - lineJoin: 'round' - }); - - layer.add(wedge); - stage.add(layer); - - assert.equal(wedge.getAngle(), Math.PI / 2); - }); }); \ No newline at end of file