mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
RGBA filter added to gulp
This commit is contained in:
Gleb Pospelov
parent
e5244fd4c5
commit
6831c51d5f
@ -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',
|
||||
|
||||
555
konva.js
555
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() {
|
||||
/**
|
||||
* Grayscale Filter
|
||||
* @function
|
||||
* @memberof Konva.Filters
|
||||
* @param {Object} imageData
|
||||
* @example
|
||||
* node.cache();
|
||||
* node.filters([Konva.Filters.Grayscale]);
|
||||
*/
|
||||
Konva.Filters.Grayscale = function(imageData) {
|
||||
var data = imageData.data,
|
||||
len = data.length,
|
||||
i, brightness;
|
||||
|
||||
for(i = 0; i < len; i += 4) {
|
||||
brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
|
||||
// red
|
||||
data[i] = brightness;
|
||||
// green
|
||||
data[i + 1] = brightness;
|
||||
// blue
|
||||
data[i + 2] = brightness;
|
||||
}
|
||||
};
|
||||
})();
|
||||
(function() {
|
||||
/**
|
||||
* Grayscale Filter
|
||||
* @function
|
||||
* @memberof Konva.Filters
|
||||
* @param {Object} imageData
|
||||
* @example
|
||||
* node.cache();
|
||||
* node.filters([Konva.Filters.Grayscale]);
|
||||
*/
|
||||
Konva.Filters.Grayscale = function(imageData) {
|
||||
var data = imageData.data,
|
||||
len = data.length,
|
||||
i, brightness;
|
||||
|
||||
for(i = 0; i < len; i += 4) {
|
||||
brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
|
||||
// red
|
||||
data[i] = brightness;
|
||||
// green
|
||||
data[i + 1] = brightness;
|
||||
// blue
|
||||
data[i + 2] = brightness;
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(function() {
|
||||
/**
|
||||
@ -4449,31 +4449,31 @@ var Konva = {};
|
||||
|
||||
})();
|
||||
|
||||
(function() {
|
||||
/**
|
||||
* Invert Filter
|
||||
* @function
|
||||
* @memberof Konva.Filters
|
||||
* @param {Object} imageData
|
||||
* @example
|
||||
* node.cache();
|
||||
* node.filters([Konva.Filters.Invert]);
|
||||
*/
|
||||
Konva.Filters.Invert = function(imageData) {
|
||||
var data = imageData.data,
|
||||
len = data.length,
|
||||
i;
|
||||
|
||||
for(i = 0; i < len; i += 4) {
|
||||
// red
|
||||
data[i] = 255 - data[i];
|
||||
// green
|
||||
data[i + 1] = 255 - data[i + 1];
|
||||
// blue
|
||||
data[i + 2] = 255 - data[i + 2];
|
||||
}
|
||||
};
|
||||
})();
|
||||
(function() {
|
||||
/**
|
||||
* Invert Filter
|
||||
* @function
|
||||
* @memberof Konva.Filters
|
||||
* @param {Object} imageData
|
||||
* @example
|
||||
* node.cache();
|
||||
* node.filters([Konva.Filters.Invert]);
|
||||
*/
|
||||
Konva.Filters.Invert = function(imageData) {
|
||||
var data = imageData.data,
|
||||
len = data.length,
|
||||
i;
|
||||
|
||||
for(i = 0; i < len; i += 4) {
|
||||
// red
|
||||
data[i] = 255 - data[i];
|
||||
// green
|
||||
data[i + 1] = 255 - data[i + 1];
|
||||
// blue
|
||||
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}
|
||||
*/
|
||||
})();
|
||||
|
||||
/**
|
||||
* 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;
|
||||
(function () {
|
||||
|
||||
/**
|
||||
* Pixelate Filter. Averages groups of pixels and redraws
|
||||
* them as larger pixels
|
||||
* @function
|
||||
* @name Pixelate
|
||||
* @memberof Konva.Filters
|
||||
* @param {Object} imageData
|
||||
* @author ippo615
|
||||
* @example
|
||||
* node.cache();
|
||||
* node.filters([Konva.Filters.Pixelate]);
|
||||
* node.pixelSize(10);
|
||||
*/
|
||||
|
||||
Konva.Filters.Pixelate = function (imageData) {
|
||||
|
||||
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) {
|
||||
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 () {
|
||||
|
||||
/**
|
||||
* Pixelate Filter. Averages groups of pixels and redraws
|
||||
* them as larger pixels
|
||||
* @function
|
||||
* @name Pixelate
|
||||
* @memberof Konva.Filters
|
||||
* @param {Object} imageData
|
||||
* @author ippo615
|
||||
* @example
|
||||
* node.cache();
|
||||
* node.filters([Konva.Filters.Pixelate]);
|
||||
* node.pixelSize(10);
|
||||
*/
|
||||
|
||||
Konva.Filters.Pixelate = function (imageData) {
|
||||
|
||||
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 () {
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
/**
|
||||
|
||||
8
konva.min.js
vendored
8
konva.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user