RGBA filter added to gulp

gulpfile.js

@@ -34,6 +34,7 @@ var sourceFiles = [
     'src/filters/Blur.js',
     'src/filters/Mask.js',
     'src/filters/RGB.js',
+    'src/filters/RGBA.js',
     'src/filters/HSV.js',
     'src/filters/HSL.js',
     'src/filters/Emboss.js',

konva.js

@@ -3,7 +3,7 @@
  * Konva JavaScript Framework v0.9.9
  * http://konvajs.github.io/
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Tue Jun 02 2015
+ * Date: Tue Jun 09 2015
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@@ -4382,32 +4382,32 @@ var Konva = {};
     Konva.Collection.mapMethods(Konva.Node);
 })(Konva);
 
-(function() {
+(function() {
-    /**
+    /**
-    * Grayscale Filter
+    * Grayscale Filter
-    * @function
+    * @function
-    * @memberof Konva.Filters
+    * @memberof Konva.Filters
-    * @param {Object} imageData
+    * @param {Object} imageData
-    * @example
+    * @example
-    * node.cache();
+    * node.cache();
-    * node.filters([Konva.Filters.Grayscale]);
+    * node.filters([Konva.Filters.Grayscale]);
-    */
+    */
-    Konva.Filters.Grayscale = function(imageData) {
+    Konva.Filters.Grayscale = function(imageData) {
-        var data = imageData.data,
+        var data = imageData.data,
-            len = data.length,
+            len = data.length,
-            i, brightness;
+            i, brightness;
-
+
-        for(i = 0; i < len; i += 4) {
+        for(i = 0; i < len; i += 4) {
-            brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
+            brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
-            // red
+            // red
-            data[i] = brightness;
+            data[i] = brightness;
-            // green
+            // green
-            data[i + 1] = brightness;
+            data[i + 1] = brightness;
-            // blue
+            // blue
-            data[i + 2] = brightness;
+            data[i + 2] = brightness;
-        }
+        }
-    };
+    };
-})();
+})();
 
 (function() {
     /**
@@ -4449,31 +4449,31 @@ var Konva = {};
 
 })();
 
-(function() {
+(function() {
-    /**
+    /**
-    * Invert Filter
+    * Invert Filter
-    * @function
+    * @function
-    * @memberof Konva.Filters
+    * @memberof Konva.Filters
-    * @param {Object} imageData
+    * @param {Object} imageData
-    * @example
+    * @example
-    * node.cache();
+    * node.cache();
-    * node.filters([Konva.Filters.Invert]);
+    * node.filters([Konva.Filters.Invert]);
-    */
+    */
-    Konva.Filters.Invert = function(imageData) {
+    Konva.Filters.Invert = function(imageData) {
-        var data = imageData.data,
+        var data = imageData.data,
-            len = data.length,
+            len = data.length,
-            i;
+            i;
-
+
-        for(i = 0; i < len; i += 4) {
+        for(i = 0; i < len; i += 4) {
-            // red
+            // red
-            data[i] = 255 - data[i];
+            data[i] = 255 - data[i];
-            // green
+            // green
-            data[i + 1] = 255 - data[i + 1];
+            data[i + 1] = 255 - data[i + 1];
-            // blue
+            // blue
-            data[i + 2] = 255 - data[i + 2];
+            data[i + 2] = 255 - data[i + 2];
-        }
+        }
-    };
+    };
-})();
+})();
 
 /*
  the Gauss filter
@@ -5117,6 +5117,115 @@ var Konva = {};
     */
 })();
 
