lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Made convolution filters tweenable.

Browse Source 
Unsharp mask, soft blur, sharpen, emboss, edge detect are now "tweenable";
however, I think I need to tweak the convolution matricies. At 0 there
should be no effect applied which corresponds to a matrix with just a
`1` in the middle (ie [...1...]). If the `filterAmount` is small then
the matrix is all near 0's causing the image to 'flash black'. If I always
add a 1 in the middle then the images become too bright...
This commit is contained in:
ippo615
2013-07-23 21:07:56 -04:00
parent 46eff4dec5
commit 27ea8ce3e4
2 changed files with 125 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
tests/js/visualTests.js
View File

@@ -1523,9 +1523,24 @@ Test.Modules.IMAGE = {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.UnsharpMask);
darth.setFilterSoftBlurAmount(90);
darth.setFilterSoftBlurSize(7);
darth.setFilterAmount(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 0.6,
filterAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'unsharp mask filter', 'problem with unsharp mask filter.');
@@ -1552,9 +1567,24 @@ Test.Modules.IMAGE = {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.SoftBlur);
darth.setFilterSoftBlurAmount(10);
darth.setFilterSoftBlurSize(7);
darth.setFilterAmount(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 0.6,
filterAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'soft blur filter', 'problem with soft blur filter.');
@@ -1581,7 +1611,24 @@ Test.Modules.IMAGE = {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Sharpen);
darth.setFilterAmount(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 0.6,
filterAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'sharpen filter', 'problem with sharpen filter.');
@@ -1589,33 +1636,6 @@ Test.Modules.IMAGE = {
imageObj.src = '../assets/darth-vader.jpg';
//imageObj.src = '../assets/lion.png';
},
'remove mean 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.RemoveMean);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'remove mean filter', 'problem with remove mean filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
//imageObj.src = '../assets/lion.png';
},
'emboss filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
@@ -1635,7 +1655,24 @@ Test.Modules.IMAGE = {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Emboss);
darth.setFilterAmount(50);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 0.6,
filterAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'emboss filter', 'problem with emboss filter.');
@@ -1666,7 +1703,24 @@ Test.Modules.IMAGE = {
//darth.setFilter(Kinetic.Filters.DetectDiagonal45Edge);
//darth.setFilter(Kinetic.Filters.DetectDiagonal135Edge);
darth.setFilter(Kinetic.Filters.DetectEdges);
darth.setFilterAmount(50);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 0.6,
filterAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'edge detection filter', 'problem with edge detection filter.');