lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

removed filter getter setter from factory. Filter methods now use addGetterSetter like all of the other classes

Browse Source
This commit is contained in:
Eric Rowell 2014-01-08 23:40:47 -08:00
parent f73baa1a4e
commit 749c8731db
16 changed files with 31 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gruntfile.js
View File

@ -24,7 +24,6 @@ module.exports = function(grunt) {
'src/filters/Threshold.js',
'src/filters/Sepia.js',
'src/filters/Solarize.js',
//'src/filters/Ripple.js',
'src/filters/Kaleidoscope.js',
// core

25
src/Factory.js
View File

@ -42,9 +42,9 @@
Y = 'y';
Kinetic.Factory = {
addGetterSetter: function(constructor, attr, def) {
addGetterSetter: function(constructor, attr, def, afterFunc) {
this.addGetter(constructor, attr, def);
this.addSetter(constructor, attr);
this.addSetter(constructor, attr, afterFunc);
this.addOverloadedGetterSetter(constructor, attr);
},
addGetter: function(constructor, attr, def) {
@ -56,15 +56,18 @@
return val === undefined ? def : val;
};
},
addSetter: function(constructor, attr) {
addSetter: function(constructor, attr, afterFunc) {
var method = SET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function(val) {
this._setAttr(attr, val);
if (afterFunc) {
afterFunc.call(this);
}
return this;
};
},
addComponentsGetterSetter: function(constructor, attr, components) {
addComponentsGetterSetter: function(constructor, attr, components, afterFunc) {
var len = components.length,
capitalize = Kinetic.Util._capitalize,
getter = GET + capitalize(attr),
@ -92,6 +95,10 @@
this._setAttr(attr + capitalize(key), val[key]);
}
if (afterFunc) {
afterFunc.call(this);
}
this._fireChangeEvent(attr, oldVal, val);
return this;
@ -198,16 +205,6 @@
this[prefix + RGB](obj);
return this;
};
},
addFilterSetter: function(constructor, attr) {
var method = SET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function(val) {
this._setAttr(attr, val);
this._filterUpToDate = false;
return this;
};
}
};
})();

2
src/filters/Blur.js
View File

