lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added tweening to HSV filter

Browse Source
This commit is contained in:
ippo615
2013-12-03 18:34:24 -05:00
parent 79fcf535f3
commit 632b81137a
2 changed files with 226 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/filters/ColorPack.js
View File

@@ -72,6 +72,70 @@
Kinetic.Filters.HSV = Kinetic.Util._FilterWrapSingleBuffer(HSV);
Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterHue', 0);
Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterSaturation', 1);
Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterValue', 1);
Kinetic.Filters.HSV = function(src,dst,opt){
if( this === Kinetic.Filters ){
HSV(src, dst||src, opt );
}else{
HSV.call(this, src, dst||src, opt || {
hue: this.getFilterHue(),
saturation: this.getFilterSaturation(),
value: this.getFilterValue()
});
}
};
/**
* get filter hue. Returns the hue shift for the HSV filter.
* 0 is no change, 359 is the maximum shift.
* @name getFilterHue
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* set filter hue. Sets the hue shift for the HSV filter.
* 0 is no change, 359 is the maximum shift.
* @name setFilterHue
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* get filter saturation. Returns the saturation scale for the HSV
* filter. 1 is no change, 0.5 halves the saturation, 2.0 doubles, etc..
* @name getFilterSaturation
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* set filter saturation. Set the saturation scale for the HSV
* filter. 1 is no change, 0.5 halves the saturation, 2.0 doubles, etc..
* @name setFilterSaturation
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* get filter value. Returns the value scale for the HSV
* filter. 1 is no change, 0.5 halves the value, 2.0 doubles, etc..
* @name getFilterValue
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* set filter value. Set the value scale for the HSV
* filter. 1 is no change, 0.5 halves the value, 2.0 doubles, etc..
* @name setFilterValue
* @method
* @memberof Kinetic.Image.prototype
*/
})();
(function() {

165
test/unit/filters/ColorPack-test.js
View File

@@ -108,14 +108,100 @@ suite('Color Pack', function() {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.ShiftHue);
darth.setFilterHueShiftDeg(360);
darth.setFilter(Kinetic.Filters.HSV);
darth.setFilterHue(360);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
filterHueShiftDeg: 0,
filterHue: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/lion.png';
});
// ======================================================
test('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.setFilter(Kinetic.Filters.HSV);
darth.setFilterSaturation(2.0);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
filterSaturation: 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('value 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.setFilter(Kinetic.Filters.HSV);
darth.setFilterValue(2.0);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
filterValue: 0.001,
easing: Kinetic.Easings.EaseInOut
});
@@ -279,4 +365,77 @@ suite('Color Pack', function() {
done();
});
// ======================================================
test('value gradient', function (done) {
var stage = addStage();
var shapesLayer = new Kinetic.Layer();
// The important line!
shapesLayer.on('draw', function () {
var src, dst, i, w=40;
var ctx = this.getContext();
var ctxWidth = this.getCanvas().width;
var ctxHeight = this.getCanvas().height;
var xSize = Math.floor(ctxWidth/w);
var ySize = Math.floor(ctxHeight);
for( i=0; i<w; i+=1 ){
src = ctx.getImageData(i*xSize,0,xSize,ySize);
dst = ctx.createImageData(src);
Kinetic.Filters.HSV(src,dst,{value:2*(0.001+i)/w});
ctx.putImageData(dst,i*xSize,0);
//ctx.strokeRect(i*xSize,0,xSize,ySize);
}
});
var triangle = new Kinetic.RegularPolygon({
x: stage.getWidth() / 4,
y: stage.getHeight() / 2,
sides: 3,
radius: 80,
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 70,
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
var circle = new Kinetic.Circle({
x: 3 * stage.getWidth() / 4,
y: stage.getHeight() / 2,
radius: 70,
fill: '#880000',
stroke: 'black',
strokeWidth: 4,
draggable: true,
id: 'myCircle'
});
for( var i=0; i<10; i+=1 ){
for( var j=0; j<10; j+=1 ){
var rect = new Kinetic.Rect({
x: i/10*stage.getWidth(),
y: j/10*stage.getHeight(),
width: stage.getWidth()/10,
height: stage.getHeight()/10,
fill: (i+j)%2===0?'#FF0000':'#FFFF00',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
shapesLayer.add(rect);
}
}
shapesLayer.add(circle);
shapesLayer.add(triangle);
stage.add(shapesLayer);
done();
});
});