removed radian angle attrs. All rotations are set in degrees now

2025-09-18 18:27:58 +08:00 · 2014-01-06 21:37:46 -08:00
parent ceddf561fc
commit 66b65f1c19
9 changed files with 82 additions and 218 deletions
--- 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),
--- 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<br>
+     * // get rotation in degrees<br>
     * var rotation = node.rotation();<br><br>
     *
-     * // set rotation in radians<br>
-     * 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<br>
-     * var rotationDeg = node.rotationDeg();<br><br>
-     *
     * // set rotation in degrees<br>
-     * node.rotationDeg(45);
+     * node.rotation(45);
     */

    Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'scale', 1);
--- 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
--- 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);
     */
 })();
--- 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
--- 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
    });
--- 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});

--- 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);
-    });
 });
--- 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);
-    });
 });