Fix #785: Cache in scaled scaled canvas was scaled twice.

src/Container.js

@@ -287,7 +287,7 @@
                 clipY = this.getClipY();
 
                 context.save();
-                context._applyTransform(this);
+                context._applyTransform(this, canvas.isCache);
                 context.beginPath();
                 context.rect(clipX, clipY, clipWidth, clipHeight);
                 context.clip();

src/Context.js

@@ -211,10 +211,15 @@
                 this.setAttr('lineCap', lineCap);
             }
         },
-        _applyOpacity: function(shape) {
-            var absOpacity = shape.getAbsoluteOpacity();
-            if(absOpacity !== 1) {
-                this.setAttr('globalAlpha', absOpacity);
+        _applyOpacity: function(shape, isCacheCanvas) {
+            var opacity;
+            if (isCacheCanvas) {
+                opacity = shape.getRelativeOpacity();
+            } else {
+                opacity = shape.getAbsoluteOpacity();
+            }
+            if(opacity !== 1) {
+                this.setAttr('globalAlpha', opacity);
             }
         },
         _applyLineJoin: function(shape) {
@@ -223,12 +228,16 @@
                 this.setAttr('lineJoin', lineJoin);
             }
         },
-        _applyTransform: function(shape) {
+        _applyTransform: function(shape, isCacheCanvas) {
             var transformsEnabled = shape.getTransformsEnabled(),
                 m;
 
             if (transformsEnabled === 'all') {
-                m = shape.getAbsoluteTransform().getMatrix();
+                if (isCacheCanvas) {
+                    m = shape.getRelativeTransform().getMatrix();
+                } else {
+                    m = shape.getAbsoluteTransform().getMatrix();
+                }
                 this.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
             }
             else if (transformsEnabled === 'position') {

src/Node.js

@@ -1,7 +1,9 @@
 (function() {
     // CONSTANTS
     var ABSOLUTE_OPACITY = 'absoluteOpacity',
+        RELATIVE_OPACITY = 'relativeOpacity',
         ABSOLUTE_TRANSFORM = 'absoluteTransform',
+        RELATIVE_TRANSFORM = 'relativeTransform',
         BEFORE = 'before',
         CHANGE = 'Change',
         CHILDREN = 'children',
@@ -50,6 +52,7 @@
             this.on(TRANSFORM_CHANGE_STR, function() {
                 this._clearCache(TRANSFORM);
                 that._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+                that._clearSelfAndDescendantCache(RELATIVE_TRANSFORM);
             });
             this.on('visibleChange.kinetic', function() {
                 that._clearSelfAndDescendantCache(VISIBLE);
@@ -59,6 +62,7 @@
             });
             this.on('opacityChange.kinetic', function() {
                 that._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
+                that._clearSelfAndDescendantCache(RELATIVE_OPACITY);
             });
         },
         _clearCache: function(attr){
@@ -103,6 +107,7 @@
         clearCache: function() {
             delete this._cache.canvas;
             this._filterUpToDate = false;
+            this.cacheBegin = false;
             return this;
         },
         /**
@@ -170,6 +175,10 @@
 
             this.clearCache();
 
+            cachedSceneCanvas.isCache = true;
+            cachedHitCanvas.isCache = true;
+            this.cacheBegin = true;
+
             this.transformsEnabled('position');
             this.x(x * -1);
             this.y(y * -1);
@@ -205,7 +214,8 @@
         },
         _drawCachedSceneCanvas: function(context) {
             context.save();
-            context._applyTransform(this);
+            context._applyTransform(this, context.canvas.isCache);
+            context._applyOpacity(this, context.canvas.isCache);
             context.drawImage(this._getCachedSceneCanvas()._canvas, 0, 0);
             context.restore();
         },
@@ -251,7 +261,7 @@
                 hitCanvas = cachedCanvas.hit;
 
             context.save();
-            context._applyTransform(this);
+            context._applyTransform(this, context.canvas.isCache);
             context.drawImage(hitCanvas._canvas, 0, 0); 
             context.restore(); 
         },
@@ -401,9 +411,11 @@
             // traversal must be cleared when removing a node
             this._clearSelfAndDescendantCache(STAGE);
             this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+            this._clearSelfAndDescendantCache(RELATIVE_TRANSFORM);
             this._clearSelfAndDescendantCache(VISIBLE);
             this._clearSelfAndDescendantCache(LISTENING);
             this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
+            this._clearSelfAndDescendantCache(RELATIVE_OPACITY);
 
             return this;
         },
@@ -753,6 +765,7 @@
 
             this._clearCache(TRANSFORM);
             this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+            this._clearSelfAndDescendantCache(RELATIVE_TRANSFORM);
         },
         _clearTransform: function() {
             var trans = {
@@ -779,6 +792,7 @@
 
             this._clearCache(TRANSFORM);
             this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+            this._clearSelfAndDescendantCache(RELATIVE_TRANSFORM);
 
             // return original transform
             return trans;
@@ -815,7 +829,7 @@
             this.setPosition({x:x, y:y});
             return this;
         },
-        _eachAncestorReverse: function(func, includeSelf) {
+        _eachAncestorReverse: function(func, includeSelf, stopAtCacheBegin) {
             var family = [],
                 parent = this.getParent(),
                 len, n;
@@ -824,7 +838,7 @@
             if(includeSelf) {
                 family.unshift(this);
             }
-            while(parent) {
+            while(parent && (!stopAtCacheBegin || !parent.cacheBegin)) {
                 family.unshift(parent);
                 parent = parent.parent;
             }
@@ -937,6 +951,22 @@
             }
             return absOpacity;
         },
+        /**
+         * get relative opacity
+         * @method
+         * @memberof Kinetic.Node.prototype
+         * @returns {Number}
+         */
+        getRelativeOpacity: function() {
+            return this._getCache(RELATIVE_OPACITY, this._getRelativeOpacity);
+        },
+        _getRelativeOpacity: function() {
+            var opacity = 1;
+            this._eachAncestorReverse(function(node) {
+                opacity *= node.getOpacity();
+            }, true, true);
+            return opacity;
+        },
         /**
          * move node to another container
          * @method
@@ -1090,6 +1120,36 @@
             }, true);
             return at;
         },
+
+        /**
+         * get relative transform of the node which takes into
+         *  account its ancestor transforms
+         * @method
+         * @memberof Kinetic.Node.prototype
+         * @returns {Kinetic.Transform}
+         */
+        getRelativeTransform: function() {
+            return this._getCache(RELATIVE_TRANSFORM, this._getRelativeTransform);
+        },
+        _getRelativeTransform: function() {
+            var at = new Kinetic.Transform(),
+                transformsEnabled, trans;
+
+            // start with stage and traverse downwards to self
+            this._eachAncestorReverse(function(node) {
+                transformsEnabled = node.transformsEnabled();
+                trans = node.getTransform();
+
+                if (transformsEnabled === 'all') {
+                    at.multiply(trans);
+                }
+                else if (transformsEnabled === 'position') {
+                    at.translate(node.x(), node.y());
+                }
+            }, true, true);
+            return at;
+        },
+
         /**
          * get transform of the node
          * @method

src/Shape.js

@@ -154,7 +154,7 @@
                         bufferContext.clear();
                         bufferContext.save();
                         bufferContext._applyLineJoin(this);
-                        bufferContext._applyTransform(this);
+                        bufferContext._applyTransform(this, canvas.isCache);
 
                         drawFunc.call(this, bufferContext);
                         bufferContext.restore();
@@ -166,13 +166,13 @@
                             context.restore();
                         }
 
-                        context._applyOpacity(this);
+                        context._applyOpacity(this, canvas.isCache);
                         context.drawImage(bufferCanvas._canvas, 0, 0);
                     }
                     // if buffer canvas is not needed
                     else {
                         context._applyLineJoin(this);
-                        context._applyTransform(this);
+                        context._applyTransform(this, canvas.isCache);
 
                         if (hasShadow) {
                             context.save();
@@ -181,7 +181,7 @@
                             context.restore();
                         }   
 
-                        context._applyOpacity(this);
+                        context._applyOpacity(this, canvas.isCache);
                         drawFunc.call(this, context);
                     }   
                     context.restore(); 
@@ -205,7 +205,7 @@
                 else if (drawFunc) {
                     context.save();
                     context._applyLineJoin(this);
-                    context._applyTransform(this);
+                    context._applyTransform(this, canvas.isCache);
 
                     drawFunc.call(this, context);   
                     context.restore();