+(function () {
+    /**
+     * RGBA Filter
+     * @function
+     * @name RGBA
+     * @memberof Konva.Filters
+     * @param {Object} imageData
+     * @author codefo
+     * @example
+     * node.cache();
+     * node.filters([Konva.Filters.RGBA]);
+     * node.blue(120);
+     * node.green(200);
+     * node.alpha(0.3);
+     */
+    Konva.Filters.RGBA = function (imageData) {
+        var data = imageData.data,
+            nPixels = data.length,
+            red = this.red(),
+            green = this.green(),
+            blue = this.blue(),
+            alpha = this.alpha(),
+            i, brightness, ab, iab;
+
+        for (i = 0; i < nPixels; i += 4) {
+            brightness = (0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2])/255;
+            ab = alpha * brightness;
+            iab = (1 - alpha) * brightness;
+
+            data[i] = red * ab + data[i] * iab; // r
+            data[i + 1] = green * ab + data[i + 1] * iab; // g
+            data[i + 2] = blue * ab + data[i + 2] * iab; // b
+        }
+    };
+
+    Konva.Factory.addGetterSetter(Konva.Node, 'red', 0, function(val) {
+        this._filterUpToDate = false;
+        if (val > 255) {
+            return 255;
+        }
+        else if (val < 0) {
+            return 0;
+        }
+        else {
+            return Math.round(val);
+        }
+    });
+    /**
+    * get/set filter red value. Use with {@link Konva.Filters.RGBA} filter.
+    * @name red
+    * @method
+    * @memberof Konva.Node.prototype
+    * @param {Integer} red value between 0 and 255
+    * @returns {Integer}
+    */
+
+    Konva.Factory.addGetterSetter(Konva.Node, 'green', 0, function(val) {
+        this._filterUpToDate = false;
+        if (val > 255) {
+            return 255;
+        }
+        else if (val < 0) {
+            return 0;
+        }
+        else {
+            return Math.round(val);
+        }
+    });
+    /**
+    * get/set filter green value. Use with {@link Konva.Filters.RGBA} filter.
+    * @name green
+    * @method
+    * @memberof Konva.Node.prototype
+    * @param {Integer} green value between 0 and 255
+    * @returns {Integer}
+    */
+
+    Konva.Factory.addGetterSetter(Konva.Node, 'blue', 0, Konva.Validators.RGBComponent, Konva.Factory.afterSetFilter);
+    /**
+    * get/set filter blue value. Use with {@link Konva.Filters.RGBA} filter.
+    * @name blue
+    * @method
+    * @memberof Konva.Node.prototype
+    * @param {Integer} blue value between 0 and 255
+    * @returns {Integer}
+    */
+
+    Konva.Factory.addGetterSetter(Konva.Node, 'alpha', 0, function(val) {
+        this._filterUpToDate = false;
+        if (val > 1) {
+            return 1;
+        }
+        else if (val < 0) {
+            return 0;
+        }
+        else {
+            return val;
+        }
+    });
+    /**
+     * get/set filter alpha value. Use with {@link Konva.Filters.RGBA} filter.
+     * @name alpha
+     * @method
+     * @memberof Konva.Node.prototype
+     * @param {Float} alpha value between 0 and 1
+     * @returns {Float}
+     */
+})();
+
 (function () {
 
     /**
@@ -5644,179 +5753,179 @@ var Konva = {};
     */
 })();
 
-(function () {
+(function () {
+
+    /**
+     * Noise Filter. Randomly adds or substracts to the color channels
+     * @function
+     * @name Noise
+     * @memberof Konva.Filters
+     * @param {Object} imageData
+     * @author ippo615
+     * @example
+     * node.cache();
+     * node.filters([Konva.Filters.Noise]);
+     * node.noise(0.8);
+     */
+    Konva.Filters.Noise = function (imageData) {
+        var amount = this.noise() * 255,
+            data = imageData.data,
+            nPixels = data.length,
+            half = amount / 2,
+            i;
+
+        for (i = 0; i < nPixels; i += 4) {
+            data[i + 0] += half - 2 * half * Math.random();
+            data[i + 1] += half - 2 * half * Math.random();
+            data[i + 2] += half - 2 * half * Math.random();
+        }
+    };
+
+    Konva.Factory.addGetterSetter(Konva.Node, 'noise', 0.2, null, Konva.Factory.afterSetFilter);
+
+    /**
+    * get/set noise amount.  Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter.
+    * @name noise
+    * @method
+    * @memberof Konva.Node.prototype
+    * @param {Number} noise
+    * @returns {Number}
+    */
+})();
 
-    /**
+(function () {
-     * Noise Filter. Randomly adds or substracts to the color channels
+
-     * @function
+    /**
-     * @name Noise
+     * Pixelate Filter. Averages groups of pixels and redraws
-     * @memberof Konva.Filters
+     *  them as larger pixels
-     * @param {Object} imageData
+     * @function
-     * @author ippo615
+     * @name Pixelate
-     * @example
+     * @memberof Konva.Filters
-     * node.cache();
+     * @param {Object} imageData
-     * node.filters([Konva.Filters.Noise]);
+     * @author ippo615
-     * node.noise(0.8);
+     * @example
-     */
+     * node.cache();
-    Konva.Filters.Noise = function (imageData) {
+     * node.filters([Konva.Filters.Pixelate]);
-        var amount = this.noise() * 255,
+     * node.pixelSize(10);
-            data = imageData.data,
+     */
-            nPixels = data.length,
+
-            half = amount / 2,
+    Konva.Filters.Pixelate = function (imageData) {
-            i;
+
+        var pixelSize = Math.ceil(this.pixelSize()),
+            width = imageData.width,
+            height = imageData.height,
+            x, y, i,
+            //pixelsPerBin = pixelSize * pixelSize,
+            red, green, blue, alpha,
+            nBinsX = Math.ceil(width / pixelSize),
+            nBinsY = Math.ceil(height / pixelSize),
+            xBinStart, xBinEnd, yBinStart, yBinEnd,
+            xBin, yBin, pixelsInBin;
+        imageData = imageData.data;
+
+        for (xBin = 0; xBin < nBinsX; xBin += 1) {
+            for (yBin = 0; yBin < nBinsY; yBin += 1) {
+
+                // Initialize the color accumlators to 0
+                red = 0;
+                green = 0;
+                blue = 0;
+                alpha = 0;
+
+                // Determine which pixels are included in this bin
+                xBinStart = xBin * pixelSize;
+                xBinEnd = xBinStart + pixelSize;
+                yBinStart = yBin * pixelSize;
+                yBinEnd = yBinStart + pixelSize;
+
+                // Add all of the pixels to this bin!
+                pixelsInBin = 0;
+                for (x = xBinStart; x < xBinEnd; x += 1) {
+                    if( x >= width ){ continue; }
+                    for (y = yBinStart; y < yBinEnd; y += 1) {
+                        if( y >= height ){ continue; }
+                        i = (width * y + x) * 4;
+                        red += imageData[i + 0];
+                        green += imageData[i + 1];
+                        blue += imageData[i + 2];
+                        alpha += imageData[i + 3];
+                        pixelsInBin += 1;
+                    }
+                }
+
+                // Make sure the channels are between 0-255
+                red = red / pixelsInBin;
+                green = green / pixelsInBin;
+                blue = blue / pixelsInBin;
+
+                // Draw this bin
+                for (x = xBinStart; x < xBinEnd; x += 1) {
+                    if( x >= width ){ continue; }
+                    for (y = yBinStart; y < yBinEnd; y += 1) {
+                        if( y >= height ){ continue; }
+                        i = (width * y + x) * 4;
+                        imageData[i + 0] = red;
+                        imageData[i + 1] = green;
+                        imageData[i + 2] = blue;
+                        imageData[i + 3] = alpha;
+                    }
+                }
+            }
+        }
+
+    };
+
+    Konva.Factory.addGetterSetter(Konva.Node, 'pixelSize', 8, null, Konva.Factory.afterSetFilter);
+
+    /**
+    * get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter.
+    * @name pixelSize
+    * @method
+    * @memberof Konva.Node.prototype
+    * @param {Integer} pixelSize
+    * @returns {Integer}
+    */
+})();
 
-        for (i = 0; i < nPixels; i += 4) {
+(function () {
-            data[i + 0] += half - 2 * half * Math.random();
+
-            data[i + 1] += half - 2 * half * Math.random();
+    /**
-            data[i + 2] += half - 2 * half * Math.random();
+     * Threshold Filter. Pushes any value above the mid point to
-        }
+     *  the max and any value below the mid point to the min.
-    };
+     *  This affects the alpha channel.
-
+     * @function
-    Konva.Factory.addGetterSetter(Konva.Node, 'noise', 0.2, null, Konva.Factory.afterSetFilter);
+     * @name Threshold
-
+     * @memberof Konva.Filters
-    /**
+     * @param {Object} imageData
-    * get/set noise amount.  Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter.
+     * @author ippo615
-    * @name noise
+     * @example
-    * @method
+     * node.cache();
-    * @memberof Konva.Node.prototype
+     * node.filters([Konva.Filters.Threshold]);
-    * @param {Number} noise
+     * node.threshold(0.1);
-    * @returns {Number}
+     */
-    */
+
-})();
+    Konva.Filters.Threshold = function (imageData) {
-
+        var level = this.threshold() * 255,
-(function () {
+            data = imageData.data,
-
+            len = data.length,
-    /**
+            i;
-     * Pixelate Filter. Averages groups of pixels and redraws
+
-     *  them as larger pixels
+        for (i = 0; i < len; i += 1) {
-     * @function
+            data[i] = data[i] < level ? 0 : 255;
-     * @name Pixelate
+        }
-     * @memberof Konva.Filters
+    };
-     * @param {Object} imageData
+
-     * @author ippo615
+    Konva.Factory.addGetterSetter(Konva.Node, 'threshold', 0.5, null, Konva.Factory.afterSetFilter);
-     * @example
+
-     * node.cache();
+    /**
-     * node.filters([Konva.Filters.Pixelate]);
+    * get/set threshold.  Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter.
-     * node.pixelSize(10);
+    * @name threshold
-     */
+    * @method
-
+    * @memberof Konva.Node.prototype
-    Konva.Filters.Pixelate = function (imageData) {
+    * @param {Number} threshold
-
+    * @returns {Number}
-        var pixelSize = Math.ceil(this.pixelSize()),
+    */
-            width = imageData.width,
+})();
-            height = imageData.height,
-            x, y, i,
-            //pixelsPerBin = pixelSize * pixelSize,
-            red, green, blue, alpha,
-            nBinsX = Math.ceil(width / pixelSize),
-            nBinsY = Math.ceil(height / pixelSize),
-            xBinStart, xBinEnd, yBinStart, yBinEnd,
-            xBin, yBin, pixelsInBin;
-        imageData = imageData.data;
-
-        for (xBin = 0; xBin < nBinsX; xBin += 1) {
-            for (yBin = 0; yBin < nBinsY; yBin += 1) {
-
-                // Initialize the color accumlators to 0
-                red = 0;
-                green = 0;
-                blue = 0;
-                alpha = 0;
-
-                // Determine which pixels are included in this bin
-                xBinStart = xBin * pixelSize;
-                xBinEnd = xBinStart + pixelSize;
-                yBinStart = yBin * pixelSize;
-                yBinEnd = yBinStart + pixelSize;
-
-                // Add all of the pixels to this bin!
-                pixelsInBin = 0;
-                for (x = xBinStart; x < xBinEnd; x += 1) {
-                    if( x >= width ){ continue; }
-                    for (y = yBinStart; y < yBinEnd; y += 1) {
-                        if( y >= height ){ continue; }
-                        i = (width * y + x) * 4;
-                        red += imageData[i + 0];
-                        green += imageData[i + 1];
-                        blue += imageData[i + 2];
-                        alpha += imageData[i + 3];
-                        pixelsInBin += 1;
-                    }
-                }
-
-                // Make sure the channels are between 0-255
-                red = red / pixelsInBin;
-                green = green / pixelsInBin;
-                blue = blue / pixelsInBin;
-
-                // Draw this bin
-                for (x = xBinStart; x < xBinEnd; x += 1) {
-                    if( x >= width ){ continue; }
-                    for (y = yBinStart; y < yBinEnd; y += 1) {
-                        if( y >= height ){ continue; }
-                        i = (width * y + x) * 4;
-                        imageData[i + 0] = red;
-                        imageData[i + 1] = green;
-                        imageData[i + 2] = blue;
-                        imageData[i + 3] = alpha;
-                    }
-                }
-            }
-        }
-
-    };
-
-    Konva.Factory.addGetterSetter(Konva.Node, 'pixelSize', 8, null, Konva.Factory.afterSetFilter);
-
-    /**
-    * get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter.
-    * @name pixelSize
-    * @method
-    * @memberof Konva.Node.prototype
-    * @param {Integer} pixelSize
-    * @returns {Integer}
-    */
-})();
-
-(function () {
-
-    /**
-     * Threshold Filter. Pushes any value above the mid point to
-     *  the max and any value below the mid point to the min.
-     *  This affects the alpha channel.
-     * @function
-     * @name Threshold
-     * @memberof Konva.Filters
-     * @param {Object} imageData
-     * @author ippo615
-     * @example
-     * node.cache();
-     * node.filters([Konva.Filters.Threshold]);
-     * node.threshold(0.1);
-     */
-
-    Konva.Filters.Threshold = function (imageData) {
-        var level = this.threshold() * 255,
-            data = imageData.data,
-            len = data.length,
-            i;
-
-        for (i = 0; i < len; i += 1) {
-            data[i] = data[i] < level ? 0 : 255;
-        }
-    };
-
-    Konva.Factory.addGetterSetter(Konva.Node, 'threshold', 0.5, null, Konva.Factory.afterSetFilter);
-
-    /**
-    * get/set threshold.  Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter.
-    * @name threshold
-    * @method
-    * @memberof Konva.Node.prototype
-    * @param {Number} threshold
-    * @returns {Number}
-    */
-})();
 
 (function() {
     /**