From 65a0aecb9772e0f5cea72d189844d8dbed355009 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sun, 5 Jan 2014 01:24:23 -0800 Subject: [PATCH] added test for hit region draw from blurred image --- src/Shape.js | 14 +++++++----- test/runner.js | 5 +++++ test/unit/filters/Blur-test.js | 39 ++++++++++++++++++++++++++++++++++ 3 files changed, 53 insertions(+), 5 deletions(-) diff --git a/src/Shape.js b/src/Shape.js index 8d0ba035..fd4c52c2 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -319,14 +319,18 @@ * draw hit graph using the cached scene canvas * @method * @memberof Kinetic.Shape.prototype + * @param {Integer} alphaThreshold alpha channel threshold that determines whether or not + * a pixel should be drawn onto the hit graph. Must be a value between 0 and 255. + * The default is 0 * @returns {Kinetic.Shape} * @example * shape.cache(); * shape.drawHitFromCache(); */ - drawHitFromCache: function() { - var cachedCanvas = this._cache.canvas, - sceneCanvas = cachedCanvas.scene, + drawHitFromCache: function(alphaThreshold) { + var threshold = alphaThreshold || 0, + cachedCanvas = this._cache.canvas, + sceneCanvas = this._getCachedSceneCanvas(), sceneContext = sceneCanvas.getContext(), hitCanvas = cachedCanvas.hit, hitContext = hitCanvas.getContext(), @@ -347,11 +351,11 @@ // replace non transparent pixels with color key for(i = 0; i < len; i += 4) { alpha = sceneData[i + 3]; - if (alpha > 0) { + if (alpha > threshold) { hitData[i] = rgbColorKey.r; hitData[i + 1] = rgbColorKey.g; hitData[i + 2] = rgbColorKey.b; - hitData[i + 3] = alpha; + hitData[i + 3] = 255; } } diff --git a/test/runner.js b/test/runner.js index e4479e0a..46ce3505 100644 --- a/test/runner.js +++ b/test/runner.js @@ -102,6 +102,11 @@ function addContainer() { return container; } +function showCanvas(canvas) { + canvas.style.position = 'relative'; + + kineticContainer.appendChild(canvas); +} function showHit(layer) { var canvas = layer.hitCanvas._canvas; canvas.style.position = 'relative'; diff --git a/test/unit/filters/Blur-test.js b/test/unit/filters/Blur-test.js index 583e8c8b..2a04051f 100644 --- a/test/unit/filters/Blur-test.js +++ b/test/unit/filters/Blur-test.js @@ -277,4 +277,43 @@ suite('Blur', function() { }; imageObj.src = 'assets/lion.png'; }); + + // ====================================================== + test('blur hit region', function(done) { + var stage = addStage(); + + var imageObj = new Image(); + imageObj.onload = function() { + + var layer = new Kinetic.Layer(); + darth = new Kinetic.Image({ + x: 10, + y: 10, + image: imageObj, + draggable: true + }); + + layer.add(darth); + stage.add(layer); + + darth.cache(); + darth.filters([Kinetic.Filters.Blur]); + darth.blurRadius(20); + darth.drawHitFromCache(100); + layer.draw(); + + showCanvas(darth._cache.canvas.hit._canvas); + + //console.log(darth._cache.canvas.hit.getContext().getTrace(true)); + + assert.equal(darth._cache.canvas.hit.getContext().getTrace(true), 'save();translate();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();clearRect();getImageData();putImageData();'); + + + + done(); + + }; + imageObj.src = 'assets/lion.png'; + }); + }); \ No newline at end of file