mirror of
https://github.com/konvajs/konva.git
synced 2025-09-19 02:37:59 +08:00
first pass at integrating filters into new caching mechanism. added group filter test. Removed blurX and blurY filters because I don't think they'll be needed in their current state. Commented out half filter blur test because it's not a common use case. other filter tests have been disabled for now. Working on enabling them with future commits
This commit is contained in:
Eric Rowell
@@ -17,11 +17,25 @@ suite('Blur', function() {
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.setFilter(Kinetic.Filters.Blur);
|
||||
darth.setFilterRadius(10);
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.Blur]);
|
||||
darth.blurRadius(10);
|
||||
|
||||
assert.equal(darth.blurRadius(), 10);
|
||||
assert.equal(darth._filterUpToDate, false);
|
||||
|
||||
layer.draw();
|
||||
|
||||
assert.equal(darth.getFilterRadius(), 10);
|
||||
assert.equal(darth._filterUpToDate, true);
|
||||
|
||||
darth.blurRadius(20);
|
||||
|
||||
assert.equal(darth.blurRadius(), 20);
|
||||
assert.equal(darth._filterUpToDate, false);
|
||||
|
||||
layer.draw();
|
||||
|
||||
assert.equal(darth._filterUpToDate, true);
|
||||
|
||||
done();
|
||||
};
|
||||
@@ -29,6 +43,78 @@ suite('Blur', function() {
|
||||
|
||||
});
|
||||
|
||||
test('blur group', function(){
|
||||
var stage = addStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var group = new Kinetic.Group({
|
||||
x: 100,
|
||||
y: 100,
|
||||
draggable: true
|
||||
});
|
||||
var top = new Kinetic.Circle({
|
||||
x: 0,
|
||||
y: -70,
|
||||
radius: 30,
|
||||
fill: 'blue',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
var right = new Kinetic.Circle({
|
||||
x: 70,
|
||||
y: 0,
|
||||
radius: 30,
|
||||
fill: 'blue',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
var bottom = new Kinetic.Circle({
|
||||
x: 0,
|
||||
y: 70,
|
||||
radius: 30,
|
||||
fill: 'blue',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
var left = new Kinetic.Circle({
|
||||
x: -70,
|
||||
y: 0,
|
||||
radius: 30,
|
||||
fill: 'blue',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
group.add(top).add(right).add(bottom).add(left);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
group.cache({
|
||||
x: -150,
|
||||
y: -150,
|
||||
width: 300,
|
||||
height: 300
|
||||
});
|
||||
|
||||
group.offset({
|
||||
x: 150,
|
||||
y: 150
|
||||
});
|
||||
|
||||
group.filters([Kinetic.Filters.Blur]);
|
||||
group.blurRadius(20);
|
||||
|
||||
layer.draw();
|
||||
|
||||
//document.body.appendChild(group._cache.canvas.scene._canvas);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
showHit(layer);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('tween blur', function(done) {
|
||||
var stage = addStage();
|
||||
@@ -47,14 +133,15 @@ suite('Blur', function() {
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.setFilter(Kinetic.Filters.Blur);
|
||||
darth.setFilterRadius(100);
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.Blur]);
|
||||
darth.blurRadius(100);
|
||||
layer.draw();
|
||||
|
||||
var tween = new Kinetic.Tween({
|
||||
node: darth,
|
||||
duration: 2.0,
|
||||
filterRadius: 0,
|
||||
blurRadius: 0,
|
||||
easing: Kinetic.Easings.EaseInOut
|
||||
});
|
||||
|
||||
@@ -91,8 +178,9 @@ suite('Blur', function() {
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.setFilter(Kinetic.Filters.Blur);
|
||||
darth.setFilterRadius(10);
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.Blur]);
|
||||
darth.blurRadius(10);
|
||||
layer.draw();
|
||||
|
||||
done();
|
||||
@@ -120,14 +208,15 @@ suite('Blur', function() {
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.setFilter(Kinetic.Filters.Blur);
|
||||
darth.setFilterRadius(100);
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.Blur]);
|
||||
darth.blurRadius(100);
|
||||
layer.draw();
|
||||
|
||||
var tween = new Kinetic.Tween({
|
||||
node: darth,
|
||||
duration: 2.0,
|
||||
filterRadius: 0,
|
||||
blurRadius: 0,
|
||||
easing: Kinetic.Easings.EaseInOut
|
||||
});
|
||||
|
||||
@@ -163,14 +252,15 @@ suite('Blur', function() {
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.setFilter(Kinetic.Filters.Blur);
|
||||
darth.setFilterRadius(100);
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.Blur]);
|
||||
darth.blurRadius(100);
|
||||
layer.draw();
|
||||
|
||||
var tween = new Kinetic.Tween({
|
||||
node: darth,
|
||||
duration: 2.0,
|
||||
filterRadius: 0,
|
||||
blurRadius: 0,
|
||||
easing: Kinetic.Easings.EaseInOut
|
||||
});
|
||||
|
||||
@@ -189,64 +279,64 @@ suite('Blur', function() {
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('half layer gaussian blur', function (done) {
|
||||
var stage = addStage();
|
||||
// test('half layer gaussian blur', function (done) {
|
||||
// var stage = addStage();
|
||||
|
||||
var shapesLayer = new Kinetic.Layer();
|
||||
// var shapesLayer = new Kinetic.Layer();
|
||||
|
||||
// The important line!
|
||||
shapesLayer.on('draw', function () {
|
||||
var imageData = this.getContext().getImageData(0,0,this.getCanvas().width/2,this.getCanvas().height);
|
||||
var scratchData = this.getContext().createImageData(imageData); // only size copied
|
||||
Kinetic.Filters.Blur(imageData,scratchData,{filterRadius:24});
|
||||
this.getContext().putImageData(scratchData,0,0);
|
||||
});
|
||||
// // The important line!
|
||||
// shapesLayer.on('draw', function () {
|
||||
// var imageData = this.getContext().getImageData(0,0,this.getCanvas().width/2,this.getCanvas().height);
|
||||
// var scratchData = this.getContext().createImageData(imageData); // only size copied
|
||||
// Kinetic.Filters.Blur(imageData,scratchData,{filterRadius:24});
|
||||
// this.getContext().putImageData(scratchData,0,0);
|
||||
// });
|
||||
|
||||
var triangle = new Kinetic.RegularPolygon({
|
||||
x: stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
sides: 3,
|
||||
radius: 80,
|
||||
fillRadialGradientEndRadius: 70,
|
||||
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
// var triangle = new Kinetic.RegularPolygon({
|
||||
// x: stage.getWidth() / 4,
|
||||
// y: stage.getHeight() / 2,
|
||||
// sides: 3,
|
||||
// radius: 80,
|
||||
// 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'
|
||||
});
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
// 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);
|
||||
// shapesLayer.add(circle);
|
||||
// shapesLayer.add(triangle);
|
||||
|
||||
stage.add(shapesLayer);
|
||||
// stage.add(shapesLayer);
|
||||
|
||||
done();
|
||||
});
|
||||
// done();
|
||||
// });
|
||||
|
||||
});
|
||||
@@ -1,154 +0,0 @@
|
||||
suite('Quick Blur', function() {
|
||||
|
||||
// ======================================================
|
||||
test('half layer blur', function (done) {
|
||||
var stage = addStage();
|
||||
|
||||
var shapesLayer = new Kinetic.Layer();
|
||||
|
||||
// The important line!
|
||||
shapesLayer.on('draw', function () {
|
||||
var imageData = this.getContext().getImageData(0,0,this.getCanvas().width/2,this.getCanvas().height);
|
||||
var scratchData = this.getContext().createImageData(imageData); // only size copied
|
||||
Kinetic.Filters.BlurX(imageData,scratchData,{blurWidth:24});
|
||||
Kinetic.Filters.BlurY(scratchData,imageData,{blurHeight:24});
|
||||
this.getContext().putImageData(imageData,0,0);
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('tween x blur', 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.BlurX);
|
||||
darth.setBlurWidth(100);
|
||||
layer.draw();
|
||||
|
||||
var tween = new Kinetic.Tween({
|
||||
node: darth,
|
||||
duration: 2.0,
|
||||
blurWidth: 0,
|
||||
easing: Kinetic.Easings.EaseInOut
|
||||
});
|
||||
|
||||
darth.on('mouseover', function() {
|
||||
tween.play();
|
||||
});
|
||||
|
||||
darth.on('mouseout', function() {
|
||||
tween.reverse();
|
||||
});
|
||||
|
||||
done();
|
||||
|
||||
};
|
||||
imageObj.src = 'assets/darth-vader.jpg';
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('tween y blur', 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.BlurY);
|
||||
darth.setBlurHeight(100);
|
||||
layer.draw();
|
||||
|
||||
var tween = new Kinetic.Tween({
|
||||
node: darth,
|
||||
duration: 2.0,
|
||||
blurHeight: 0,
|
||||
easing: Kinetic.Easings.EaseInOut
|
||||
});
|
||||
|
||||
darth.on('mouseover', function() {
|
||||
tween.play();
|
||||
});
|
||||
|
||||
darth.on('mouseout', function() {
|
||||
tween.reverse();
|
||||
});
|
||||
|
||||
done();
|
||||
|
||||
};
|
||||
imageObj.src = 'assets/darth-vader.jpg';
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user