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

Merge branch 'codefo-master'

Browse Source
This commit is contained in:
lavrton 2015-08-23 15:23:45 +07:00
commit 445cf25731
7 changed files with 300 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
gulpfile.js
View File

@ -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',

109
konva.js
View File

@ -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 () {
/**

8
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -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",

106
src/filters/RGBA.js Normal file
View File

@ -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}
*/
})();

2
test/runner.html
View File

@ -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>

78
test/unit/filters/RGBA-test.js Normal file
View File

@ -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();
});
});