From e6a9447867379026bea9b8339619afa341747024 Mon Sep 17 00:00:00 2001 From: Victor Michnowicz Date: Thu, 8 May 2014 19:50:51 -0400 Subject: [PATCH 1/4] Try and make it faster --- src/Layer.js | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/src/Layer.js b/src/Layer.js index aa4489c6..edba647c 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -92,10 +92,31 @@ return null; } }, + _getImageData: function(x, y) { + var width = this.hitCanvas.width, + height = this.hitCanvas.height; + + if (width && height && !this.imageData) { + this.imageData = this.hitCanvas.context._context.getImageData(0, 0, this.hitCanvas.width, this.hitCanvas.height); + } + + if (this.imageData && typeof x === 'number' && typeof y === 'number') { + var index = (y * width ) + x; + + return [ + this.imageData.data[4 * index + 0] , // Red value + this.imageData.data[4 * index + 1], // Green value + this.imageData.data[4 * index + 2], // Blue value + this.imageData.data[4 * index + 3] // Alpha val + ]; + } + + return this.imageData || null; + }, _getIntersection: function(pos) { - var p = this.hitCanvas.context._context.getImageData(pos.x, pos.y, 1, 1).data, - p3 = p[3], - colorKey, shape; + var p = this._getImageData(pos.x, pos.y), + p3 = p[3], + colorKey, shape; // fully opaque pixel if(p3 === 255) { From 7d16ca6cca417de0edfee1f2b531dc957f1f7d97 Mon Sep 17 00:00:00 2001 From: Victor Michnowicz Date: Thu, 8 May 2014 23:27:58 -0400 Subject: [PATCH 2/4] Clear imageData after draw to hit canvas --- src/BaseLayer.js | 1 + src/Layer.js | 9 +++++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/BaseLayer.js b/src/BaseLayer.js index 795ba4cc..0a97d75b 100644 --- a/src/BaseLayer.js +++ b/src/BaseLayer.js @@ -47,6 +47,7 @@ clear: function(bounds) { this.getContext().clear(bounds); this.getHitCanvas().getContext().clear(bounds); + this.imageData = null; return this; }, // extend Node.prototype.setZIndex diff --git a/src/Layer.js b/src/Layer.js index edba647c..631e8786 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -93,11 +93,11 @@ } }, _getImageData: function(x, y) { - var width = this.hitCanvas.width, - height = this.hitCanvas.height; + var width = this.hitCanvas.width || 1, + height = this.hitCanvas.height || 1; - if (width && height && !this.imageData) { - this.imageData = this.hitCanvas.context._context.getImageData(0, 0, this.hitCanvas.width, this.hitCanvas.height); + if (!this.imageData) { + this.imageData = this.hitCanvas.context._context.getImageData(0, 0, width, height); } if (this.imageData && typeof x === 'number' && typeof y === 'number') { @@ -173,6 +173,7 @@ } Kinetic.Container.prototype.drawHit.call(this, canvas, top); + this.imageData = null; return this; }, /** From 3214b680c517ae9bacb0442ea81ce66211c9463a Mon Sep 17 00:00:00 2001 From: Victor Michnowicz Date: Fri, 9 May 2014 10:20:44 -0400 Subject: [PATCH 3/4] Clear cache, tabs to spaces --- src/BaseLayer.js | 1 - src/Layer.js | 50 ++++++++++++++++++++++++++---------------------- 2 files changed, 27 insertions(+), 24 deletions(-) diff --git a/src/BaseLayer.js b/src/BaseLayer.js index 0a97d75b..795ba4cc 100644 --- a/src/BaseLayer.js +++ b/src/BaseLayer.js @@ -47,7 +47,6 @@ clear: function(bounds) { this.getContext().clear(bounds); this.getHitCanvas().getContext().clear(bounds); - this.imageData = null; return this; }, // extend Node.prototype.setZIndex diff --git a/src/Layer.js b/src/Layer.js index 631e8786..b8eb8546 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -92,31 +92,34 @@ return null; } }, - _getImageData: function(x, y) { - var width = this.hitCanvas.width || 1, - height = this.hitCanvas.height || 1; + /** + * Get ImageData.data array for an individual pixel on the hit canvas. + * Data is cached as getImageData is an expensive method to call often. + * + * @param {Number} x + * @param {Number} x + * @returns {Array} One-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 + */ + _getImageData: function(x, y) { + var width = this.hitCanvas.width || 1, + height = this.hitCanvas.height || 1, + index = (y * width ) + x; - if (!this.imageData) { - this.imageData = this.hitCanvas.context._context.getImageData(0, 0, width, height); - } + if (!this.imageData) { + this.imageData = this.hitCanvas.context._context.getImageData(0, 0, width, height); + } - if (this.imageData && typeof x === 'number' && typeof y === 'number') { - var index = (y * width ) + x; - - return [ - this.imageData.data[4 * index + 0] , // Red value - this.imageData.data[4 * index + 1], // Green value - this.imageData.data[4 * index + 2], // Blue value - this.imageData.data[4 * index + 3] // Alpha val - ]; - } - - return this.imageData || null; - }, + return [ + this.imageData.data[4 * index + 0] , // Red + this.imageData.data[4 * index + 1], // Green + this.imageData.data[4 * index + 2], // Blue + this.imageData.data[4 * index + 3] // Alpha + ]; + }, _getIntersection: function(pos) { - var p = this._getImageData(pos.x, pos.y), - p3 = p[3], - colorKey, shape; + var p = this._getImageData(pos.x, pos.y), + p3 = p[3], + colorKey, shape; // fully opaque pixel if(p3 === 255) { @@ -173,7 +176,7 @@ } Kinetic.Container.prototype.drawHit.call(this, canvas, top); - this.imageData = null; + this.imageData = null; // Clear imageData cache return this; }, /** @@ -192,6 +195,7 @@ clear: function(bounds) { this.getContext().clear(bounds); this.getHitCanvas().getContext().clear(bounds); + this.imageData = null; // Clear imageData cache return this; }, // extend Node.prototype.setVisible From 70564cc1e4928df406295f2663ffe508bc93b6ad Mon Sep 17 00:00:00 2001 From: Victor Michnowicz Date: Sat, 17 May 2014 00:06:46 -0400 Subject: [PATCH 4/4] Update clearing of getImageData cache --- src/Container.js | 3 +++ src/Layer.js | 3 +-- src/Shape.js | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Container.js b/src/Container.js index eeebaeea..df7a3a0a 100644 --- a/src/Container.js +++ b/src/Container.js @@ -307,6 +307,9 @@ cachedHitCanvas = cachedCanvas && cachedCanvas.hit; if (this.shouldDrawHit()) { + if (layer) { + layer.imageData = null; // Clear getImageData cache + } if (cachedHitCanvas) { this._drawCachedHitCanvas(context); } diff --git a/src/Layer.js b/src/Layer.js index b8eb8546..de4969c7 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -176,7 +176,6 @@ } Kinetic.Container.prototype.drawHit.call(this, canvas, top); - this.imageData = null; // Clear imageData cache return this; }, /** @@ -195,7 +194,7 @@ clear: function(bounds) { this.getContext().clear(bounds); this.getHitCanvas().getContext().clear(bounds); - this.imageData = null; // Clear imageData cache + this.imageData = null; // Clear getImageData cache return this; }, // extend Node.prototype.setVisible diff --git a/src/Shape.js b/src/Shape.js index d0fa738f..cc46614d 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -203,7 +203,7 @@ cachedHitCanvas = cachedCanvas && cachedCanvas.hit; if(this.shouldDrawHit()) { - + layer.imageData = null; // Clear getImageData cache if (cachedHitCanvas) { this._drawCachedHitCanvas(context); }