lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-03-03 16:58:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

New HSL filter. HSV and HSL want values between -1.0 and +1.0 (was 0.5 to 2.0)

Browse Source
This commit is contained in:
ippo615
2014-01-31 16:49:11 -05:00
parent 774f50007c
commit da5055cf28
6 changed files with 267 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
test/unit/filters/HSL-test.js Normal file
View File

@@ -0,0 +1,135 @@
suite('HSL', function() {
// ======================================================
test('hue shift 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.hue(360);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 1.0,
hue: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
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(1.0);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 1.0,
luminance: -1.0,
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(1.0);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 1.0,
saturation: -1.0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/lion.png';
});
});

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

@@ -66,13 +66,13 @@ suite('HSV', function() {
darth.cache();
darth.filters([Kinetic.Filters.HSV]);
darth.saturation(2);
darth.saturation(1.0);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 1.0,
saturation: 0,
saturation: -1.0,
easing: Kinetic.Easings.EaseInOut
});
@@ -110,13 +110,13 @@ suite('HSV', function() {
darth.cache();
darth.filters([Kinetic.Filters.HSV]);
darth.saturation(2.0);
darth.saturation(1.0);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 1.0,
saturation: 0.001,
saturation: -1,
easing: Kinetic.Easings.EaseInOut
});
@@ -154,13 +154,13 @@ suite('HSV', function() {
darth.cache();
darth.filters([Kinetic.Filters.HSV]);
darth.value(2.0);
darth.value(1.0);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 1.0,
value: 0.001,
value: -1.0,
easing: Kinetic.Easings.EaseInOut
});
@@ -178,91 +178,4 @@ suite('HSV', function() {
});
// ======================================================
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';
});
});