Fixed cache image scale issue. Close ericdrowell#785.

kzhdev · Jan 30, 2014 · 43f40dd · 43f40dd
1 parent a3cebbb
commit 43f40dd
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 6 deletions.
diff --git a/src/Context.js b/src/Context.js
@@ -236,6 +236,19 @@
                 this.translate(shape.getX(), shape.getY());
             }  
         },
+        _applyCacheTransform: function(shape) {
+            var transformsEnabled = shape.getTransformsEnabled(),
+                m;
+
+            if (transformsEnabled === 'all') {
+                m = shape.getAbsoluteCacheTransform().getMatrix();
+                this.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+            }
+            else if (transformsEnabled === 'position') {
+                // best performance for position only transforms
+                this.translate(shape.getX(), shape.getY());
+            }
+        },
         setAttr: function(attr, val) {
             this._context[attr] = val;
         },

diff --git a/src/Node.js b/src/Node.js
@@ -2,6 +2,7 @@
     // CONSTANTS
     var ABSOLUTE_OPACITY = 'absoluteOpacity',
         ABSOLUTE_TRANSFORM = 'absoluteTransform',
+        ABSOLUTE_CACHE_TRANSFORM = 'absoluteCacheTransform',
         BEFORE = 'before',
         CHANGE = 'Change',
         CHILDREN = 'children',
@@ -50,6 +51,7 @@
             this.on(TRANSFORM_CHANGE_STR, function() {
                 this._clearCache(TRANSFORM);
                 that._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+                that._clearSelfAndDescendantCache(ABSOLUTE_CACHE_TRANSFORM);
             });
             this.on('visibleChange.kinetic', function() {
                 that._clearSelfAndDescendantCache(VISIBLE);
@@ -168,6 +170,7 @@
                 origY = this.y(),
                 sceneContext;
 
+            cachedSceneCanvas.isCache = true;
             cachedHitCanvas.isCache = true;
 
             this.clearCache();
@@ -403,6 +406,7 @@
             // traversal must be cleared when removing a node
             this._clearSelfAndDescendantCache(STAGE);
             this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+            this._clearSelfAndDescendantCache(ABSOLUTE_CACHE_TRANSFORM);
             this._clearSelfAndDescendantCache(VISIBLE);
             this._clearSelfAndDescendantCache(LISTENING);
             this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
@@ -756,6 +760,7 @@
 
             this._clearCache(TRANSFORM);
             this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+            this._clearSelfAndDescendantCache(ABSOLUTE_CACHE_TRANSFORM);
         },
         _clearTransform: function() {
             var trans = {
@@ -782,6 +787,7 @@
 
             this._clearCache(TRANSFORM);
             this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+            this._clearSelfAndDescendantCache(ABSOLUTE_CACHE_TRANSFORM);
 
             // return original transform
             return trans;
@@ -1097,6 +1103,39 @@
             }, true);
             return at;
         },
+        /**
+         * get absolute transform in of the node in cache canvas which takes into
+         *  account its ancestor transforms, but ignore scale
+         * @method
+         * @memberof Kinetic.Node.prototype
+         * @returns {Kinetic.Transform}
+         */
+        getAbsoluteCacheTransform: function() {
+            return this._getCache(ABSOLUTE_CACHE_TRANSFORM, this._getAbsoluteCacheTransform);
+        },
+        _getAbsoluteCacheTransform: function() {
+            var at = new Kinetic.Transform(),
+                transformsEnabled, trans,
+                cacheTrans = new Kinetic.Transform();
+
+            // start with stage and traverse downwards to self
+            this._eachAncestorReverse(function(node) {
+                transformsEnabled = node.transformsEnabled();
+                trans = node.getTransform();
+                // make copy
+                cacheTrans.m = trans.m.slice(0);
+                // set scale to 1
+                cacheTrans.m[0] = cacheTrans.m[3] = 1;
+
+                if (transformsEnabled === 'all') {
+                    at.multiply(cacheTrans);
+                }
+                else if (transformsEnabled === 'position') {
+                    at.translate(node.x(), node.y());
+                }
+            }, true);
+            return at;
+        },
         /**
          * get transform of the node
          * @method

diff --git a/src/Shape.js b/src/Shape.js
@@ -172,8 +172,14 @@
                     // if buffer canvas is not needed
                     else {
                         context._applyLineJoin(this);
-                        context._applyTransform(this);
-
+
+                        if (canvas.isCache) {
+                            context._applyCacheTransform(this);
+                            this.strokeScaleEnabled(false);
+                        } else {
+                            context._applyTransform(this);
+                        }
+
                         if (hasShadow) {
                             context.save();
                             context._applyShadow(this);
@@ -205,12 +211,15 @@
                 else if (drawFunc) {
                     context.save();
                     context._applyLineJoin(this);
-                    context._applyTransform(this);
-
-                    drawFunc.call(this, context);   
+                    if (canvas.isCache) {
+                        context._applyCacheTransform(this);
+                    } else {
+                        context._applyTransform(this);
+                    }
+
+                    drawFunc.call(this, context);
                     context.restore();
                 }
-
             }
 
             return this;