lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-23 13:26:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed grayscale filter and updated tests

Browse Source
This commit is contained in:
Eric Rowell
2013-12-31 21:00:07 -08:00
parent 3321102784
commit bbdbbd4d61
10 changed files with 94 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
test/runner.html
View File

@@ -81,14 +81,14 @@
<!-- filters -->
<script src="unit/filters/Blur-test.js"></script>
<script src="unit/filters/Brighten-test.js"></script>
<!--
<script src="unit/filters/ColorPack-test.js"></script>
<!--<script src="unit/filters/ColorPack-test.js"></script>-->
<script src="unit/filters/Invert-test.js"></script>
<script src="unit/filters/Mask-test.js"></script>
<script src="unit/filters/ConvolvePack-test.js"></script>
<!--<script src="unit/filters/Mask-test.js"></script>
<script src="unit/filters/ConvolvePack-test.js"></script>-->
<script src="unit/filters/Grayscale-test.js"></script>
<script src="unit/filters/ColorStretch-test.js"></script>
<!--<script src="unit/filters/ColorStretch-test.js"></script>
<script src="unit/filters/Polar-test.js"></script>
<script src="unit/filters/Pixelate-test.js"></script>
<script src="unit/filters/Noise-test.js"></script>

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

@@ -277,66 +277,4 @@ suite('Blur', function() {
};
imageObj.src = 'assets/lion.png';
});
// ======================================================
// test('half layer gaussian 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.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 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();
// });
});

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

@@ -1,6 +1,6 @@
suite('Color Pack', function() {
suite('ColorPack', function() {
// ======================================================
test('colorize basic', function(done) {
test.only('colorize basic', function(done) {
var stage = addStage();
var imageObj = new Image();
@@ -17,8 +17,9 @@ suite('Color Pack', function() {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Colorize);
darth.setFilterColorizeColor([255,0,128]);
darth.cache();
darth.filters([Kinetic.Filters.Colorize]);
darth.color([255,0,128]);
layer.draw();
// Assert fails even though '[255,0,128] = [255,0,128]'
@@ -49,8 +50,9 @@ suite('Color Pack', function() {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Colorize);
darth.setFilterColorizeColor([0,255,0]);
darth.cache();
darth.filters([Kinetic.Filters.Colorize]);
darth.color([0,255,0]);
layer.draw();
// assert.equal(darth.getFilterColorizeColor(), [0,255,0]);
@@ -94,8 +96,9 @@ suite('Color Pack', function() {
});
layer.add(darth);
darth.setFilter(Kinetic.Filters.Colorize);
darth.setFilterColorizeColor(color);
darth.cache();
darth.filters([Kinetic.Filters.Colorize]);
darth.color(color);
nAdded += 1;
if( nAdded >= l ){
@@ -111,7 +114,7 @@ suite('Color Pack', function() {
// ======================================================
test('hue shift tween transparancy', function(done) {
test.only('hue shift tween transparancy', function(done) {
var stage = addStage();
var imageObj = new Image();
@@ -128,14 +131,15 @@ suite('Color Pack', function() {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.HSV);
darth.setFilterHue(360);
darth.cache();
darth.filters([Kinetic.Filters.HSV]);
darth.hue(360);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
filterHue: 0,
hue: 0,
easing: Kinetic.Easings.EaseInOut
});

77
test/unit/filters/Grayscale-test.js
View File

@@ -1,4 +1,4 @@
suite('Filter Grayscale', function() {
suite('Grayscale', function() {
// ======================================================
test('basic', function(done) {
var stage = addStage();
@@ -17,7 +17,8 @@ suite('Filter Grayscale', function() {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Grayscale);
darth.cache();
darth.filters([Kinetic.Filters.Grayscale]);
layer.draw();
done();
@@ -39,13 +40,16 @@ suite('Filter Grayscale', function() {
y: 10,
image: imageObj,
crop: {x:128, y:48, width:256, height:128},
filter: Kinetic.Filters.Grayscale,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.cache();
darth.filters([Kinetic.Filters.Grayscale]);
layer.draw();
done();
};
@@ -70,7 +74,8 @@ suite('Filter Grayscale', function() {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Grayscale);
darth.cache();
darth.filters([Kinetic.Filters.Grayscale]);
layer.draw();
done();
@@ -79,68 +84,4 @@ suite('Filter Grayscale', function() {
});
// ======================================================
test('half layer', 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.Grayscale(imageData,scratchData,{});
this.getContext().putImageData(scratchData,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();
});
});

74
test/unit/filters/Invert-test.js
View File

@@ -17,7 +17,8 @@ suite('Invert', function() {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Invert);
darth.cache();
darth.filters([Kinetic.Filters.Invert]);
layer.draw();
done();
@@ -45,7 +46,8 @@ suite('Invert', function() {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Invert);
darth.cache();
darth.filters([Kinetic.Filters.Invert]);
layer.draw();
done();
@@ -72,7 +74,8 @@ suite('Invert', function() {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Invert);
darth.cache();
darth.filters([Kinetic.Filters.Invert]);
layer.draw();
done();
@@ -80,69 +83,4 @@ suite('Invert', function() {
imageObj.src = 'assets/lion.png';
});
// ======================================================
test('half layer', 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.Invert(imageData,scratchData,{});
this.getContext().putImageData(scratchData,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();
});
});