diff --git a/src/Container.js b/src/Container.js index 9152158e..9cf7e01d 100644 --- a/src/Container.js +++ b/src/Container.js @@ -307,6 +307,9 @@ cachedHitCanvas = cachedCanvas && cachedCanvas.hit; if (this.shouldDrawHit(canvas)) { + if (layer) { + layer.imageData = null; // Clear getImageData cache + } if (cachedHitCanvas) { this._drawCachedHitCanvas(context); } diff --git a/src/Layer.js b/src/Layer.js index 7cc90f14..01e9b431 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -92,8 +92,32 @@ return null; } }, + /** + * 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); + } + + 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.hitCanvas.context._context.getImageData(pos.x, pos.y, 1, 1).data, + var p = this._getImageData(pos.x, pos.y), p3 = p[3], colorKey, shape; @@ -170,6 +194,7 @@ clear: function(bounds) { this.getContext().clear(bounds); this.getHitCanvas().getContext().clear(bounds); + this.imageData = null; // Clear getImageData cache return this; }, // extend Node.prototype.setVisible diff --git a/src/Shape.js b/src/Shape.js index 924e51cd..b50906cd 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -209,7 +209,9 @@ cachedHitCanvas = cachedCanvas && cachedCanvas.hit; if(this.shouldDrawHit(canvas)) { - + if (layer) { + layer.imageData = null; // Clear getImageData cache + } if (cachedHitCanvas) { this._drawCachedHitCanvas(context); }