lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Updated some filters and tests.

Browse Source
This commit is contained in:
ippo615
2013-12-05 18:20:00 -05:00
parent 52f96c540b
commit 2c3a29681e
7 changed files with 308 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/filters/Grayscale.js
View File

@@ -25,6 +25,12 @@
}
};
Kinetic.Filters.Grayscale = Kinetic.Util._FilterWrapSingleBuffer(Grayscale);
Kinetic.Filters.Grayscale = function(src,dst,opt){
if( this === Kinetic.Filters ){
Grayscale(src, dst||src, opt );
}else{
Grayscale.call(this, src, dst||src, {} );
}
};
})();

8
src/filters/Invert.js
View File

@@ -26,5 +26,11 @@
}
};
Kinetic.Filters.Invert = Kinetic.Util._FilterWrapSingleBuffer(Invert);
Kinetic.Filters.Invert = function(src,dst,opt){
if( this === Kinetic.Filters ){
Invert(src, dst||src, opt );
}else{
Invert.call(this, src, dst||src, {} );
}
};
})();

2
src/filters/Pixelate.js
View File

@@ -98,7 +98,7 @@
pixelHeight: this.getPixelHeight()
});
}
};//Kinetic.Util._FilterWrapSingleBuffer(Pixelate);
};
/**
* get filter pixel width. Returns the width of a pixelated pixel. Must be

80
src/filters/Sepia.js
View File

@@ -1,8 +1,8 @@
(function() {
/**
* Sepia Filter
* Based on: Pixastic Lib - Sepia filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* Based on: Pixastic Lib - Sepia filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
@@ -10,40 +10,50 @@
* @license MPL v1.1 [http://www.pixastic.com/lib/license.txt]
*/
Kinetic.Filters.Sepia = function(imageData) {
var data = imageData.data,
w = imageData.width,
y = imageData.height,
w4 = w*4,
offsetY,
x,
offset,
or,
og,
ob,
r,
g,
b;
do {
offsetY = (y-1)*w4;
x = w;
do {
offset = offsetY + (x-1)*4;
or = data[offset];
og = data[offset+1];
ob = data[offset+2];
var Sepia = function (src, dst, opt) {
var data = src.data,
w = src.width,
y = src.height,
dstData = dst.data,
w4 = w*4,
offsetY,
x,
offset,
or,
og,
ob,
r,
g,
b;
do {
offsetY = (y-1)*w4;
x = w;
do {
offset = offsetY + (x-1)*4;
or = data[offset];
og = data[offset+1];
ob = data[offset+2];
r = or * 0.393 + og * 0.769 + ob * 0.189;
g = or * 0.349 + og * 0.686 + ob * 0.168;
b = or * 0.272 + og * 0.534 + ob * 0.131;
r = or * 0.393 + og * 0.769 + ob * 0.189;
g = or * 0.349 + og * 0.686 + ob * 0.168;
b = or * 0.272 + og * 0.534 + ob * 0.131;
data[offset] = r > 255 ? 255 : r;
data[offset+1] = g > 255 ? 255 : g;
data[offset+2] = b > 255 ? 255 : b;
} while (--x);
} while (--y);
dstData[offset] = r > 255 ? 255 : r;
dstData[offset+1] = g > 255 ? 255 : g;
dstData[offset+2] = b > 255 ? 255 : b;
dstData[offset+3] = data[offset+3];
} while (--x);
} while (--y);
};
})();
Kinetic.Filters.Sepia = function(src,dst,opt){
if( this === Kinetic.Filters ){
Sepia(src, dst||src, opt );
}else{
Sepia.call(this, src, dst||src, {} );
}
};
})();

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

@@ -81,4 +81,68 @@ suite('Invert', 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.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();
});
});

65
test/unit/filters/Polar-test.js
View File

@@ -260,4 +260,69 @@ suite('Polar Coordinates', function () {
done();
});
// ======================================================
test('pixelate', function (done) {
var stage = addStage();
var shapesLayer = new Kinetic.Layer();
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.ToPolar(imageData,scratchData,{polarCenterX:this.getWidth()/2,polarCenterY:this.getHeight()/2});
Kinetic.Filters.Pixelate(scratchData,imageData,{pixelWidth:8,pixelHeight:8});
Kinetic.Filters.FromPolar(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();
});
});

120
test/unit/filters/Sepia-test.js
View File

@@ -1,4 +1,4 @@
suite('Sepia', function() {
suite('Filter Sepia', function() {
// ======================================================
test('basic', function(done) {
var stage = addStage();
@@ -25,4 +25,122 @@ suite('Sepia', function() {
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('crop', 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,
crop: {x:128, y:48, width:256, height:128},
filter: Kinetic.Filters.Sepia,
draggable: true
});
layer.add(darth);
stage.add(layer);
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('with transparency', 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.Sepia);
layer.draw();
done();
};
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.Sepia(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();
});
});