lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added HSL filter.

Browse Source
This commit is contained in:
ippo615 2014-01-27 19:59:42 -05:00
parent ee6a786ebb
commit 774f50007c
2 changed files with 125 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/filters/HSV.js
View File

@ -86,4 +86,41 @@
* @param {Number} value 1 is no change, 0.5 halves the value, 2.0 doubles, etc..
* @returns {Number}
*/
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'luminance', 1, null, Kinetic.Factory.afterSetFilter);
/**
* get/set hsl luminance
* @name value
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} value 1 is no change, 0.5 halves the value, 2.0 doubles, etc..
* @returns {Number}
*/
/**
* HSL Filter. Adjusts the hue, saturation and luminance (or lightness)
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.HSL = function (imageData) {
// Hue stays the same but saturation, value and brightness will be
// adjusted to match common photo-editing software's extreme values
var oldSaturation = this.saturation(),
oldBrightness = this.brightness(),
oldValue = this.value();
this.saturation(oldSaturation*oldSaturation);
this.brightness(0.5*(this.luminance()-1));
this.value(1.0);
Kinetic.Filters.HSV.call(this,imageData);
Kinetic.Filters.Brighten.call(this,imageData);
this.saturation(oldSaturation);
this.brightness(oldBrightness);
this.value(oldValue);
};
})();

88
test/unit/filters/HSV-test.js
View File

@ -177,4 +177,92 @@ suite('HSV', function() {
imageObj.src = 'assets/lion.png';
});
// ======================================================
test('HSL luminance tween transparancy', 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.HSL]);
darth.luminance(2.0);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 1.0,
luminance: 0.001,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/lion.png';
});
// ======================================================
test('HSL saturation tween transparancy', 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.HSL]);
darth.saturation(2.0);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 1.0,
saturation: 0.001,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/lion.png';
});
});