mirror of
https://github.com/konvajs/konva.git
synced 2026-03-03 16:58:33 +08:00
Made enhance filter tweenable (-1=grey;0=no change;1=max enhancement)
This commit is contained in:
@@ -32,15 +32,19 @@
|
|||||||
*/
|
*/
|
||||||
Kinetic.Filters.Enhance = function (imageData) {
|
Kinetic.Filters.Enhance = function (imageData) {
|
||||||
var data = imageData.data,
|
var data = imageData.data,
|
||||||
nPixels = data.length,
|
nSubPixels = data.length,
|
||||||
rMin = data[0], rMax = rMin, r,
|
rMin = data[0], rMax = rMin, r,
|
||||||
gMin = data[1], gMax = gMin, g,
|
gMin = data[1], gMax = gMin, g,
|
||||||
bMin = data[3], bMax = bMin, b,
|
bMin = data[2], bMax = bMin, b,
|
||||||
aMin = data[4], aMax = aMin, a,
|
aMin = data[3], aMax = aMin, a,
|
||||||
i;
|
i;
|
||||||
|
|
||||||
|
// If we are not enhancing anything - don't do any computation
|
||||||
|
var enhanceAmount = this.enhance();
|
||||||
|
if( enhanceAmount === 0 ){ return; }
|
||||||
|
|
||||||
// 1st Pass - find the min and max for each channel:
|
// 1st Pass - find the min and max for each channel:
|
||||||
for (i = 0; i < nPixels; i += 4) {
|
for (i = 0; i < nSubPixels; i += 4) {
|
||||||
r = data[i + 0];
|
r = data[i + 0];
|
||||||
if (r < rMin) { rMin = r; } else
|
if (r < rMin) { rMin = r; } else
|
||||||
if (r > rMax) { rMax = r; }
|
if (r > rMax) { rMax = r; }
|
||||||
@@ -50,9 +54,9 @@
|
|||||||
b = data[i + 2];
|
b = data[i + 2];
|
||||||
if (b < bMin) { bMin = b; } else
|
if (b < bMin) { bMin = b; } else
|
||||||
if (b > bMax) { bMax = b; }
|
if (b > bMax) { bMax = b; }
|
||||||
a = data[i + 3];
|
//a = data[i + 3];
|
||||||
if (a < aMin) { aMin = a; } else
|
//if (a < aMin) { aMin = a; } else
|
||||||
if (a > aMax) { aMax = a; }
|
//if (a > aMax) { aMax = a; }
|
||||||
}
|
}
|
||||||
|
|
||||||
// If there is only 1 level - don't remap
|
// If there is only 1 level - don't remap
|
||||||
@@ -61,12 +65,54 @@
|
|||||||
if( bMax === bMin ){ bMax = 255; bMin = 0; }
|
if( bMax === bMin ){ bMax = 255; bMin = 0; }
|
||||||
if( aMax === aMin ){ aMax = 255; aMin = 0; }
|
if( aMax === aMin ){ aMax = 255; aMin = 0; }
|
||||||
|
|
||||||
// Pass 2 - remap everything to fill the full range
|
var rMid, rGoalMax,rGoalMin,
|
||||||
for (i = 0; i < nPixels; i += 1) {
|
gMid, gGoalMax,gGoalMin,
|
||||||
data[i + 0] = remap(data[i + 0], rMin, rMax, 0, 255);
|
bMid, bGoalMax,aGoalMin,
|
||||||
data[i + 1] = remap(data[i + 1], gMin, gMax, 0, 255);
|
aMid, aGoalMax,bGoalMin;
|
||||||
data[i + 2] = remap(data[i + 2], bMin, bMax, 0, 255);
|
|
||||||
data[i + 3] = remap(data[i + 3], aMin, aMax, 0, 255);
|
// If the enhancement is positive - stretch the histogram
|
||||||
|
if( enhanceAmount > 0 ){
|
||||||
|
rGoalMax = rMax + enhanceAmount*(255-rMax);
|
||||||
|
rGoalMin = rMin - enhanceAmount*(rMin-0);
|
||||||
|
gGoalMax = gMax + enhanceAmount*(255-gMax);
|
||||||
|
gGoalMin = gMin - enhanceAmount*(gMin-0);
|
||||||
|
bGoalMax = bMax + enhanceAmount*(255-bMax);
|
||||||
|
bGoalMin = bMin - enhanceAmount*(bMin-0);
|
||||||
|
aGoalMax = aMax + enhanceAmount*(255-aMax);
|
||||||
|
aGoalMin = aMin - enhanceAmount*(aMin-0);
|
||||||
|
// If the enhancement is negative - compress the histogram
|
||||||
|
}else{
|
||||||
|
rMid = (rMax + rMin)*0.5;
|
||||||
|
rGoalMax = rMax + enhanceAmount*(rMax-rMid);
|
||||||
|
rGoalMin = rMin + enhanceAmount*(rMin-rMid);
|
||||||
|
gMid = (gMax + gMin)*0.5;
|
||||||
|
gGoalMax = gMax + enhanceAmount*(gMax-gMid);
|
||||||
|
gGoalMin = gMin + enhanceAmount*(gMin-gMid);
|
||||||
|
bMid = (bMax + bMin)*0.5;
|
||||||
|
bGoalMax = bMax + enhanceAmount*(bMax-bMid);
|
||||||
|
bGoalMin = bMin + enhanceAmount*(bMin-bMid);
|
||||||
|
aMid = (aMax + aMin)*0.5;
|
||||||
|
aGoalMax = aMax + enhanceAmount*(aMax-aMid);
|
||||||
|
aGoalMin = aMin + enhanceAmount*(aMin-aMid);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pass 2 - remap everything, except the alpha
|
||||||
|
for (i = 0; i < nSubPixels; i += 4) {
|
||||||
|
data[i + 0] = remap(data[i + 0], rMin, rMax, rGoalMin, rGoalMax);
|
||||||
|
data[i + 1] = remap(data[i + 1], gMin, gMax, gGoalMin, gGoalMax);
|
||||||
|
data[i + 2] = remap(data[i + 2], bMin, bMax, bGoalMin, bGoalMax);
|
||||||
|
//data[i + 3] = remap(data[i + 3], aMin, aMax, aGoalMin, aGoalMax);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'enhance', 0);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get/set enhance
|
||||||
|
* @name enhance
|
||||||
|
* @method
|
||||||
|
* @memberof Kinetic.Node.prototype
|
||||||
|
* @param {Float} amount
|
||||||
|
* @returns {Float}
|
||||||
|
*/
|
||||||
})();
|
})();
|
||||||
|
|||||||
@@ -25,12 +25,57 @@ suite('Enhance', function () {
|
|||||||
stage.add(layer);
|
stage.add(layer);
|
||||||
|
|
||||||
filt.cache();
|
filt.cache();
|
||||||
|
filt.enhance(1.0);
|
||||||
filt.filters([Kinetic.Filters.Enhance]);
|
filt.filters([Kinetic.Filters.Enhance]);
|
||||||
layer.draw();
|
layer.draw();
|
||||||
|
|
||||||
done();
|
done();
|
||||||
};
|
};
|
||||||
imageObj.src = 'assets/bamoon.jpg';
|
imageObj.src = 'assets/scorpion-sprite.png';
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ======================================================
|
||||||
|
test('tween enhance', 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.Enhance]);
|
||||||
|
darth.enhance(-1);
|
||||||
|
layer.draw();
|
||||||
|
|
||||||
|
var tween = new Kinetic.Tween({
|
||||||
|
node: darth,
|
||||||
|
duration: 2.0,
|
||||||
|
enhance: 1.0,
|
||||||
|
easing: Kinetic.Easings.EaseInOut
|
||||||
|
});
|
||||||
|
|
||||||
|
darth.on('mouseover', function() {
|
||||||
|
tween.play();
|
||||||
|
});
|
||||||
|
|
||||||
|
darth.on('mouseout', function() {
|
||||||
|
tween.reverse();
|
||||||
|
});
|
||||||
|
|
||||||
|
done();
|
||||||
|
|
||||||
|
};
|
||||||
|
imageObj.src = 'assets/scorpion-sprite.png';
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user