lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 02:37:59 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Made filters (Levels, Noise, Threshold) tweenable

Browse Source
This commit is contained in:
ippo615
2013-12-03 19:59:43 -05:00
parent b1b4eca375
commit 21b0bb8574
8 changed files with 271 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/filters/Levels.js
View File

@@ -16,7 +16,7 @@
*/
var Levels = function (src, dst, opt) {
var nLevels = opt.quantizationLevels || 2;
var nLevels = Math.round(opt.quantizationLevels || 2);
var srcPixels = src.data,
dstPixels = dst.data,
nPixels = srcPixels.length,
@@ -27,5 +27,31 @@
}
};
Kinetic.Filters.Levels = Kinetic.Util._FilterWrapSingleBuffer(Levels);
Kinetic.Filters.Levels = function(src,dst,opt){
if( this === Kinetic.Filters ){
Levels(src, dst||src, opt );
}else{
Levels.call(this, src, dst||src, {
quantizationLevels: this.getQuantizationLevels()
});
}
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'quantizationLevels', 4);
/**
* get quantization levels. Returns the number of unique levels for each color
* channel. 2 is the minimum, 255 is the maximum. For Kinetic.Filters.Levels
* @name getQuantizationLevels
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* get quantization levels. Sets the number of unique levels for each color
* channel. 2 is the minimum, 255 is the maximum. For Kinetic.Filters.Levels
* @name setQuantizationLevels
* @method
* @memberof Kinetic.Image.prototype
*/
})();

17
src/filters/Mirror.js
View File

@@ -73,7 +73,20 @@
}
};
Kinetic.Filters.MirrorX = Kinetic.Util._FilterWrapSingleBuffer(MirrorX);
Kinetic.Filters.MirrorY = Kinetic.Util._FilterWrapSingleBuffer(MirrorY);
Kinetic.Filters.MirrorX = function(src,dst,opt){
if( this === Kinetic.Filters ){
MirrorX(src, dst||src, opt );
}else{
MirrorX.call(this, src, dst||src, opt);
}
};
Kinetic.Filters.MirrorY = function(src,dst,opt){
if( this === Kinetic.Filters ){
MirrorY(src, dst||src, opt );
}else{
MirrorY.call(this, src, dst||src, opt);
}
};
})();

31
src/filters/Noise.js
View File

@@ -11,12 +11,12 @@
* @param {Object} opt
* @param {Number} [opt.noiseAmount] The amount of noise to add. Between 0 and 255.
* Each channel of each pixel will change by a random amount
* between +- amount/2. Default is 32.
* between +- amount/2. Default is 0.
* @param {Number} [opt.affectAlpha] 1 to add noise to the alpha channel.
* Default is 0.
*/
var Noise = function (src, dst, opt) {
var amount = opt.noiseAmount || 32,
var amount = opt.noiseAmount || 0,
affectAlpha = opt.affectAlpha || 0;
var srcPixels = src.data,
dstPixels = dst.data,
@@ -40,5 +40,30 @@
}
};
Kinetic.Filters.Noise = Kinetic.Util._FilterWrapSingleBuffer(Noise);
Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'noiseAmount', 32);
Kinetic.Filters.Noise = function(src,dst,opt){
if( this === Kinetic.Filters ){
Noise(src, dst||src, opt );
}else{
Noise.call(this, src, dst||src, opt || {
noiseAmount: this.getNoiseAmount()
});
}
};
/**
* get noise amount. Returns the amount of noise. Between 0 and 255.
* @name getNoiseAmount
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* set noise amount. Sets the amount of noise. Between 0 and 255.
* @name setNoiseAmount
* @method
* @memberof Kinetic.Image.prototype
*/
})();

31
src/filters/Threshold.js
View File

@@ -16,7 +16,10 @@
*/
var Threshold = function (src, dst, opt) {
var level = opt.thresholdLevel || 128;
var level = 128;
if( opt.hasOwnProperty ){
level = opt.thresholdLevel;
}
var srcPixels = src.data,
dstPixels = dst.data,
nPixels = srcPixels.length,
@@ -30,5 +33,29 @@
}
};
Kinetic.Filters.Threshold = Kinetic.Util._FilterWrapSingleBuffer(Threshold);
Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'thresholdLevel', 128);
Kinetic.Filters.Threshold = function(src,dst,opt){
if( this === Kinetic.Filters ){
Threshold(src, dst||src, opt );
}else{
Threshold.call(this, src, dst||src, opt || {
thresholdLevel: this.getThresholdLevel()
});
}
};
/**
* get threshold level. Returns the level which divides the color channel (0-255).
* @name getThresholdLevel
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* set threshold level. Sets the level which divides the color channel (0-255).
* @name setThresholdLevel
* @method
* @memberof Kinetic.Image.prototype
*/
})();

43
test/unit/filters/Levels-test.js
View File

@@ -127,4 +127,47 @@ suite('Levels', function () {
done();
});
// ======================================================
test('on image tween', 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.setFilter(Kinetic.Filters.Levels);
darth.setQuantizationLevels(16);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
quantizationLevels: 2,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
});

42
test/unit/filters/Mirror-test.js
View File

@@ -193,4 +193,46 @@ suite('Mirror', function () {
done();
});
// ======================================================
test('on image', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var layer = new Kinetic.Layer();
var xMirror = new Kinetic.Image({
x: 160,
y: 10,
image: imageObj,
draggable: true,
filter: Kinetic.Filters.MirrorX
});
var yMirror = new Kinetic.Image({
x: 320,
y: 10,
image: imageObj,
draggable: true,
filter: Kinetic.Filters.MirrorY
});
var noMirror = new Kinetic.Image({
x: 0,
y: 10,
image: imageObj,
draggable: true
});
layer.add(noMirror);
layer.add(xMirror);
layer.add(yMirror);
stage.add(layer);
layer.draw();
done();
};
imageObj.src = 'assets/lion.png';
});
});

43
test/unit/filters/Noise-test.js
View File

@@ -63,4 +63,47 @@ suite('Noise', function () {
done();
});
// ======================================================
test('noise tween', 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.setFilter(Kinetic.Filters.Noise);
darth.setNoiseAmount(128);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
noiseAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/lion.png';
});
});

43
test/unit/filters/Threshold-test.js
View File

@@ -63,4 +63,47 @@ suite('Threshold', function () {
done();
});
// ======================================================
test('image tween', 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.setFilter(Kinetic.Filters.Threshold);
darth.setThresholdLevel(255);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
thresholdLevel: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
});