From e7f45545164b68dca10cd07211ceadace909535a Mon Sep 17 00:00:00 2001 From: kzhdev Date: Wed, 15 Jan 2014 12:34:26 -0600 Subject: [PATCH] Fix poor cache image quality on device with higher pixelRatio. close #750 --- src/Canvas.js | 9 ++++----- src/Global.js | 1 + src/Layer.js | 4 ++-- src/Node.js | 13 +++++++++---- src/Stage.js | 3 ++- 5 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/Canvas.js b/src/Canvas.js index 6559a29f..d933985f 100644 --- 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 index 2645e873..30ec987e 100644 --- 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 index dd6be4d4..91fd4c3b 100644 --- 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 index 8cd8bff4..75e29e98 100644 --- 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 index 557494fe..0b698059 100644 --- 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;