FastLayer now can have transforms. close #56

src/BaseLayer.js

@@ -193,6 +193,13 @@
         },
         setHeight: function() {
             Konva.Util.warn('Can not change height of layer. Use "stage.height(value)" function instead.');
+        },
+        // the apply transform method is handled by the Layer and FastLayer class
+        // because it is up to the layer to decide if an absolute or relative transform
+        // should be used
+        _applyTransform: function(shape, context, top) {
+            var m = shape.getAbsoluteTransform(top).getMatrix();
+            context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
         }
     });
     Konva.Util.extend(Konva.BaseLayer, Konva.Container);

src/FastLayer.js

@@ -57,15 +57,6 @@
 
             return this;
         },
-        // the apply transform method is handled by the Layer and FastLayer class
-        // because it is up to the layer to decide if an absolute or relative transform
-        // should be used
-        _applyTransform: function(shape, context, top) {
-            if (!top || top._id !== this._id) {
-                var m = shape.getTransform().getMatrix();
-                context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
-            }
-        },
         draw: function() {
             this.drawScene();
             return this;

src/Layer.js

@@ -178,13 +178,6 @@
 
             return this;
         },
-        // the apply transform method is handled by the Layer and FastLayer class
-        // because it is up to the layer to decide if an absolute or relative transform
-        // should be used
-        _applyTransform: function(shape, context, top) {
-            var m = shape.getAbsoluteTransform(top).getMatrix();
-            context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
-        },
         drawHit: function(can, top) {
             var layer = this.getLayer(),
                 canvas = can || (layer && layer.hitCanvas);

test/unit/FastLayer-test.js

@@ -21,6 +21,31 @@ suite('FastLayer', function() {
 
     });
 
+    test('transform', function() {
+      var stage = addStage();
+
+      var fastLayer = new Konva.FastLayer({
+        x: stage.width() / 2,
+        y: stage.height() / 2
+      });
+
+      var layer = new Konva.Layer({
+        x: stage.width() / 2,
+        y: stage.height() / 2
+      });
+
+      var circle = new Konva.Circle({
+          radius: 70,
+          fill: 'green'
+      });
+
+      fastLayer.add(circle);
+      layer.add(circle.clone());
+      stage.add(layer, fastLayer);
+
+      compareLayers(fastLayer, layer);
+    });
+
 test('cache shape on fast layer', function(){
     var stage = addStage();
     var layer = new Konva.FastLayer();
@@ -55,4 +80,4 @@ test('cache shape on fast layer', function(){
   });
 
 
-});
+});