lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-24 08:46:44 +08:00
Code Issues Actions 5 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

28
src/filters/Blur.js
View File

@@ -329,32 +329,12 @@
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.Blur = function(imageData) {
var radius = this.blurRadius() | 0;
var Blur = function(src,dst,opt){
var radius = opt.filterRadius | 0;
// If a different desntination image data is supplied
// copy the source and perform the blur on the destination
var i;
if( dst !== src ){
i = src.data.length;
while( i-- ){
dst.data[i] = src.data[i];
}
if (radius > 0) {
filterGaussBlurRGBA(imageData, radius);
}
if( radius > 0 ){
filterGaussBlurRGBA(dst,radius);
}
};
Kinetic.Filters.Blur = function(src,dst,opt){
if( this === Kinetic.Filters ){
Blur(src, dst||src, opt );
}else{
Blur.call(this, src, dst||src, opt || {
filterRadius: this.blurRadius()
});
}
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'blurRadius', 0);

9
src/filters/Brighten.js
View File

@@ -6,9 +6,12 @@
* @param {Object} imageData
*/
Kinetic.Filters.Brighten = function(imageData) {
var brightness = this.brightness() * 255;
var data = imageData.data;
for(var i = 0; i < data.length; i += 4) {
var brightness = this.brightness() * 255,
data = imageData.data,
len = data.length,
i;
for(i = 0; i < len; i += 4) {
// red
data[i] += brightness;
// green

12
src/filters/ColorPack.js
View File

@@ -79,9 +79,9 @@
HSV(src, dst||src, opt );
}else{
HSV.call(this, src, dst||src, opt || {
hue: this.getFilterHue(),
saturation: this.getFilterSaturation(),
value: this.getFilterValue()
hue: this.hue(),
saturation: this.saturation(),
value: this.value()
});
}
};
@@ -92,7 +92,7 @@
HSV(src, dst||src, opt );
}else{
HSV.call(this, src, dst||src, opt || {
hue: this.getFilterHueShiftDeg()
hue: this.hueShiftDeg()
});
}
};
@@ -179,12 +179,12 @@
Colorize(src, dst||src, opt );
}else{
Colorize.call(this, src, dst||src, opt || {
colorizeColor: this.getFilterColorizeColor()
colorizeColor: this.color()
});
}
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'colorizeColor', [255,0,0] );
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'color', [255,0,0] );
/**
* Gets the colorizing color.
* @name getFilterColorizeColor

55
src/filters/Grayscale.js
View File

@@ -1,36 +1,23 @@
(function () {
/**
* Grayscale Filter. Converts the image to shades of gray.
* Performs w*h pixel reads and w*h pixel writes.
* @function
* @author ippo615
* @memberof Kinetic.Filters
* @param {ImageData} src, the source image data (what will be transformed)
* @param {ImageData} dst, the destination image data (where it will be saved)
* @param {Object} opt, There are no options for this filter
*/
var Grayscale = function (src, dst, opt) {
var srcPixels = src.data,
dstPixels = dst.data,
nPixels = srcPixels.length,
i, brightness;
for (i = 0; i < nPixels; i += 4) {
brightness = 0.34 * srcPixels[i] + 0.5 * srcPixels[i + 1] + 0.16 * srcPixels[i + 2];
dstPixels[i] = brightness; // r
dstPixels[i + 1] = brightness; // g
dstPixels[i + 2] = brightness; // b
dstPixels[i + 3] = srcPixels[i + 3]; // alpha
}
};
Kinetic.Filters.Grayscale = function(src,dst,opt){
if( this === Kinetic.Filters ){
Grayscale(src, dst||src, opt );
}else{
Grayscale.call(this, src, dst||src, {} );
}
};
(function() {
/**
* Grayscale Filter
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.Grayscale = function(imageData) {
var data = imageData.data,
len = data.length,
i, brightness;
for(i = 0; i < len; i += 4) {
brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
// red
data[i] = brightness;
// green
data[i + 1] = brightness;
// blue
data[i + 2] = brightness;
}
};
})();

54
src/filters/Invert.js
View File

@@ -1,36 +1,22 @@
(function () {
(function() {
/**
* Invert Filter
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.Invert = function(imageData) {
var data = imageData.data,
len = data.length,
i;
/**
* Invert Filter. Moves all color channels toward the opposite extreme
* ie 0 becomes 255, 10 becomes 245 etc... It does not alter the
* alpha channel.
* Performs w*h pixel reads and w*h pixel writes.
* @function
* @author ippo615
* @memberof Kinetic.Filters
* @param {ImageData} src, the source image data (what will be transformed)
* @param {ImageData} dst, the destination image data (where it will be saved)
* @param {Object} opt, There are no options for this filter
*/
var Invert = function (src, dst, opt) {
var srcPixels = src.data,
dstPixels = dst.data,
nPixels = srcPixels.length,
i;
for (i = 0; i < nPixels; i += 4) {
dstPixels[i+0] = 255 - srcPixels[i+0]; // r
dstPixels[i+1] = 255 - srcPixels[i+1]; // g
dstPixels[i+2] = 255 - srcPixels[i+2]; // b
dstPixels[i+3] = srcPixels[i+3]; // copy alpha
}
};
Kinetic.Filters.Invert = function(src,dst,opt){
if( this === Kinetic.Filters ){
Invert(src, dst||src, opt );
}else{
Invert.call(this, src, dst||src, {} );
}
};
for(i = 0; i < len; i += 4) {
// red
data[i] = 255 - data[i];
// green
data[i + 1] = 255 - data[i + 1];
// blue
data[i + 2] = 255 - data[i + 2];
}
};
})();

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();
});
});