Fix poor cache image quality on device with higher pixelRatio. close e…

…ricdrowell#750
kzhdev · Jan 15, 2014 · e7f4554 · e7f4554
1 parent 79f86f2
commit e7f4554
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 12 deletions.
diff --git a/src/Canvas.js b/src/Canvas.js
@@ -34,9 +34,8 @@
         init: function(config) {
             config = config || {};
 
-            var pixelRatio = config.pixelRatio || Kinetic.pixelRatio || _pixelRatio;
+            this.pixelRatio = config.pixelRatio || Kinetic.pixelRatio || _pixelRatio;
 
-            this.pixelRatio = pixelRatio;
             this._canvas = document.createElement('canvas');
 
             // set inline styles
@@ -67,10 +66,10 @@
             return this.pixelRatio;
         },
         /**
-         * get pixel ratio
+         * set pixel ratio
          * @method
          * @memberof Kinetic.Canvas.prototype
-         * @param {Number} pixelRatio KineticJS automatically handles pixel ratio adustments in order to render crisp drawings 
+         * @param {Number} pixelRatio KineticJS automatically handles pixel ratio adjustments in order to render crisp drawings 
          *  on all devices. Most desktops, low end tablets, and low end phones, have device pixel ratios
          *  of 1.  Some high end tablets and phones, like iPhones and iPads (not the mini) have a device pixel ratio 
          *  of 2.  Some Macbook Pros, and iMacs also have a device pixel ratio of 2.  Some high end Android devices have pixel 
@@ -79,7 +78,7 @@
          *  ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1.
          */
         setPixelRatio: function(pixelRatio) {
-            this.pixelRatio = pixelRatio;
+            this.pixelRatio = Kinetic.pixelRatio = pixelRatio;
             this.setSize(this.getWidth(), this.getHeight());
         },
         /**

diff --git a/src/Global.js b/src/Global.js
@@ -30,6 +30,7 @@
  */
 var Kinetic = {};
 (function() {
+
     Kinetic = {
         // public
         version: '@@version',

diff --git a/src/Layer.js b/src/Layer.js
@@ -28,8 +28,8 @@
     Kinetic.Util.addMethods(Kinetic.Layer, {
         ___init: function(config) {
             this.nodeType = 'Layer';
-            this.canvas = new Kinetic.SceneCanvas();
-            this.hitCanvas = new Kinetic.HitCanvas();
+            this.canvas = new Kinetic.SceneCanvas(config);
+            this.hitCanvas = new Kinetic.HitCanvas(config);
             // call super constructor
             Kinetic.Container.call(this, config);
         },

diff --git a/src/Node.js b/src/Node.js
@@ -150,12 +150,12 @@
                 height = conf.height || this.height(),
                 drawBorder = conf.drawBorder || false,
                 cachedSceneCanvas = new Kinetic.SceneCanvas({
-                    pixelRatio: 1,
+                    pixelRatio: Kinetic.pixelRatio,
                     width: width,
                     height: height
                 }),
                 cachedFilterCanvas = new Kinetic.SceneCanvas({
-                    pixelRatio: 1,
+                    pixelRatio: Kinetic.pixelRatio,
                     width: width,
                     height: height
                 }),
@@ -204,9 +204,14 @@
             return this;
         },
         _drawCachedSceneCanvas: function(context) {
+            var cachedScenCanvas = this._getCachedSceneCanvas(),
+                pixelRatio = cachedScenCanvas.getPixelRatio();
             context.save();
             context._applyTransform(this);
-            context.drawImage(this._getCachedSceneCanvas()._canvas, 0, 0);
+            // If canvas pixelRatio not equal to 1, the cached image will be enlarged, 
+            // we need to scale the cached image back to its original size
+            context.drawImage(this._getCachedSceneCanvas()._canvas, 0, 0, cachedScenCanvas.getWidth() / pixelRatio,
+                cachedScenCanvas.getHeight() / pixelRatio);
             context.restore();
         },
         _getCachedSceneCanvas: function() {
@@ -1206,7 +1211,7 @@
                 canvas = new Kinetic.SceneCanvas({
                     width: config.width || this.getWidth() || (stage ? stage.getWidth() : 0),
                     height: config.height || this.getHeight() || (stage ? stage.getHeight() : 0),
-                    pixelRatio: 1
+                    pixelRatio: Kinetic.pixelRatio
                 }),
                 context = canvas.getContext();
 

diff --git a/src/Stage.js b/src/Stage.js
@@ -56,6 +56,7 @@
     Kinetic.Util.addMethods(Kinetic.Stage, {
         ___init: function(config) {
             this.nodeType = STAGE;
+            Kinetic.pixelRatio = config.pixelRatio;
             // call super constructor
             Kinetic.Container.call(this, config);
             this._id = Kinetic.idCounter++;
@@ -199,7 +200,7 @@
                 canvas = new Kinetic.SceneCanvas({
                     width: config.width || this.getWidth(),
                     height: config.height || this.getHeight(),
-                    pixelRatio: 1
+                    pixelRatio: Kinetic.pixelRatio
                 }),
                 _context = canvas.getContext()._context,
                 layers = this.children;