added test for hit region draw from blurred image

This commit is contained in:
Eric Rowell
2014-01-05 01:24:23 -08:00
parent 4d323c7b57
commit 65a0aecb97
3 changed files with 53 additions and 5 deletions

View File

@@ -319,14 +319,18 @@
* draw hit graph using the cached scene canvas * draw hit graph using the cached scene canvas
* @method * @method
* @memberof Kinetic.Shape.prototype * @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} * @returns {Kinetic.Shape}
* @example * @example
* shape.cache(); * shape.cache();
* shape.drawHitFromCache(); * shape.drawHitFromCache();
*/ */
drawHitFromCache: function() { drawHitFromCache: function(alphaThreshold) {
var cachedCanvas = this._cache.canvas, var threshold = alphaThreshold || 0,
sceneCanvas = cachedCanvas.scene, cachedCanvas = this._cache.canvas,
sceneCanvas = this._getCachedSceneCanvas(),
sceneContext = sceneCanvas.getContext(), sceneContext = sceneCanvas.getContext(),
hitCanvas = cachedCanvas.hit, hitCanvas = cachedCanvas.hit,
hitContext = hitCanvas.getContext(), hitContext = hitCanvas.getContext(),
@@ -347,11 +351,11 @@
// replace non transparent pixels with color key // replace non transparent pixels with color key
for(i = 0; i < len; i += 4) { for(i = 0; i < len; i += 4) {
alpha = sceneData[i + 3]; alpha = sceneData[i + 3];
if (alpha > 0) { if (alpha > threshold) {
hitData[i] = rgbColorKey.r; hitData[i] = rgbColorKey.r;
hitData[i + 1] = rgbColorKey.g; hitData[i + 1] = rgbColorKey.g;
hitData[i + 2] = rgbColorKey.b; hitData[i + 2] = rgbColorKey.b;
hitData[i + 3] = alpha; hitData[i + 3] = 255;
} }
} }

View File

@@ -102,6 +102,11 @@ function addContainer() {
return container; return container;
} }
function showCanvas(canvas) {
canvas.style.position = 'relative';
kineticContainer.appendChild(canvas);
}
function showHit(layer) { function showHit(layer) {
var canvas = layer.hitCanvas._canvas; var canvas = layer.hitCanvas._canvas;
canvas.style.position = 'relative'; canvas.style.position = 'relative';

View File

@@ -277,4 +277,43 @@ suite('Blur', function() {
}; };
imageObj.src = 'assets/lion.png'; 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';
});
}); });