lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-18 19:51:21 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Fixed bug in color filters, added visual tests.

Browse Source
This commit is contained in:
ippo615
2013-07-11 21:57:49 -04:00
parent 3c49dc9536
commit 66cef11ae9
2 changed files with 191 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/filters/Colors.js
View File

@@ -115,7 +115,7 @@
* @memberof Kinetic.Filters * @memberof Kinetic.Filters
* @param {Object} imageData * @param {Object} imageData
*/ */
Kinetic.Filters.OnlyGreen = function(imageData) { Kinetic.Filters.OnlyBlue = function(imageData) {
var data = imageData.data; var data = imageData.data;
for(var i = 0; i < data.length; i += 4) { for(var i = 0; i < data.length; i += 4) {
data[i + 0] = 0; // red data[i + 0] = 0; // red

190
tests/js/visualTests.js
View File

@@ -1432,6 +1432,196 @@ Test.Modules.IMAGE = {
}; };
imageObj.src = '../assets/darth-vader.jpg'; imageObj.src = '../assets/darth-vader.jpg';
}, },
'no red filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
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.NoRed);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'no green filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
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.NoGreen);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'no blue filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
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.NoBlue);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'only red filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
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.OnlyRed);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'only green filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
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.OnlyGreen);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'only blue filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
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.OnlyBlue);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'shift hue filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
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.ShiftHue);
darth.setFilterHueShiftDeg(90);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.');
};
imageObj.src = '../assets/lion.png';
},
'filter transformed image': function(containerId) { 'filter transformed image': function(containerId) {
var imageObj = new Image(); var imageObj = new Image();
imageObj.onload = function() { imageObj.onload = function() {