diff --git a/Gruntfile.js b/Gruntfile.js index 0b723257..7a251f1d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -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 diff --git a/src/Factory.js b/src/Factory.js index 61a78947..12408a2a 100644 --- a/src/Factory.js +++ b/src/Factory.js @@ -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; - }; } }; })(); \ No newline at end of file diff --git a/src/filters/Blur.js b/src/filters/Blur.js index 3962598f..a9082d8d 100644 --- a/src/filters/Blur.js +++ b/src/filters/Blur.js @@ -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 diff --git a/src/filters/Brighten.js b/src/filters/Brighten.js index d3be228b..2bea0267 100644 --- a/src/filters/Brighten.js +++ b/src/filters/Brighten.js @@ -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. diff --git a/src/filters/Emboss.js b/src/filters/Emboss.js index f547a89a..b461e27a 100644 --- a/src/filters/Emboss.js +++ b/src/filters/Emboss.js @@ -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 diff --git a/src/filters/Enhance.js b/src/filters/Enhance.js index b8560987..44faa1c3 100644 --- a/src/filters/Enhance.js +++ b/src/filters/Enhance.js @@ -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 diff --git a/src/filters/HSV.js b/src/filters/HSV.js index aadff100..e0224cbf 100644 --- a/src/filters/HSV.js +++ b/src/filters/HSV.js @@ -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 diff --git a/src/filters/Kaleidoscope.js b/src/filters/Kaleidoscope.js index dc10b0c6..46cacea2 100644 --- a/src/filters/Kaleidoscope.js +++ b/src/filters/Kaleidoscope.js @@ -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 diff --git a/src/filters/Mask.js b/src/filters/Mask.js index b75365bc..ac0d1150 100644 --- a/src/filters/Mask.js +++ b/src/filters/Mask.js @@ -188,5 +188,5 @@ return imageData; }; - Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'threshold', 0); + Kinetic.Factory.addGetterSetter(Kinetic.Node, 'threshold', 0); })(); diff --git a/src/filters/Noise.js b/src/filters/Noise.js index 4aa30578..ba560696 100644 --- a/src/filters/Noise.js +++ b/src/filters/Noise.js @@ -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 diff --git a/src/filters/Pixelate.js b/src/filters/Pixelate.js index 1861522d..2c45ed81 100644 --- a/src/filters/Pixelate.js +++ b/src/filters/Pixelate.js @@ -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 diff --git a/src/filters/Posterize.js b/src/filters/Posterize.js index 9f985d80..ec96f715 100644 --- a/src/filters/Posterize.js +++ b/src/filters/Posterize.js @@ -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 diff --git a/src/filters/RGB.js b/src/filters/RGB.js index cc0ff96a..fe3d9a8a 100644 --- a/src/filters/RGB.js +++ b/src/filters/RGB.js @@ -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 diff --git a/src/filters/Ripple.js b/src/filters/Ripple.js deleted file mode 100644 index 088700c6..00000000 --- a/src/filters/Ripple.js +++ /dev/null @@ -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= 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 - -