@ -337,7 +337,7 @@
}
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'blurRadius', 0);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'blurRadius', 0, function() {this._filterUpToDate = false;});
/**
* get/set blur radius

2
src/filters/Brighten.js
View File

@ -21,7 +21,7 @@
}
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'brightness', 0);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'brightness', 0, function() {this._filterUpToDate = false;});
/**
* get/set filter brightness. The brightness is a number between -1 and 1.  Positive values
* brighten the pixels and negative values darken them.

8
src/filters/Emboss.js
View File

@ -123,7 +123,7 @@
} while (--y);
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'embossStrength', 0.5);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossStrength', 0.5, function() {this._filterUpToDate = false;});
/**
* get/set emboss strength
* @name embossStrength
@ -133,7 +133,7 @@
* @returns {Number}
*/
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'embossWhiteLevel', 0.5);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossWhiteLevel', 0.5, function() {this._filterUpToDate = false;});
/**
* get/set emboss white level
* @name embossWhiteLevel
@ -143,7 +143,7 @@
* @returns {Number}
*/
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'embossDirection', 'top-left');
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossDirection', 'top-left', function() {this._filterUpToDate = false;});
/**
* get/set emboss direction
* @name embossDirection
@ -154,7 +154,7 @@
* @returns {String}
*/
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'embossBlend', false);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossBlend', false, function() {this._filterUpToDate = false;});
/**
* get/set emboss blend
* @name embossBlend

2
src/filters/Enhance.js
View File

@ -105,7 +105,7 @@
}
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'enhance', 0);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'enhance', 0, function() {this._filterUpToDate = false;});
/**
* get/set enhance

6
src/filters/HSV.js
View File

@ -57,7 +57,7 @@
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'hue', 0);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'hue', 0, function() {this._filterUpToDate = false;});
/**
* get/set hsv hue in degrees
* @name hue
@ -67,7 +67,7 @@
* @returns {Number}
*/
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'saturation', 1);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'saturation', 1, function() {this._filterUpToDate = false;});
/**
* get/set hsv saturation
* @name saturation
@ -77,7 +77,7 @@
* @returns {Number}
*/
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'value', 1);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'value', 1, function() {this._filterUpToDate = false;});
/**
* get/set hsv value
* @name value

4
src/filters/Kaleidoscope.js
View File

@ -310,8 +310,8 @@
FromPolar(scratchData,imageData,{polarRotation:0});
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'kaleidoscopePower', 2);
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'kaleidoscopeAngle', 0);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'kaleidoscopePower', 2, function() {this._filterUpToDate = false;});
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'kaleidoscopeAngle', 0, function() {this._filterUpToDate = false;});
/**
* get/set kaleidoscope power

2
src/filters/Mask.js
View File

@ -188,5 +188,5 @@
return imageData;
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'threshold', 0);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'threshold', 0);
})();

2
src/filters/Noise.js
View File

@ -21,7 +21,7 @@
}
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'noise', 0.2);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'noise', 0.2, function() {this._filterUpToDate = false;});
/**
* get/set noise amount. Must be a value between 0 and 1

2
src/filters/Pixelate.js
View File

@ -76,7 +76,7 @@
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'pixelSize', 8);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'pixelSize', 8, function() {this._filterUpToDate = false;});
/**
* get/set pixel size

2
src/filters/Posterize.js
View File

@ -23,7 +23,7 @@
}
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'levels', 0.5);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'levels', 0.5, function() {this._filterUpToDate = false;});
/**
* get/set levels. Must be a number between 0 and 1

6
src/filters/RGB.js
View File

@ -23,7 +23,7 @@
}
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'red', 255);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'red', 255, function() {this._filterUpToDate = false;});
/**
* get/set filter red value
* @name red
@ -33,7 +33,7 @@
* @returns {Integer}
*/
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'green', 0);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'green', 0, function() {this._filterUpToDate = false;});
/**
* get/set filter green value
* @name green
@ -43,7 +43,7 @@
* @returns {Integer}
*/
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'blue', 0);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'blue', 0, function() {this._filterUpToDate = false;});
/**
* get/set filter blue value
* @name blue

311
src/filters/Ripple.js
View File

@ -1,311 +0,0 @@
(function () {
/*
* ToPolar Filter. Converts image data to polar coordinates. Performs
* w*h*4 pixel reads and w*h pixel writes. The r axis is placed along
* what would be the y axis and the theta axis along the x axis.
* @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
* @param {Number} [opt.polarCenterX] horizontal location for the center of the circle,
* default is in the middle
* @param {Number} [opt.polarCenterY] vertical location for the center of the circle,
* default is in the middle
*/
var ToPolar = function(src,dst,opt){
var srcPixels = src.data,
dstPixels = dst.data,
xSize = src.width,
ySize = src.height,
xMid = opt.polarCenterX || xSize/2,
yMid = opt.polarCenterY || ySize/2,
i, m, x, y, k, tmp, r=0,g=0,b=0,a=0;
// Find the largest radius
var rad, rMax = Math.sqrt( xMid*xMid + yMid*yMid );
x = xSize - xMid;
y = ySize - yMid;
rad = Math.sqrt( x*x + y*y );
rMax = (rad > rMax)?rad:rMax;
// We'll be uisng y as the radius, and x as the angle (theta=t)
var rSize = ySize,
tSize = xSize,
radius, theta;
// We want to cover all angles (0-360) and we need to convert to
// radians (*PI/180)
var conversion = 360/tSize*Math.PI/180, sin, cos;
var x1, x2, x1i, x2i, y1, y2, y1i, y2i, scale;
for( theta=0; theta<tSize; theta+=1 ){
sin = Math.sin(theta*conversion);
cos = Math.cos(theta*conversion);
for( radius=0; radius<rSize; radius+=1 ){
x = xMid+rMax*radius/rSize*cos;
y = yMid+rMax*radius/rSize*sin;
if( x <= 1 ){ x = 1; }
if( x >= xSize-0.5 ){ x = xSize-1; }
if( y <= 1 ){ y = 1; }
if( y >= ySize-0.5 ){ y = ySize-1; }
// Interpolate x and y by going +-0.5 around the pixel's central point
// this gives us the 4 nearest pixels to our 1x1 non-aligned pixel.
// We average the vaules of those pixels based on how much of our
// non-aligned pixel overlaps each of them.
x1 = x - 0.5;
x2 = x + 0.5;
x1i = Math.floor(x1);
x2i = Math.floor(x2);
y1 = y - 0.5;
y2 = y + 0.5;
y1i = Math.floor(y1);
y2i = Math.floor(y2);
scale = (1-(x1-x1i))*(1-(y1-y1i));
i = (y1i*xSize + x1i)*4;
r = srcPixels[i+0]*scale;
g = srcPixels[i+1]*scale;
b = srcPixels[i+2]*scale;
a = srcPixels[i+3]*scale;
scale = (1-(x1-x1i))*(y2-y2i);
i = (y2i*xSize + x1i)*4;
r += srcPixels[i+0]*scale;
g += srcPixels[i+1]*scale;
b += srcPixels[i+2]*scale;
a += srcPixels[i+3]*scale;
scale = (x2-x2i)*(y2-y2i);
i = (y2i*xSize + x2i)*4;
r += srcPixels[i+0]*scale;
g += srcPixels[i+1]*scale;
b += srcPixels[i+2]*scale;
a += srcPixels[i+3]*scale;
scale = (x2-x2i)*(1-(y1-y1i));
i = (y1i*xSize + x2i)*4;
r += srcPixels[i+0]*scale;
g += srcPixels[i+1]*scale;
b += srcPixels[i+2]*scale;
a += srcPixels[i+3]*scale;
// Store it
//i = (theta * xSize + radius) * 4;
i = (theta + radius*xSize) * 4;
dstPixels[i+0] = r;
dstPixels[i+1] = g;
dstPixels[i+2] = b;
dstPixels[i+3] = a;
}
}
};
/*
* FromPolar Filter. Converts image data from polar coordinates back to rectangular.
* Performs w*h*4 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
* @param {Number} [opt.polarCenterX] horizontal location for the center of the circle,
* default is in the middle
* @param {Number} [opt.polarCenterY] vertical location for the center of the circle,
* default is in the middle
* @param {Number} [opt.polarRotation] amount to rotate the image counterclockwis,
* 0 is no rotation, 360 degrees is a full rotation
*/
var FromPolar = function(src,dst,opt){
var srcPixels = src.data,
dstPixels = dst.data,
xSize = src.width,
ySize = src.height,
xMid = opt.polarCenterX || xSize/2,
yMid = opt.polarCenterY || ySize/2,
i, m, x, y, dx, dy, k, tmp, r=0,g=0,b=0,a=0;
// Find the largest radius
var rad, rMax = Math.sqrt( xMid*xMid + yMid*yMid );
x = xSize - xMid;
y = ySize - yMid;
rad = Math.sqrt( x*x + y*y );
rMax = (rad > rMax)?rad:rMax;
// We'll be uisng x as the radius, and y as the angle (theta=t)
var rSize = ySize,
tSize = xSize,
radius, theta,
phaseShift = opt.polarRotation || 0;
// We need to convert to degrees and we need to make sure
// it's between (0-360)
// var conversion = tSize/360*180/Math.PI;
var conversion = tSize/360*180/Math.PI;
var x1, x2, x1i, x2i, y1, y2, y1i, y2i, scale;
for( x=0; x<xSize; x+=1 ){
for( y=0; y<ySize; y+=1 ){
dx = x - xMid;
dy = y - yMid;
radius = Math.sqrt(dx*dx + dy*dy)*rSize/rMax;
theta = (Math.atan2(dy,dx)*180/Math.PI + 360 + phaseShift)%360;
theta = theta*tSize/360;
// Interpolate x and y by going +-0.5 around the pixel's central point
// this gives us the 4 nearest pixels to our 1x1 non-aligned pixel.
// We average the vaules of those pixels based on how much of our
// non-aligned pixel overlaps each of them.
x1 = theta - 0.5;
x2 = theta + 0.5;
x1i = Math.floor(x1);
x2i = Math.floor(x2);
y1 = radius - 0.5;
y2 = radius + 0.5;
y1i = Math.floor(y1);
y2i = Math.floor(y2);
scale = (1-(x1-x1i))*(1-(y1-y1i));
i = (y1i*xSize + x1i)*4;
r = srcPixels[i+0]*scale;
g = srcPixels[i+1]*scale;
b = srcPixels[i+2]*scale;
a = srcPixels[i+3]*scale;
scale = (1-(x1-x1i))*(y2-y2i);
i = (y2i*xSize + x1i)*4;
r += srcPixels[i+0]*scale;
g += srcPixels[i+1]*scale;
b += srcPixels[i+2]*scale;
a += srcPixels[i+3]*scale;
scale = (x2-x2i)*(y2-y2i);
i = (y2i*xSize + x2i)*4;
r += srcPixels[i+0]*scale;
g += srcPixels[i+1]*scale;
b += srcPixels[i+2]*scale;
a += srcPixels[i+3]*scale;
scale = (x2-x2i)*(1-(y1-y1i));
i = (y1i*xSize + x2i)*4;
r += srcPixels[i+0]*scale;
g += srcPixels[i+1]*scale;
b += srcPixels[i+2]*scale;
a += srcPixels[i+3]*scale;
// Store it
i = (y*xSize + x)*4;
dstPixels[i+0] = r;
dstPixels[i+1] = g;
dstPixels[i+2] = b;
dstPixels[i+3] = a;
}
}
};
//Kinetic.Filters.ToPolar = Kinetic.Util._FilterWrapDoubleBuffer(ToPolar);
//Kinetic.Filters.FromPolar = Kinetic.Util._FilterWrapDoubleBuffer(FromPolar);
// create a temporary canvas for working - shared between multiple calls
var tempCanvas = document.createElement('canvas');
/*
* Ripple Filter.
* @function
* @author ippo615
* @memberof Kinetic.Filters
*/
Kinetic.Filters.Ripple = function(imageData){
var xSize = imageData.width,
ySize = imageData.height;
var rippleSize = Math.ceil( this.rippleSize() || 5 );
var rippleOffset = this.rippleOffset() || 0;
// Work with our shared buffer canvas
tempCanvas.width = xSize;
tempCanvas.height = ySize;
var scratchData = tempCanvas.getContext('2d').getImageData(0,0,xSize,ySize);
// Convert thhe original to polar coordinates
ToPolar( imageData, scratchData, {
polarCenterX:xSize/2,
polarCenterY:ySize/2
});
// Copy/repeat a section along the r axis for effect
//var nCopies = 8;
//var sectionHeight = Math.floor(ySize/nCopies);
var nCopies = Math.ceil(ySize/rippleSize);
var sectionHeight = rippleSize;
var x,y,yoff,i, r,g,b,a, srcPos, dstPos;
for( x=0; x<xSize; x+=1 ){
for( y=0; y<sectionHeight; y+=1 ){
yoff = Math.round(y+rippleOffset) % ySize;
srcPos = (xSize*yoff+x)*4;
r = scratchData.data[srcPos+0];
g = scratchData.data[srcPos+1];
b = scratchData.data[srcPos+2];
a = scratchData.data[srcPos+3];
dstPos = (xSize*(y)+x)*4;
scratchData.data[dstPos+0] = r;
scratchData.data[dstPos+1] = g;
scratchData.data[dstPos+2] = b;
scratchData.data[dstPos+3] = a;
}
}
for( x=0; x<xSize; x+=1 ){
for( y=0; y<sectionHeight; y+=1 ){
yoff = Math.round(y+rippleOffset) % ySize;
srcPos = (xSize*y+x)*4;
r = scratchData.data[srcPos+0];
g = scratchData.data[srcPos+1];
b = scratchData.data[srcPos+2];
a = scratchData.data[srcPos+3];
for( i=1; i<nCopies; i+=1 ){
dstPos = (xSize*(sectionHeight*i+y)+x)*4;
scratchData.data[dstPos+0] = r;
scratchData.data[dstPos+1] = g;
scratchData.data[dstPos+2] = b;
scratchData.data[dstPos+3] = a;
}
}
}
// Convert back from polar coordinates
FromPolar(scratchData,imageData,{});
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'rippleSize', 16);
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'rippleOffset', 0);
/**
* get/set ripple size
* @name rippleSize
* @method
* @memberof Kinetic.Node.prototype
* @param {Integer} radius
* @returns {Integer}
*/
/**
* get/set ripple offset
* @name rippleOffset
* @method
* @memberof Kinetic.Node.prototype
* @param {Integer} offset
* @returns {Integer}
*/
})();

2
src/filters/Threshold.js
View File

@ -21,7 +21,7 @@
}
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'threshold', 0.5);
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'threshold', 0.5, function() {this._filterUpToDate = false;});
/**
* get/set threshold. Must be a value between 0 and 1

5
test/runner.html
View File

@ -95,11 +95,6 @@
<script src="unit/filters/Emboss-test.js"></script>
<script src="unit/filters/Solarize-test.js"></script>
<script src="unit/filters/Kaleidoscope-test.js"></script>
<!--
<script src="unit/filters/Ripple-test.js"></script>
-->
<!--=============== functional tests ================-->