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/Invert.js',
|
||||||
'src/filters/Blur.js',
|
'src/filters/Blur.js',
|
||||||
'src/filters/Mask.js',
|
'src/filters/Mask.js',
|
||||||
'src/filters/ColorPack.js',
|
'src/filters/RGB.js',
|
||||||
|
'src/filters/HSV.js',
|
||||||
'src/filters/ConvolvePack.js',
|
'src/filters/ConvolvePack.js',
|
||||||
'src/filters/Enhance.js',
|
'src/filters/Enhance.js',
|
||||||
'src/filters/Levels.js',
|
'src/filters/Levels.js',
|
||||||
|
|||||||
@ -24,7 +24,7 @@
|
|||||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'brightness', 0);
|
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'brightness', 0);
|
||||||
/**
|
/**
|
||||||
* get/set filter brightness. The brightness is a number between -1 and 1. Positive values
|
* 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
|
* @name brightness
|
||||||
* @method
|
* @method
|
||||||
* @memberof Kinetic.Image.prototype
|
* @memberof Kinetic.Image.prototype
|
||||||
|
|||||||
@ -1,202 +1,136 @@
|
|||||||
(function () {
|
(function () {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* HSV Filter. Adjusts the hue, saturation and value of an image.
|
* HSV Filter. Adjusts the hue, saturation and value of an image.
|
||||||
* Performs w*h pixel reads and w*h pixel writes.
|
* Performs w*h pixel reads and w*h pixel writes.
|
||||||
* @function
|
* @function
|
||||||
* @author ippo615
|
* @author ippo615
|
||||||
* @memberof Kinetic.Filters
|
* @memberof Kinetic.Filters
|
||||||
* @param {ImageData} src, the source image data (what will be transformed)
|
* @param {ImageData} src, the source image data (what will be transformed)
|
||||||
* @param {ImageData} dst, the destination image data (where it will be saved)
|
* @param {ImageData} dst, the destination image data (where it will be saved)
|
||||||
* @param {Object} opt
|
* @param {Object} opt
|
||||||
* @param {Number} [opt.hue] amount to shift to the hue (in degrees)
|
* @param {Number} [opt.hue] amount to shift to the hue (in degrees)
|
||||||
* 0 represents no shift, while 360 is the maximum. Default: 0
|
* 0 represents no shift, while 360 is the maximum. Default: 0
|
||||||
* @param {Number} [opt.saturation] amount to scale the saturation.
|
* @param {Number} [opt.saturation] amount to scale the saturation.
|
||||||
* 1 means no change, 0.5 halves (more gray), 2.0 doubles
|
* 1 means no change, 0.5 halves (more gray), 2.0 doubles
|
||||||
* (more color), etc... Default is 1.
|
* (more color), etc... Default is 1.
|
||||||
* @param {Number} [opt.value] amount to scale the value.
|
* @param {Number} [opt.value] amount to scale the value.
|
||||||
* 1 means no change, 0.5 halves (darker), 2.0 doubles (lighter), etc..
|
* 1 means no change, 0.5 halves (darker), 2.0 doubles (lighter), etc..
|
||||||
* Default is 1.
|
* Default is 1.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var HSV = function (src, dst, opt) {
|
var HSV = function (src, dst, opt) {
|
||||||
var srcPixels = src.data,
|
var srcPixels = src.data,
|
||||||
dstPixels = dst.data,
|
dstPixels = dst.data,
|
||||||
nPixels = srcPixels.length,
|
nPixels = srcPixels.length,
|
||||||
i;
|
i;
|
||||||
|
|
||||||
var v = opt.value || 1,
|
var v = opt.value || 1,
|
||||||
s = opt.saturation || 1,
|
s = opt.saturation || 1,
|
||||||
h = Math.abs((opt.hue || 0) + 360) % 360;
|
h = Math.abs((opt.hue || 0) + 360) % 360;
|
||||||
|
|
||||||
// Basis for the technique used:
|
// Basis for the technique used:
|
||||||
// http://beesbuzz.biz/code/hsv_color_transforms.php
|
// http://beesbuzz.biz/code/hsv_color_transforms.php
|
||||||
// V is the value multiplier (1 for none, 2 for double, 0.5 for half)
|
// 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)
|
// 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)
|
// H is the hue shift in degrees (0 to 360)
|
||||||
// vsu = V*S*cos(H*PI/180);
|
// vsu = V*S*cos(H*PI/180);
|
||||||
// vsw = V*S*sin(H*PI/180);
|
// vsw = V*S*sin(H*PI/180);
|
||||||
//[ .299V+.701vsu+.168vsw .587V-.587vsu+.330vsw .114V-.114vsu-.497vsw ] [R]
|
//[ .299V+.701vsu+.168vsw .587V-.587vsu+.330vsw .114V-.114vsu-.497vsw ] [R]
|
||||||
//[ .299V-.299vsu-.328vsw .587V+.413vsu+.035vsw .114V-.114vsu+.292vsw ]*[G]
|
//[ .299V-.299vsu-.328vsw .587V+.413vsu+.035vsw .114V-.114vsu+.292vsw ]*[G]
|
||||||
//[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]
|
//[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]
|
||||||
|
|
||||||
// Precompute the values in the matrix:
|
// Precompute the values in the matrix:
|
||||||
var vsu = v*s*Math.cos(h*Math.PI/180),
|
var vsu = v*s*Math.cos(h*Math.PI/180),
|
||||||
vsw = v*s*Math.sin(h*Math.PI/180);
|
vsw = v*s*Math.sin(h*Math.PI/180);
|
||||||
// (result spot)(source spot)
|
// (result spot)(source spot)
|
||||||
var rr = 0.299*v+0.701*vsu+0.167*vsw,
|
var rr = 0.299*v+0.701*vsu+0.167*vsw,
|
||||||
rg = 0.587*v-0.587*vsu+0.330*vsw,
|
rg = 0.587*v-0.587*vsu+0.330*vsw,
|
||||||
rb = 0.114*v-0.114*vsu-0.497*vsw;
|
rb = 0.114*v-0.114*vsu-0.497*vsw;
|
||||||
var gr = 0.299*v-0.299*vsu-0.328*vsw,
|
var gr = 0.299*v-0.299*vsu-0.328*vsw,
|
||||||
gg = 0.587*v+0.413*vsu+0.035*vsw,
|
gg = 0.587*v+0.413*vsu+0.035*vsw,
|
||||||
gb = 0.114*v-0.114*vsu+0.293*vsw;
|
gb = 0.114*v-0.114*vsu+0.293*vsw;
|
||||||
var br = 0.299*v-0.300*vsu+1.250*vsw,
|
var br = 0.299*v-0.300*vsu+1.250*vsw,
|
||||||
bg = 0.587*v-0.586*vsu-1.050*vsw,
|
bg = 0.587*v-0.586*vsu-1.050*vsw,
|
||||||
bb = 0.114*v+0.886*vsu-0.200*vsw;
|
bb = 0.114*v+0.886*vsu-0.200*vsw;
|
||||||
|
|
||||||
var r,g,b,a;
|
var r,g,b,a;
|
||||||
|
|
||||||
for (i = 0; i < nPixels; i += 4) {
|
for (i = 0; i < nPixels; i += 4) {
|
||||||
r = srcPixels[i+0];
|
r = srcPixels[i+0];
|
||||||
g = srcPixels[i+1];
|
g = srcPixels[i+1];
|
||||||
b = srcPixels[i+2];
|
b = srcPixels[i+2];
|
||||||
a = srcPixels[i+3];
|
a = srcPixels[i+3];
|
||||||
|
|
||||||
dstPixels[i+0] = rr*r + rg*g + rb*b;
|
dstPixels[i+0] = rr*r + rg*g + rb*b;
|
||||||
dstPixels[i+1] = gr*r + gg*g + gb*b;
|
dstPixels[i+1] = gr*r + gg*g + gb*b;
|
||||||
dstPixels[i+2] = br*r + bg*g + bb*b;
|
dstPixels[i+2] = br*r + bg*g + bb*b;
|
||||||
dstPixels[i+3] = a; // alpha
|
dstPixels[i+3] = a; // alpha
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'hue', 0);
|
Kinetic.Filters.HSV = function(src,dst,opt){
|
||||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'saturation', 1);
|
if( this === Kinetic.Filters ){
|
||||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'value', 1);
|
HSV(src, dst||src, opt );
|
||||||
|
}else{
|
||||||
Kinetic.Filters.HSV = function(src,dst,opt){
|
HSV.call(this, src, dst||src, opt || {
|
||||||
if( this === Kinetic.Filters ){
|
hue: this.hue(),
|
||||||
HSV(src, dst||src, opt );
|
saturation: this.saturation(),
|
||||||
}else{
|
value: this.value()
|
||||||
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 );
|
||||||
// For compatibility with older hue shift stuff
|
}else{
|
||||||
Kinetic.Filters.ShiftHue = function(src,dst,opt){
|
HSV.call(this, src, dst||src, opt || {
|
||||||
if( this === Kinetic.Filters ){
|
hue: this.hueShiftDeg()
|
||||||
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);
|
||||||
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'hueShiftDeg', 0);
|
|
||||||
|
/**
|
||||||
/**
|
* get/set hsv hue in degrees
|
||||||
* get filter hue. Returns the hue shift for the HSV filter.
|
* @name hue
|
||||||
* 0 is no change, 359 is the maximum shift.
|
* @method
|
||||||
* @name getFilterHue
|
* @memberof Kinetic.Node.prototype
|
||||||
* @method
|
* @param {Number} hue value between 0 and 359
|
||||||
* @memberof Kinetic.Image.prototype
|
* @returns {Number}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* set filter hue. Sets the hue shift for the HSV filter.
|
* get/set hsv hueShift in degrees
|
||||||
* 0 is no change, 359 is the maximum shift.
|
* @name hueShift
|
||||||
* @name setFilterHue
|
* @method
|
||||||
* @method
|
* @memberof Kinetic.Node.prototype
|
||||||
* @memberof Kinetic.Image.prototype
|
* @param {Number} hue value between 0 and 359
|
||||||
*/
|
* @returns {Number}
|
||||||
|
*/
|
||||||
/**
|
|
||||||
* get filter saturation. Returns the saturation scale for the HSV
|
/**
|
||||||
* filter. 1 is no change, 0.5 halves the saturation, 2.0 doubles, etc..
|
* get/set hsv saturation
|
||||||
* @name getFilterSaturation
|
* @name saturation
|
||||||
* @method
|
* @method
|
||||||
* @memberof Kinetic.Image.prototype
|
* @memberof Kinetic.Node.prototype
|
||||||
*/
|
* @param {Number} saturation 1 is no change, 0.5 halves the saturation, 2.0 doubles, etc..
|
||||||
|
* @returns {Number}
|
||||||
/**
|
*/
|
||||||
* 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
|
* get/set hsv value
|
||||||
* @method
|
* @name value
|
||||||
* @memberof Kinetic.Image.prototype
|
* @method
|
||||||
*/
|
* @memberof Kinetic.Node.prototype
|
||||||
|
* @param {Number} value 1 is no change, 0.5 halves the value, 2.0 doubles, etc..
|
||||||
/**
|
* @returns {Number}
|
||||||
* 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
|
|
||||||
*/
|
|
||||||
|
|
||||||
})();
|
|
||||||
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>
|
* @author Jacob Seidelin <jseidelin@nihilogic.dk>
|
||||||
* @license MPL v1.1 [http://www.pixastic.com/lib/license.txt]
|
* @license MPL v1.1 [http://www.pixastic.com/lib/license.txt]
|
||||||
*/
|
*/
|
||||||
|
|
||||||
Kinetic.Filters.Sepia = function (imageData) {
|
Kinetic.Filters.Sepia = function (imageData) {
|
||||||
var data = imageData.data,
|
var data = imageData.data,
|
||||||
w = imageData.width,
|
w = imageData.width,
|
||||||
@ -38,6 +37,4 @@
|
|||||||
} while (--x);
|
} while (--x);
|
||||||
} while (--y);
|
} while (--y);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|||||||
@ -81,7 +81,8 @@
|
|||||||
<!-- filters -->
|
<!-- filters -->
|
||||||
<script src="unit/filters/Blur-test.js"></script>
|
<script src="unit/filters/Blur-test.js"></script>
|
||||||
<script src="unit/filters/Brighten-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>
|
<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