added skew transform courtesy of danielkur #188

src/Node.js

@@ -660,12 +660,12 @@
                 x = this.getX(), 
                 y = this.getY(), 
                 rotation = this.getRotation(),
-                scale = this.getScale(), 
+                scaleX = this.getScaleX(), 
-                scaleX = scale.x, 
+                scaleY = this.getScaleY(), 
-                scaleY = scale.y, 
+                skewX = this.getSkewX(), 
-                offset = this.getOffset(), 
+                skewY = this.getSkewY(), 
-                offsetX = offset.x, 
+                offsetX = this.getOffsetX(), 
-                offsetY = offset.y;
+                offsetY = this.getOffsetY();
                 
             if(x !== 0 || y !== 0) {
                 m.translate(x, y);
@@ -673,6 +673,9 @@
             if(rotation !== 0) {
                 m.rotate(rotation);
             }
+            if(skewX !== 0 || skewY !== 0) {
+                m.skew(skewX, skewY);
+            }
             if(scaleX !== 1 || scaleY !== 1) {
                 m.scale(scaleX, scaleY);
             }
@@ -859,33 +862,27 @@
             }
         },
         _clearTransform: function() {
-            var scale = this.getScale(), 
+            var trans = {
-              offset = this.getOffset(),
+                x: this.getX(),
-              trans = {
+                y: this.getY(),
-                  x: this.getX(),
+                rotation: this.getRotation(),
-                  y: this.getY(),
+                scaleX: this.getScaleX(),
-                  rotation: this.getRotation(),
+                scaleY: this.getScaleY(),
-                  scale: {
+                offsetX: this.getOffsetX(),
-                      x: scale.x,
+                offsetY: this.getOffsetY(),
-                      y: scale.y
+                skewX: this.getSkewX(),
-                  },
+                skewY: this.getSkewY()
-                  offset: {
+            };
-                      x: offset.x,
-                      y: offset.y
-                  }
-              };
 
             this.attrs.x = 0;
             this.attrs.y = 0;
             this.attrs.rotation = 0;
-            this.attrs.scale = {
+            this.attrs.scaleX = 1;
-                x: 1,
+            this.attrs.scaleY = 1;
-                y: 1
+            this.attrs.offsetX = 1;
-            };
+            this.attrs.offsetY = 1;
-            this.attrs.offset = {
+            this.attrs.skewX = 0;
-                x: 0,
+            this.attrs.skewY = 0;
-                y: 0
-            };
 
             return trans;
         },
@@ -1210,8 +1207,6 @@
     };
     // add getters setters
     Kinetic.Node.addGetterSetter(Kinetic.Node, 'x', 0, true);
-    Kinetic.Node.addGetterSetter(Kinetic.Node, 'y', 0, true);
-    Kinetic.Node.addGetterSetter(Kinetic.Node, 'opacity', 1);
 
     /**
      * set x position
@@ -1220,6 +1215,14 @@
      * @param {Number} x
      */
 
+    /**
+     * get x position
+     * @name getX
+     * @methodOf Kinetic.Node.prototype
+     */
+
+    Kinetic.Node.addGetterSetter(Kinetic.Node, 'y', 0, true);
+
     /**
      * set y position
      * @name setY
@@ -1227,6 +1230,14 @@
      * @param {Number} y
      */
 
+    /**
+     * get y position
+     * @name getY
+     * @methodOf Kinetic.Node.prototype
+     */
+
+    Kinetic.Node.addGetterSetter(Kinetic.Node, 'opacity', 1);
+
     /**
      * set opacity.  Opacity values range from 0 to 1.
      *  A node with an opacity of 0 is fully transparent, and a node
@@ -1236,18 +1247,6 @@
      * @param {Object} opacity
      */
 
-    /**
-     * get x position
-     * @name getX
-     * @methodOf Kinetic.Node.prototype
-     */
-
-    /**
-     * get y position
-     * @name getY
-     * @methodOf Kinetic.Node.prototype
-     */
-
     /**
      * get opacity.
      * @name getOpacity
@@ -1255,14 +1254,15 @@
      */
 
     Kinetic.Node.addGetter(Kinetic.Node, 'name');
