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

Added Gaussian Blur back, put QuickBlur in separate file

Browse Source
This commit is contained in:
ippo615
2013-12-04 19:03:20 -05:00
parent 21b0bb8574
commit a680d33c40
6 changed files with 733 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
test/runner.html
View File

@@ -76,6 +76,7 @@
<!-- filters -->
<script src="unit/filters/Blur-test.js"></script>
<script src="unit/filters/QuickBlur-test.js"></script>
<script src="unit/filters/Brighten-test.js"></script>
<script src="unit/filters/ColorPack-test.js"></script>
<script src="unit/filters/Invert-test.js"></script>

10
test/unit/filters/Blur-test.js
View File

@@ -189,19 +189,17 @@ suite('Blur', function() {
});
// ======================================================
test('fast blur', function (done) {
test('half layer gaussian blur', function (done) {
var stage = addStage();
var shapesLayer = new Kinetic.Layer();
// The important line!
shapesLayer.on('draw', function () {
var BLURAMOUNT = 10;
var imageData = this.getContext().getImageData(0,0,this.getCanvas().width,this.getCanvas().height);
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:BLURAMOUNT});
Kinetic.Filters.BlurY(scratchData,imageData,{blurHeight:BLURAMOUNT});
this.getContext().putImageData(imageData,0,0);
Kinetic.Filters.Blur(imageData,scratchData,{filterRadius:24});
this.getContext().putImageData(scratchData,0,0);
});
var triangle = new Kinetic.RegularPolygon({

154
test/unit/filters/QuickBlur-test.js Normal file
View File

@@ -0,0 +1,154 @@
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';
});
});