first pass at implementing filters. Still have a lot to work through.

This commit is contained in:
Eric Rowell
2012-07-17 00:32:26 -07:00
parent 384a686740
commit 20adf7e036
10 changed files with 351 additions and 69 deletions

View File

@@ -247,7 +247,6 @@ Test.prototype.tests = {
clientY: 101
});
console.log(layer.toDataURL())
warn(layer.toDataURL() === urls[1], 'mid data url is incorrect');
// move mouse back out of circle

View File

@@ -31,7 +31,7 @@ Test.prototype.tests = {
for(var n = 0; n < 10000; n++) {
context.putImageData(imageData, 7, 7);
}
endTimer('draw 10,000 images with image object from image data');
endTimer('draw 10,000 images with putImageData');
},
'DRAWING - draw rect vs image from data url': function(containerId) {
@@ -61,15 +61,17 @@ Test.prototype.tests = {
endTimer('create data url');
var imageObj = new Image();
imageObj.onload = function() {
layer.clear();
startTimer();
for(var n = 0; n < 10000; n++) {
context.drawImage(imageObj, 7, 7, 106, 106, 10, 10, 106, 106);
}
endTimer('draw 10,000 images with image object from data url');
}
imageObj.src = url;
layer.clear();
startTimer();
for(var n = 0; n < 10000; n++) {
context.drawImage(imageObj, 7, 7, 106, 106, 10, 10, 106, 106);
}
endTimer('draw 10,000 images with image object from data url');
},
'DRAWING - draw 1,000 stars': function(containerId) {
var stage = new Kinetic.Stage({
@@ -121,7 +123,7 @@ Test.prototype.tests = {
layer.add(star);
stage.add(layer);
console.log('call toImage')
console.log('call toImage')
star.toImage(function(img) {
startTimer();
for(var n = 0; n < 1000; n++) {

View File

@@ -1991,6 +1991,39 @@ Test.prototype.tests = {
};
imageObj.src = '../darth-vader.jpg';
},
'SHAPE - filter image': 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({
throttle: 999
});
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
test(darth.getWidth() === 438, 'image width should be 438');
test(darth.getHeight() === 300, 'image height should be 300');
darth.applyFilter({
filter: Kinetic.Filters.Grayscale,
callback: function() {
layer.draw();
}
});
};
imageObj.src = '../darth-vader.jpg';
},
'SHAPE - set image fill to color then image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {