Merge branch 'codefo-master'

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: Fri Jun 19 2015
+ * Date: Sun Aug 23 2015
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@@ -5117,6 +5117,113 @@ 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, ia;
+
+        for (i = 0; i < nPixels; i += 4) {
+            ia = 1 - alpha;
+
+            data[i] = red * alpha + data[i] * ia; // r
+            data[i + 1] = green * alpha + data[i + 1] * ia; // g
+            data[i + 2] = blue * alpha + data[i + 2] * ia; // 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', 1, 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 () {
 
     /**

package.json

@@ -10,7 +10,7 @@
     "gulp-eslint": "^0.11.1",
     "gulp-jscpd": "0.0.3",
     "gulp-jsdoc": "^0.1.4",
-    "gulp-mocha-phantomjs": "^0.6.1",
+    "gulp-mocha-phantomjs": "^0.8.1",
     "gulp-rename": "^1.2.0",
     "gulp-replace": "^0.5.3",
     "gulp-uglify": "^1.1.0",

src/filters/RGBA.js

@@ -0,0 +1,106 @@
+(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, ia;
+
+        for (i = 0; i < nPixels; i += 4) {
+            ia = 1 - alpha;
+
+            data[i] = red * alpha + data[i] * ia; // r
+            data[i + 1] = green * alpha + data[i + 1] * ia; // g
+            data[i + 2] = blue * alpha + data[i + 2] * ia; // 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', 1, 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}
+     */
+})();

test/runner.html

@@ -49,6 +49,7 @@
     <script src="../src/filters/Blur.js" data-cover></script>
     <script src="../src/filters/Mask.js" data-cover></script>
     <script src="../src/filters/RGB.js" data-cover></script>
+    <script src="../src/filters/RGBA.js" data-cover></script>
     <script src="../src/filters/HSV.js" data-cover></script>
     <script src="../src/filters/HSL.js" data-cover></script>
     <script src="../src/filters/Emboss.js" data-cover></script>
@@ -154,6 +155,7 @@
     <script src="unit/filters/Blur-test.js"></script>
     <script src="unit/filters/Brighten-test.js"></script>
     <script src="unit/filters/RGB-test.js"></script>
+    <script src="unit/filters/RGBA-test.js"></script>
     <script src="unit/filters/HSV-test.js"></script>
     <script src="unit/filters/HSL-test.js"></script>
     <script src="unit/filters/Invert-test.js"></script>

test/unit/filters/RGBA-test.js

@@ -0,0 +1,78 @@
+suite('RGBA', function() {
+    // ======================================================
+    test('colorize basic', function(done) {
+        var data = [
+            {
+                color: '#ff0000',
+                filter: [170, 170, 170, 0.5],
+                // Actually 212 but in tests rounding half up
+                result: [213, 85, 85, 255]
+            },
+            {
+                color: '#2a6511',
+                filter: [242, 193, 168, 0.33],
+                result: [108, 131, 67, 255]
+            },
+            {
+                color: '#e4d526',
+                filter: [175, 98, 37, 0.79],
+                result: [186, 122, 37, 255]
+            },
+        ];
+
+        var stage = new Konva.Stage({
+            container: 'konva-container',
+            width: data.length,
+            height: 1
+        });
+
+        var layer = new Konva.Layer({
+            id: 'layer'
+        });
+
+        for (var i = 0; i < data.length; i += 1) {
+            var d = data[i];
+
+            var rect = new Konva.Rect({
+              x: i,
+              y: 0,
+              width: 1,
+              height: 1,
+              fill: d.color
+            });
+
+            rect.cache();
+
+            rect.red(d.filter[0]);
+            rect.green(d.filter[1]);
+            rect.blue(d.filter[2]);
+            rect.alpha(d.filter[3]);
+
+            rect.filters([Konva.Filters.RGBA]);
+            layer.add(rect);
+        }
+
+        stage.add(layer);
+        layer.batchDraw();
+
+        var context = layer.getCanvas().getContext();
+
+        var imageDataToArray = function (x) {
+            var imageData = context.getImageData(x, 0, 1, 1).data;
+
+            return [
+                imageData['0'], imageData['1'], imageData['2'], imageData['3']
+            ];
+        };
+
+        var a0 = imageDataToArray(0);
+        var a1 = imageDataToArray(1);
+        var a2 = imageDataToArray(2);
+
+        assert.deepEqual(a0, data[0].result);
+        assert.deepEqual(a1, data[1].result);
+        assert.deepEqual(a2, data[2].result);
+
+        done();
+    });
+});