-    Kinetic.Node.addGetter(Kinetic.Node, 'id');
 
-    /**
+     /**
      * get name
      * @name getName
      * @methodOf Kinetic.Node.prototype
      */
 
+    Kinetic.Node.addGetter(Kinetic.Node, 'id');
+
     /**
      * get id
      * @name getId
@@ -1298,7 +1298,6 @@
      */
 
     Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'scale', {x:1,y:1}, true);
-    Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'offset', {x:0,y:0}, true);
 
     /**
      * set scale
@@ -1308,6 +1307,30 @@
      * @methodOf Kinetic.Node.prototype
      */
 
+    /**
+     * get scale
+     * @name getScale
+     * @methodOf Kinetic.Node.prototype
+     */
+
+    Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'skew', {x:0,y:0}, true);
+
+    /**
+     * set skew
+     * @name setSkew
+     * @param {Number} x
+     * @param {Number} y
+     * @methodOf Kinetic.Node.prototype
+     */
+
+    /**
+     * get skew 
+     * @name getSkew
+     * @methodOf Kinetic.Node.prototype
+     */
+
+    Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'offset', {x:0,y:0}, true);
+
     /**
      * set offset.  A node's offset defines the position and rotation point
      * @name setOffset
@@ -1316,12 +1339,6 @@
      * @param {Number} y
      */
 
-    /**
-     * get scale
-     * @name getScale
-     * @methodOf Kinetic.Node.prototype
-     */
-
     /**
      * get offset
      * @name getOffset
@@ -1329,9 +1346,6 @@
      */
 
     Kinetic.Node.addSetter(Kinetic.Node, 'width');
-    Kinetic.Node.addSetter(Kinetic.Node, 'height');
-    Kinetic.Node.addSetter(Kinetic.Node, 'listening');
-    Kinetic.Node.addSetter(Kinetic.Node, 'visible');
 
     /**
      * set width
@@ -1340,6 +1354,8 @@
      * @param {Number} width
      */
 
+    Kinetic.Node.addSetter(Kinetic.Node, 'height');
+
     /**
      * set height
      * @name setHeight
@@ -1347,6 +1363,8 @@
      * @param {Number} height
      */
 
+    Kinetic.Node.addSetter(Kinetic.Node, 'listening');
+
     /**
      * listen or don't listen to events
      * @name setListening
@@ -1354,6 +1372,8 @@
      * @param {Boolean} listening
      */
 
+    Kinetic.Node.addSetter(Kinetic.Node, 'visible');
+
     /**
      * set visible
      * @name setVisible

src/util/Transform.js

@@ -70,6 +70,21 @@
                 y: this.m[5]
             };
         },
+        /**
+         * Apply skew 
+         * @param {Number} sx
+         * @param {Number} sy
+         */
+        skew: function(sx, sy) {
+            var m11 = this.m[0] + this.m[2] * sy;
+            var m12 = this.m[1] + this.m[3] * sy;
+            var m21 = this.m[2] + this.m[0] * sx;
+            var m22 = this.m[3] + this.m[1] * sx;
+            this.m[0] = m11;
+            this.m[1] = m12;
+            this.m[2] = m21;
+            this.m[3] = m22;
+         },
         /**
          * Transform multiplication
          * @param {Kinetic.Transform} matrix

tests/js/unit/nodeTests.js

@@ -600,6 +600,41 @@ Test.Modules.NODE = {
         layer.add(rect);
         stage.add(layer);
     },
+    'skew': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var rect = new Kinetic.Rect({
+            x: 200,
+            y: 100,
+            width: 100,
+            height: 50,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            skewX: 1
+        });
+
+
+        layer.add(rect);
+        stage.add(layer);
+
+        test(rect.getSkewX() === 1, 'rect skewX should be 1');
+        test(rect.getSkewY() === 0, 'rect skewY should be 0');
+
+        /*
+        rect.transitionTo({
+            duration: 4,
+            skewY: -2,
+            easing: 'ease-in-out' 
+
+
+        })
+        */
+    },
     'init with position, scale, rotation, then change scale': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,