mirror of
https://github.com/konvajs/konva.git
synced 2025-09-18 18:27:58 +08:00
added test for hit region draw from blurred image
This commit is contained in:
14
src/Shape.js
14
src/Shape.js
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -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';
|
||||||
|
@@ -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';
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
Reference in New Issue
Block a user