mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
split ColorPack into RGB and HSV filters. updated tests
This commit is contained in:
Eric Rowell
parent
5060fbb8cb
commit
dcf2962e2e
@ -15,7 +15,8 @@ module.exports = function(grunt) {
|
||||
'src/filters/Invert.js',
|
||||
'src/filters/Blur.js',
|
||||
'src/filters/Mask.js',
|
||||
'src/filters/ColorPack.js',
|
||||
'src/filters/RGB.js',
|
||||
'src/filters/HSV.js',
|
||||
'src/filters/ConvolvePack.js',
|
||||
'src/filters/Enhance.js',
|
||||
'src/filters/Levels.js',
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'brightness', 0);
|
||||
/**
|
||||
* get/set filter brightness. The brightness is a number between -1 and 1. Positive values
|
||||
* brighten the node and negative values darken it.
|
||||
* brighten the pixels and negative values darken them.
|
||||
* @name brightness
|
||||
* @method
|
||||
* @memberof Kinetic.Image.prototype
|
||||
|
||||
@ -1,202 +1,136 @@
|
||||
(function () {
|
||||
|
||||
/**
|
||||
* HSV Filter. Adjusts the hue, saturation and value of an image.
|
||||
* Performs w*h 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.hue] amount to shift to the hue (in degrees)
|
||||
* 0 represents no shift, while 360 is the maximum. Default: 0
|
||||
* @param {Number} [opt.saturation] amount to scale the saturation.
|
||||
* 1 means no change, 0.5 halves (more gray), 2.0 doubles
|
||||
* (more color), etc... Default is 1.
|
||||
* @param {Number} [opt.value] amount to scale the value.
|
||||
* 1 means no change, 0.5 halves (darker), 2.0 doubles (lighter), etc..
|
||||
* Default is 1.
|
||||
*/
|
||||
|
||||
var HSV = function (src, dst, opt) {
|
||||
var srcPixels = src.data,
|
||||
dstPixels = dst.data,
|
||||
nPixels = srcPixels.length,
|
||||
i;
|
||||
|
||||
var v = opt.value || 1,
|
||||
s = opt.saturation || 1,
|
||||
h = Math.abs((opt.hue || 0) + 360) % 360;
|
||||
|
||||
// Basis for the technique used:
|
||||
// http://beesbuzz.biz/code/hsv_color_transforms.php
|
||||
// V is the value multiplier (1 for none, 2 for double, 0.5 for half)
|
||||
// S is the saturation multiplier (1 for none, 2 for double, 0.5 for half)
|
||||
// H is the hue shift in degrees (0 to 360)
|
||||
// vsu = V*S*cos(H*PI/180);
|
||||
// vsw = V*S*sin(H*PI/180);
|
||||
//[ .299V+.701vsu+.168vsw .587V-.587vsu+.330vsw .114V-.114vsu-.497vsw ] [R]
|
||||
//[ .299V-.299vsu-.328vsw .587V+.413vsu+.035vsw .114V-.114vsu+.292vsw ]*[G]
|
||||
//[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]
|
||||
|
||||
// Precompute the values in the matrix:
|
||||
var vsu = v*s*Math.cos(h*Math.PI/180),
|
||||
vsw = v*s*Math.sin(h*Math.PI/180);
|
||||
// (result spot)(source spot)
|
||||
var rr = 0.299*v+0.701*vsu+0.167*vsw,
|
||||
rg = 0.587*v-0.587*vsu+0.330*vsw,
|
||||
rb = 0.114*v-0.114*vsu-0.497*vsw;
|
||||
var gr = 0.299*v-0.299*vsu-0.328*vsw,
|
||||
gg = 0.587*v+0.413*vsu+0.035*vsw,
|
||||
gb = 0.114*v-0.114*vsu+0.293*vsw;
|
||||
var br = 0.299*v-0.300*vsu+1.250*vsw,
|
||||
bg = 0.587*v-0.586*vsu-1.050*vsw,
|
||||
bb = 0.114*v+0.886*vsu-0.200*vsw;
|
||||
|
||||
var r,g,b,a;
|
||||
|
||||
for (i = 0; i < nPixels; i += 4) {
|
||||
r = srcPixels[i+0];
|
||||
g = srcPixels[i+1];
|
||||
b = srcPixels[i+2];
|
||||
a = srcPixels[i+3];
|
||||
|
||||
dstPixels[i+0] = rr*r + rg*g + rb*b;
|
||||
dstPixels[i+1] = gr*r + gg*g + gb*b;
|
||||
dstPixels[i+2] = br*r + bg*g + bb*b;
|
||||
dstPixels[i+3] = a; // alpha
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'hue', 0);
|
||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'saturation', 1);
|
||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'value', 1);
|
||||
|
||||
Kinetic.Filters.HSV = function(src,dst,opt){
|
||||
if( this === Kinetic.Filters ){
|
||||
HSV(src, dst||src, opt );
|
||||
}else{
|
||||
HSV.call(this, src, dst||src, opt || {
|
||||
hue: this.hue(),
|
||||
saturation: this.saturation(),
|
||||
value: this.value()
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// For compatibility with older hue shift stuff
|
||||
Kinetic.Filters.ShiftHue = function(src,dst,opt){
|
||||
if( this === Kinetic.Filters ){
|
||||
HSV(src, dst||src, opt );
|
||||
}else{
|
||||
HSV.call(this, src, dst||src, opt || {
|
||||
hue: this.hueShiftDeg()
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'hueShiftDeg', 0);
|
||||
|
||||
/**
|
||||
* get filter hue. Returns the hue shift for the HSV filter.
|
||||
* 0 is no change, 359 is the maximum shift.
|
||||
* @name getFilterHue
|
||||
* @method
|
||||
* @memberof Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* set filter hue. Sets the hue shift for the HSV filter.
|
||||
* 0 is no change, 359 is the maximum shift.
|
||||
* @name setFilterHue
|
||||
* @method
|
||||
* @memberof Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get filter saturation. Returns the saturation scale for the HSV
|
||||
* filter. 1 is no change, 0.5 halves the saturation, 2.0 doubles, etc..
|
||||
* @name getFilterSaturation
|
||||
* @method
|
||||
* @memberof Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* set filter saturation. Set the saturation scale for the HSV
|
||||
* filter. 1 is no change, 0.5 halves the saturation, 2.0 doubles, etc..
|
||||
* @name setFilterSaturation
|
||||
* @method
|
||||
* @memberof Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get filter value. Returns the value scale for the HSV
|
||||
* filter. 1 is no change, 0.5 halves the value, 2.0 doubles, etc..
|
||||
* @name getFilterValue
|
||||
* @method
|
||||
* @memberof Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* set filter value. Set the value scale for the HSV
|
||||
* filter. 1 is no change, 0.5 halves the value, 2.0 doubles, etc..
|
||||
* @name setFilterValue
|
||||
* @method
|
||||
* @memberof Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Colorize Filter.
|
||||
* colorizes the image so that it is just varying shades of the specified color
|
||||
* @function
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {Object} imageData
|
||||
* @author ippo615
|
||||
*/
|
||||
var Colorize = function (src, dst, opt) {
|
||||
var srcPixels = src.data,
|
||||
dstPixels = dst.data,
|
||||
nPixels = srcPixels.length,
|
||||
color = opt.colorizeColor || [255,0,0],
|
||||
i, brightness;
|
||||
|
||||
for (i = 0; i < nPixels; i += 4) {
|
||||
brightness = (0.34 * srcPixels[i] + 0.5 * srcPixels[i + 1] + 0.16 * srcPixels[i + 2])/255;
|
||||
dstPixels[i ] = brightness*color[0]; // r
|
||||
dstPixels[i + 1] = brightness*color[1]; // g
|
||||
dstPixels[i + 2] = brightness*color[2]; // b
|
||||
dstPixels[i + 3] = srcPixels[i + 3]; // alpha
|
||||
}
|
||||
};
|
||||
|
||||
Kinetic.Filters.Colorize = function(src,dst,opt){
|
||||
if( this === Kinetic.Filters ){
|
||||
Colorize(src, dst||src, opt );
|
||||
}else{
|
||||
Colorize.call(this, src, dst||src, opt || {
|
||||
colorizeColor: this.color()
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'color', [255,0,0] );
|
||||
/**
|
||||
* Gets the colorizing color.
|
||||
* @name getFilterColorizeColor
|
||||
* @method
|
||||
* @memberof Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* Sets the colorizing color. Should be an array [r,g,b] ie [255,0,128] is a magenta color.
|
||||
* @name setFilterColorizeColor
|
||||
* @method
|
||||
* @memberof Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
})();
|
||||
(function () {
|
||||
|
||||
/**
|
||||
* HSV Filter. Adjusts the hue, saturation and value of an image.
|
||||
* Performs w*h 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.hue] amount to shift to the hue (in degrees)
|
||||
* 0 represents no shift, while 360 is the maximum. Default: 0
|
||||
* @param {Number} [opt.saturation] amount to scale the saturation.
|
||||
* 1 means no change, 0.5 halves (more gray), 2.0 doubles
|
||||
* (more color), etc... Default is 1.
|
||||
* @param {Number} [opt.value] amount to scale the value.
|
||||
* 1 means no change, 0.5 halves (darker), 2.0 doubles (lighter), etc..
|
||||
* Default is 1.
|
||||
*/
|
||||
|
||||
var HSV = function (src, dst, opt) {
|
||||
var srcPixels = src.data,
|
||||
dstPixels = dst.data,
|
||||
nPixels = srcPixels.length,
|
||||
i;
|
||||
|
||||
var v = opt.value || 1,
|
||||
s = opt.saturation || 1,
|
||||
h = Math.abs((opt.hue || 0) + 360) % 360;
|
||||
|
||||
// Basis for the technique used:
|
||||
// http://beesbuzz.biz/code/hsv_color_transforms.php
|
||||
// V is the value multiplier (1 for none, 2 for double, 0.5 for half)
|
||||
// S is the saturation multiplier (1 for none, 2 for double, 0.5 for half)
|
||||
// H is the hue shift in degrees (0 to 360)
|
||||
// vsu = V*S*cos(H*PI/180);
|
||||
// vsw = V*S*sin(H*PI/180);
|
||||
//[ .299V+.701vsu+.168vsw .587V-.587vsu+.330vsw .114V-.114vsu-.497vsw ] [R]
|
||||
//[ .299V-.299vsu-.328vsw .587V+.413vsu+.035vsw .114V-.114vsu+.292vsw ]*[G]
|
||||
//[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]
|
||||
|
||||
// Precompute the values in the matrix:
|
||||
var vsu = v*s*Math.cos(h*Math.PI/180),
|
||||
vsw = v*s*Math.sin(h*Math.PI/180);
|
||||
// (result spot)(source spot)
|
||||
var rr = 0.299*v+0.701*vsu+0.167*vsw,
|
||||
rg = 0.587*v-0.587*vsu+0.330*vsw,
|
||||
rb = 0.114*v-0.114*vsu-0.497*vsw;
|
||||
var gr = 0.299*v-0.299*vsu-0.328*vsw,
|
||||
gg = 0.587*v+0.413*vsu+0.035*vsw,
|
||||
gb = 0.114*v-0.114*vsu+0.293*vsw;
|
||||
var br = 0.299*v-0.300*vsu+1.250*vsw,
|
||||
bg = 0.587*v-0.586*vsu-1.050*vsw,
|
||||
bb = 0.114*v+0.886*vsu-0.200*vsw;
|
||||
|
||||
var r,g,b,a;
|
||||
|
||||
for (i = 0; i < nPixels; i += 4) {
|
||||
r = srcPixels[i+0];
|
||||
g = srcPixels[i+1];
|
||||
b = srcPixels[i+2];
|
||||
a = srcPixels[i+3];
|
||||
|
||||
dstPixels[i+0] = rr*r + rg*g + rb*b;
|
||||
dstPixels[i+1] = gr*r + gg*g + gb*b;
|
||||
dstPixels[i+2] = br*r + bg*g + bb*b;
|
||||
dstPixels[i+3] = a; // alpha
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Kinetic.Filters.HSV = function(src,dst,opt){
|
||||
if( this === Kinetic.Filters ){
|
||||
HSV(src, dst||src, opt );
|
||||
}else{
|
||||
HSV.call(this, src, dst||src, opt || {
|
||||
hue: this.hue(),
|
||||
saturation: this.saturation(),
|
||||
value: this.value()
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// For compatibility with older hue shift stuff
|
||||
Kinetic.Filters.ShiftHue = function(src,dst,opt){
|
||||
if( this === Kinetic.Filters ){
|
||||
HSV(src, dst||src, opt );
|
||||
}else{
|
||||
HSV.call(this, src, dst||src, opt || {
|
||||
hue: this.hueShiftDeg()
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'hue', 0);
|
||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'hueShift', 0);
|
||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'saturation', 1);
|
||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'value', 1);
|
||||
|
||||
/**
|
||||
* get/set hsv hue in degrees
|
||||
* @name hue
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Number} hue value between 0 and 359
|
||||
* @returns {Number}
|
||||
*/
|
||||
|
||||
/**
|
||||
* get/set hsv hueShift in degrees
|
||||
* @name hueShift
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Number} hue value between 0 and 359
|
||||
* @returns {Number}
|
||||
*/
|
||||
|
||||
/**
|
||||
* get/set hsv saturation
|
||||
* @name saturation
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Number} saturation 1 is no change, 0.5 halves the saturation, 2.0 doubles, etc..
|
||||
* @returns {Number}
|
||||
*/
|
||||
|
||||
/**
|
||||
* get/set hsv value
|
||||
* @name value
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Number} value 1 is no change, 0.5 halves the value, 2.0 doubles, etc..
|
||||
* @returns {Number}
|
||||
*/
|
||||
})();
|
||||
56
src/filters/RGB.js
Normal file
56
src/filters/RGB.js
Normal file
@ -0,0 +1,56 @@
|
||||
(function () {
|
||||
/**
|
||||
* RGB Filter
|
||||
* @function
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {Object} imageData
|
||||
* @author ippo615
|
||||
*/
|
||||
Kinetic.Filters.RGB = function (imageData) {
|
||||
var data = imageData.data,
|
||||
nPixels = data.length,
|
||||
red = this.red(),
|
||||
green = this.green(),
|
||||
blue = this.blue(),
|
||||
i, brightness;
|
||||
|
||||
for (i = 0; i < nPixels; i += 4) {
|
||||
brightness = (0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2])/255;
|
||||
data[i ] = brightness*red; // r
|
||||
data[i + 1] = brightness*green; // g
|
||||
data[i + 2] = brightness*blue; // b
|
||||
data[i + 3] = data[i + 3]; // alpha
|
||||
}
|
||||
};
|
||||
|
||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'red', 255);
|
||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'green', 0);
|
||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'blue', 0);
|
||||
|
||||
/**
|
||||
* get/set filter red value
|
||||
* @name red
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Integer} red value between 0 and 255
|
||||
* @returns {Integer}
|
||||
*/
|
||||
|
||||
/**
|
||||
* get/set filter green value
|
||||
* @name green
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Integer} green value between 0 and 255
|
||||
* @returns {Integer}
|
||||
*/
|
||||
|
||||
/**
|
||||
* get/set filter blue value
|
||||
* @name blue
|
||||
* @method
|
||||
* @memberof Kinetic.Node.prototype
|
||||
* @param {Integer} blue value between 0 and 255
|
||||
* @returns {Integer}
|
||||
*/
|
||||
})();
|
||||
@ -9,7 +9,6 @@
|
||||
* @author Jacob Seidelin <jseidelin@nihilogic.dk>
|
||||
* @license MPL v1.1 [http://www.pixastic.com/lib/license.txt]
|
||||
*/
|
||||
|
||||
Kinetic.Filters.Sepia = function (imageData) {
|
||||
var data = imageData.data,
|
||||
w = imageData.width,
|
||||
@ -38,6 +37,4 @@
|
||||
} while (--x);
|
||||
} while (--y);
|
||||
};
|
||||
|
||||
|
||||
})();
|
||||
|
||||
@ -81,7 +81,8 @@
|
||||
<!-- filters -->
|
||||
<script src="unit/filters/Blur-test.js"></script>
|
||||
<script src="unit/filters/Brighten-test.js"></script>
|
||||
<!--<script src="unit/filters/ColorPack-test.js"></script>-->
|
||||
<script src="unit/filters/RGB-test.js"></script>
|
||||
<script src="unit/filters/HSV-test.js"></script>
|
||||
|
||||
<script src="unit/filters/Invert-test.js"></script>
|
||||
|
||||
|
||||
@ -1,465 +0,0 @@
|
||||
suite('ColorPack', function() {
|
||||
// ======================================================
|
||||
test.only('colorize basic', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.Colorize]);
|
||||
darth.color([255,0,128]);
|
||||
layer.draw();
|
||||
|
||||
// Assert fails even though '[255,0,128] = [255,0,128]'
|
||||
//assert.equal(darth.getFilterColorizeColor(), [255,0,128]);
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/darth-vader.jpg';
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('colorize crop', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
crop: {x:128, y:48, width:256, height:128},
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.Colorize]);
|
||||
darth.color([0,255,0]);
|
||||
layer.draw();
|
||||
|
||||
// assert.equal(darth.getFilterColorizeColor(), [0,255,0]);
|
||||
|
||||
done();
|
||||
|
||||
};
|
||||
imageObj.src = 'assets/darth-vader.jpg';
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('colorize transparancy', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var colors = [
|
||||
[255,0,0],
|
||||
[255,128,0],
|
||||
[255,255,0],
|
||||
[0,255,0],
|
||||
[0,255,128],
|
||||
[0,255,255],
|
||||
[0,0,255],
|
||||
[128,0,255],
|
||||
[255,0,255],
|
||||
[0,0,0],
|
||||
[128,128,128],
|
||||
[255,255,255]
|
||||
];
|
||||
var i,l = colors.length;
|
||||
var nAdded = 0;
|
||||
for( i=0; i<l; i+=1 ){
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = (function(color,x){ return function() {
|
||||
|
||||
var darth = new Kinetic.Image({
|
||||
x: x,
|
||||
y: 32,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
layer.add(darth);
|
||||
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.Colorize]);
|
||||
darth.color(color);
|
||||
|
||||
nAdded += 1;
|
||||
if( nAdded >= l ){
|
||||
stage.add(layer);
|
||||
layer.draw();
|
||||
done();
|
||||
}
|
||||
};})(colors[i],-64+i/l*stage.getWidth());
|
||||
imageObj.src = 'assets/lion.png';
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
// ======================================================
|
||||
test.only('hue shift tween transparancy', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.HSV]);
|
||||
darth.hue(360);
|
||||
layer.draw();
|
||||
|
||||
var tween = new Kinetic.Tween({
|
||||
node: darth,
|
||||
duration: 5.0,
|
||||
hue: 0,
|
||||
easing: Kinetic.Easings.EaseInOut
|
||||
});
|
||||
|
||||
darth.on('mouseover', function() {
|
||||
tween.play();
|
||||
});
|
||||
|
||||
darth.on('mouseout', function() {
|
||||
tween.reverse();
|
||||
});
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/lion.png';
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('saturation tween transparancy', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.setFilter(Kinetic.Filters.HSV);
|
||||
darth.setFilterSaturation(2.0);
|
||||
layer.draw();
|
||||
|
||||
var tween = new Kinetic.Tween({
|
||||
node: darth,
|
||||
duration: 5.0,
|
||||
filterSaturation: 0.001,
|
||||
easing: Kinetic.Easings.EaseInOut
|
||||
});
|
||||
|
||||
darth.on('mouseover', function() {
|
||||
tween.play();
|
||||
});
|
||||
|
||||
darth.on('mouseout', function() {
|
||||
tween.reverse();
|
||||
});
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/lion.png';
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('value tween transparancy', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.setFilter(Kinetic.Filters.HSV);
|
||||
darth.setFilterValue(2.0);
|
||||
layer.draw();
|
||||
|
||||
var tween = new Kinetic.Tween({
|
||||
node: darth,
|
||||
duration: 5.0,
|
||||
filterValue: 0.001,
|
||||
easing: Kinetic.Easings.EaseInOut
|
||||
});
|
||||
|
||||
darth.on('mouseover', function() {
|
||||
tween.play();
|
||||
});
|
||||
|
||||
darth.on('mouseout', function() {
|
||||
tween.reverse();
|
||||
});
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/lion.png';
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('hue shift rainbow', function (done) {
|
||||
var stage = addStage();
|
||||
|
||||
var shapesLayer = new Kinetic.Layer();
|
||||
|
||||
// The important line!
|
||||
shapesLayer.on('draw', function () {
|
||||
var src, dst, i, w=40;
|
||||
var ctx = this.getContext();
|
||||
var ctxWidth = this.getCanvas().width/2;
|
||||
var ctxHeight = this.getCanvas().height;
|
||||
var xSize = Math.floor(ctxWidth/w);
|
||||
var ySize = Math.floor(ctxHeight);
|
||||
for( i=0; i<w; i+=1 ){
|
||||
src = ctx.getImageData(i*xSize,0,xSize,ySize);
|
||||
dst = ctx.createImageData(src);
|
||||
Kinetic.Filters.HSV(src,dst,{hue:i*360/w,saturation:5});
|
||||
ctx.putImageData(dst,i*xSize,0);
|
||||
//ctx.strokeRect(i*xSize,0,xSize,ySize);
|
||||
}
|
||||
});
|
||||
|
||||
var triangle = new Kinetic.RegularPolygon({
|
||||
x: stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
sides: 3,
|
||||
radius: 80,
|
||||
fillRadialGradientStartPoint: 0,
|
||||
fillRadialGradientStartRadius: 0,
|
||||
fillRadialGradientEndPoint: 0,
|
||||
fillRadialGradientEndRadius: 70,
|
||||
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: 3 * stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: '#880000',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true,
|
||||
id: 'myCircle'
|
||||
});
|
||||
|
||||
for( var i=0; i<10; i+=1 ){
|
||||
for( var j=0; j<10; j+=1 ){
|
||||
var rect = new Kinetic.Rect({
|
||||
x: i/10*stage.getWidth(),
|
||||
y: j/10*stage.getHeight(),
|
||||
width: stage.getWidth()/10,
|
||||
height: stage.getHeight()/10,
|
||||
fill: (i+j)%2===0?'#FF0000':'#FFFF00',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
shapesLayer.add(rect);
|
||||
}
|
||||
}
|
||||
|
||||
shapesLayer.add(circle);
|
||||
shapesLayer.add(triangle);
|
||||
|
||||
stage.add(shapesLayer);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('saturation gradient', function (done) {
|
||||
var stage = addStage();
|
||||
|
||||
var shapesLayer = new Kinetic.Layer();
|
||||
|
||||
// The important line!
|
||||
shapesLayer.on('draw', function () {
|
||||
var src, dst, i, w=40;
|
||||
var ctx = this.getContext();
|
||||
var ctxWidth = this.getCanvas().width;
|
||||
var ctxHeight = this.getCanvas().height;
|
||||
var xSize = Math.floor(ctxWidth/w);
|
||||
var ySize = Math.floor(ctxHeight);
|
||||
for( i=0; i<w; i+=1 ){
|
||||
src = ctx.getImageData(i*xSize,0,xSize,ySize);
|
||||
dst = ctx.createImageData(src);
|
||||
Kinetic.Filters.HSV(src,dst,{saturation:2*(0.001+i)/w});
|
||||
ctx.putImageData(dst,i*xSize,0);
|
||||
//ctx.strokeRect(i*xSize,0,xSize,ySize);
|
||||
}
|
||||
});
|
||||
|
||||
var triangle = new Kinetic.RegularPolygon({
|
||||
x: stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
sides: 3,
|
||||
radius: 80,
|
||||
fillRadialGradientStartPoint: 0,
|
||||
fillRadialGradientStartRadius: 0,
|
||||
fillRadialGradientEndPoint: 0,
|
||||
fillRadialGradientEndRadius: 70,
|
||||
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: 3 * stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: '#880000',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true,
|
||||
id: 'myCircle'
|
||||
});
|
||||
|
||||
for( var i=0; i<10; i+=1 ){
|
||||
for( var j=0; j<10; j+=1 ){
|
||||
var rect = new Kinetic.Rect({
|
||||
x: i/10*stage.getWidth(),
|
||||
y: j/10*stage.getHeight(),
|
||||
width: stage.getWidth()/10,
|
||||
height: stage.getHeight()/10,
|
||||
fill: (i+j)%2===0?'#FF0000':'#FFFF00',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
shapesLayer.add(rect);
|
||||
}
|
||||
}
|
||||
|
||||
shapesLayer.add(circle);
|
||||
shapesLayer.add(triangle);
|
||||
|
||||
stage.add(shapesLayer);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('value gradient', function (done) {
|
||||
var stage = addStage();
|
||||
|
||||
var shapesLayer = new Kinetic.Layer();
|
||||
|
||||
// The important line!
|
||||
shapesLayer.on('draw', function () {
|
||||
var src, dst, i, w=40;
|
||||
var ctx = this.getContext();
|
||||
var ctxWidth = this.getCanvas().width;
|
||||
var ctxHeight = this.getCanvas().height;
|
||||
var xSize = Math.floor(ctxWidth/w);
|
||||
var ySize = Math.floor(ctxHeight);
|
||||
for( i=0; i<w; i+=1 ){
|
||||
src = ctx.getImageData(i*xSize,0,xSize,ySize);
|
||||
dst = ctx.createImageData(src);
|
||||
Kinetic.Filters.HSV(src,dst,{value:2*(0.001+i)/w});
|
||||
ctx.putImageData(dst,i*xSize,0);
|
||||
//ctx.strokeRect(i*xSize,0,xSize,ySize);
|
||||
}
|
||||
});
|
||||
|
||||
var triangle = new Kinetic.RegularPolygon({
|
||||
x: stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
sides: 3,
|
||||
radius: 80,
|
||||
fillRadialGradientStartPoint: 0,
|
||||
fillRadialGradientStartRadius: 0,
|
||||
fillRadialGradientEndPoint: 0,
|
||||
fillRadialGradientEndRadius: 70,
|
||||
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: 3 * stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: '#880000',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true,
|
||||
id: 'myCircle'
|
||||
});
|
||||
|
||||
for( var i=0; i<10; i+=1 ){
|
||||
for( var j=0; j<10; j+=1 ){
|
||||
var rect = new Kinetic.Rect({
|
||||
x: i/10*stage.getWidth(),
|
||||
y: j/10*stage.getHeight(),
|
||||
width: stage.getWidth()/10,
|
||||
height: stage.getHeight()/10,
|
||||
fill: (i+j)%2===0?'#FF0000':'#FFFF00',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
shapesLayer.add(rect);
|
||||
}
|
||||
}
|
||||
|
||||
shapesLayer.add(circle);
|
||||
shapesLayer.add(triangle);
|
||||
|
||||
stage.add(shapesLayer);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
});
|
||||
135
test/unit/filters/HSV-test.js
Normal file
135
test/unit/filters/HSV-test.js
Normal file
@ -0,0 +1,135 @@
|
||||
suite('HSV', function() {
|
||||
|
||||
|
||||
// ======================================================
|
||||
test('hue shift tween transparancy', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.HSV]);
|
||||
darth.hue(360);
|
||||
layer.draw();
|
||||
|
||||
var tween = new Kinetic.Tween({
|
||||
node: darth,
|
||||
duration: 1.0,
|
||||
hue: 0,
|
||||
easing: Kinetic.Easings.EaseInOut
|
||||
});
|
||||
|
||||
darth.on('mouseover', function() {
|
||||
tween.play();
|
||||
});
|
||||
|
||||
darth.on('mouseout', function() {
|
||||
tween.reverse();
|
||||
});
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/lion.png';
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('saturation tween transparancy', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.HSV]);
|
||||
darth.saturation(2.0);
|
||||
layer.draw();
|
||||
|
||||
var tween = new Kinetic.Tween({
|
||||
node: darth,
|
||||
duration: 1.0,
|
||||
saturation: 0.001,
|
||||
easing: Kinetic.Easings.EaseInOut
|
||||
});
|
||||
|
||||
darth.on('mouseover', function() {
|
||||
tween.play();
|
||||
});
|
||||
|
||||
darth.on('mouseout', function() {
|
||||
tween.reverse();
|
||||
});
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/lion.png';
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('value tween transparancy', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.HSV]);
|
||||
darth.value(2.0);
|
||||
layer.draw();
|
||||
|
||||
var tween = new Kinetic.Tween({
|
||||
node: darth,
|
||||
duration: 1.0,
|
||||
value: 0.001,
|
||||
easing: Kinetic.Easings.EaseInOut
|
||||
});
|
||||
|
||||
darth.on('mouseover', function() {
|
||||
tween.play();
|
||||
});
|
||||
|
||||
darth.on('mouseout', function() {
|
||||
tween.reverse();
|
||||
});
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/lion.png';
|
||||
|
||||
});
|
||||
});
|
||||
115
test/unit/filters/RGB-test.js
Normal file
115
test/unit/filters/RGB-test.js
Normal file
@ -0,0 +1,115 @@
|
||||
suite('RGB', function() {
|
||||
// ======================================================
|
||||
test('colorize basic', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.RGB]);
|
||||
darth.red(255).green(0).blue(128);
|
||||
layer.draw();
|
||||
|
||||
// Assert fails even though '[255,0,128] = [255,0,128]'
|
||||
//assert.equal(darth.getFilterColorizeColor(), [255,0,128]);
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/darth-vader.jpg';
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('colorize crop', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
crop: {x:128, y:48, width:256, height:128},
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.RGB]);
|
||||
darth.red(0).green(255).blue(0);
|
||||
layer.draw();
|
||||
|
||||
// assert.equal(darth.getFilterColorizeColor(), [0,255,0]);
|
||||
|
||||
done();
|
||||
|
||||
};
|
||||
imageObj.src = 'assets/darth-vader.jpg';
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('colorize transparancy', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var colors = [
|
||||
[255,0,0],
|
||||
[255,128,0],
|
||||
[255,255,0],
|
||||
[0,255,0],
|
||||
[0,255,128],
|
||||
[0,255,255],
|
||||
[0,0,255],
|
||||
[128,0,255],
|
||||
[255,0,255],
|
||||
[0,0,0],
|
||||
[128,128,128],
|
||||
[255,255,255]
|
||||
];
|
||||
var i,l = colors.length;
|
||||
var nAdded = 0;
|
||||
for( i=0; i<l; i+=1 ){
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = (function(color,x){ return function() {
|
||||
|
||||
var darth = new Kinetic.Image({
|
||||
x: x,
|
||||
y: 32,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
layer.add(darth);
|
||||
|
||||
darth.cache();
|
||||
darth.filters([Kinetic.Filters.RGB]);
|
||||
darth.red(color[0]).green(color[1]).blue(color[2]);
|
||||
|
||||
nAdded += 1;
|
||||
if( nAdded >= l ){
|
||||
stage.add(layer);
|
||||
layer.draw();
|
||||
done();
|
||||
}
|
||||
};})(colors[i],-64+i/l*stage.getWidth());
|
||||
imageObj.src = 'assets/lion.png';
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user