From 6e68a200e2c7cb8ecba8b1507a407cf67412d28b Mon Sep 17 00:00:00 2001 From: "StronglyTypedSolutions@gmail.com" Date: Mon, 15 Jul 2013 17:45:04 +0200 Subject: [PATCH 01/13] FIX: A Kinetic.Image that has both a crop and filter now draws correctly --- src/shapes/Image.js | 65 ++++++++++++++++++++++++++++----------------- 1 file changed, 40 insertions(+), 25 deletions(-) diff --git a/src/shapes/Image.js b/src/shapes/Image.js index d17ef485..c3830a2a 100644 --- a/src/shapes/Image.js +++ b/src/shapes/Image.js @@ -40,14 +40,15 @@ this.className = IMAGE; this._setDrawFuncs(); }, + drawFunc: function(canvas) { var width = this.getWidth(), height = this.getHeight(), - params, that = this, context = canvas.getContext(), - crop = this.getCrop(), - cropX, cropY, cropWidth, cropHeight, image; + crop, + params, + image; // if a filter is set, and the filter needs to be updated, reapply if (this.getFilter() && this._applyFilter) { @@ -55,32 +56,36 @@ this._applyFilter = false; } - // NOTE: this.filterCanvas may be set by the above code block + // NOTE: this.filterCanvas may be set by the above code block + // In that case, cropping is already applied. if (this.filterCanvas) { - image = this.filterCanvas.getElement(); - } + image = this.filterCanvas.getElement(); + params = [image, 0, 0, width, height]; + } else { - image = this.getImage(); - } + image = this.getImage(); + + if (image) { + crop = this.getCrop(); + + if (crop) { + crop.x = crop.x || 0; + crop.y = crop.y || 0; + crop.width = crop.width || image.width - crop.x; + crop.height = crop.height || image.height - crop.y; + params = [image, crop.x, crop.y, crop.width, crop.height, 0, 0, width, height]; + } else { + params = [image, 0, 0, width, height]; + } + } + } context.beginPath(); context.rect(0, 0, width, height); context.closePath(); canvas.fillStroke(this); - if(image) { - // if cropping - if(crop) { - cropX = crop.x || 0; - cropY = crop.y || 0; - cropWidth = crop.width || 0; - cropHeight = crop.height || 0; - params = [image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height]; - } - // no cropping - else { - params = [image, 0, 0, width, height]; - } + if (image) { if(this.hasShadow()) { canvas.applyShadow(this, function() { @@ -92,6 +97,7 @@ } } }, + drawHitFunc: function(canvas) { var width = this.getWidth(), height = this.getHeight(), @@ -118,22 +124,31 @@ width = this.getWidth(), height = this.getHeight(), filter = this.getFilter(), + crop = this.getCrop() || {}, filterCanvas, context, imageData; - if (this.filterCanvas){ + crop.x = crop.x || 0; + crop.y = crop.y || 0; + crop.width = crop.width || image.width - crop.x; + crop.height = crop.height || image.height - crop.y; + + if (this.filterCanvas && + this.filterCanvas.getWidth() == crop.width && + this.filterCanvas.getHeight() == crop.height) { filterCanvas = this.filterCanvas; } else { filterCanvas = this.filterCanvas = new Kinetic.SceneCanvas({ - width: width, - height: height + width: crop.width, + height: crop.height, + pixelRatio: 1, }); } context = filterCanvas.getContext(); try { - this._drawImage(context, [image, 0, 0, width, height]); + this._drawImage(context, [image, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height]); imageData = context.getImageData(0, 0, filterCanvas.getWidth(), filterCanvas.getHeight()); filter.call(this, imageData); context.putImageData(imageData, 0, 0); From de677846b412b95c4ff2ad4fe5d6e4c0c5a9e96e Mon Sep 17 00:00:00 2001 From: ippo615 Date: Sun, 29 Sep 2013 11:26:31 -0400 Subject: [PATCH 02/13] Added blur filter unit tests. --- test/unit/filters/Blur-test.js | 96 ++++++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 test/unit/filters/Blur-test.js diff --git a/test/unit/filters/Blur-test.js b/test/unit/filters/Blur-test.js new file mode 100644 index 00000000..91770806 --- /dev/null +++ b/test/unit/filters/Blur-test.js @@ -0,0 +1,96 @@ +suite('Blur', function() { + // ====================================================== + test('basic blur', function() { + 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.Blur); + darth.setFilterRadius(10); + layer.draw(); + + }; + imageObj.src = 'assets/darth-vader.jpg'; + }); + + // ====================================================== + test('tween blur', function() { + 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.Blur); + darth.setFilterRadius(100); + layer.draw(); + + var tween = new Kinetic.Tween({ + node: darth, + duration: 5.0, + filterRadius: 0, + easing: Kinetic.Easings.EaseInOut + }); + + darth.on('mouseover', function() { + tween.play(); + }); + + darth.on('mouseout', function() { + tween.reverse(); + }); + + }; + imageObj.src = 'assets/darth-vader.jpg'; + }); + + // ====================================================== + test('crop blur', function() { + 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:48, y:48, width:256, height:256}, + draggable: true + }); + + layer.add(darth); + stage.add(layer); + + darth.setFilter(Kinetic.Filters.Blur); + darth.setFilterRadius(10); + layer.draw(); + + }; + imageObj.src = 'assets/darth-vader.jpg'; + }); + +}); \ No newline at end of file From 1770733b1cb5d8cbe9f9da5895f0286c15523aee Mon Sep 17 00:00:00 2001 From: ippo615 Date: Sun, 29 Sep 2013 14:39:10 -0400 Subject: [PATCH 03/13] Added blur filter unit test --- test/unit/filters/Blur-test.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/test/unit/filters/Blur-test.js b/test/unit/filters/Blur-test.js index 79e080b9..33a03447 100644 --- a/test/unit/filters/Blur-test.js +++ b/test/unit/filters/Blur-test.js @@ -21,6 +21,8 @@ suite('Blur', function() { darth.setFilterRadius(10); layer.draw(); + assert.equal(darth.getFilterRadius(), 10); + done(); }; imageObj.src = 'assets/darth-vader.jpg'; From d0f805903da2d383987137d431f0dad361fa9601 Mon Sep 17 00:00:00 2001 From: ippo615 Date: Sun, 29 Sep 2013 14:39:31 -0400 Subject: [PATCH 04/13] Added brighten filter unit test --- test/unit/filters/Brighten-test.js | 106 +++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 test/unit/filters/Brighten-test.js diff --git a/test/unit/filters/Brighten-test.js b/test/unit/filters/Brighten-test.js new file mode 100644 index 00000000..27cb7f9f --- /dev/null +++ b/test/unit/filters/Brighten-test.js @@ -0,0 +1,106 @@ +suite('Brighten', function() { + // ====================================================== + test('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.setFilter(Kinetic.Filters.Brighten); + darth.setFilterBrightness(100); + layer.draw(); + + assert.equal(darth.getFilterBrightness(), 100); + + done(); + }; + imageObj.src = 'assets/darth-vader.jpg'; + + }); + + // ====================================================== + test('tween', 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.Brighten); + darth.setFilterBrightness(100); + layer.draw(); + + var tween = new Kinetic.Tween({ + node: darth, + duration: 2.0, + filterBrightness: 0, + easing: Kinetic.Easings.EaseInOut + }); + + darth.on('mouseover', function() { + tween.play(); + }); + + darth.on('mouseout', function() { + tween.reverse(); + }); + + done(); + + }; + imageObj.src = 'assets/darth-vader.jpg'; + }); + + // ====================================================== + test('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.setFilter(Kinetic.Filters.Brighten); + darth.setFilterBrightness(-50); + layer.draw(); + + assert.equal(darth.getFilterBrightness(), -50); + + done(); + + }; + imageObj.src = 'assets/darth-vader.jpg'; + }); + +}); \ No newline at end of file From 2cc1cc7dcc53c2ef842837ad2d26b7696479189b Mon Sep 17 00:00:00 2001 From: ippo615 Date: Sun, 29 Sep 2013 14:39:48 -0400 Subject: [PATCH 05/13] Added color pack filter unit tests --- test/unit/filters/ColorPack-test.js | 64 +++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 test/unit/filters/ColorPack-test.js diff --git a/test/unit/filters/ColorPack-test.js b/test/unit/filters/ColorPack-test.js new file mode 100644 index 00000000..02ff6509 --- /dev/null +++ b/test/unit/filters/ColorPack-test.js @@ -0,0 +1,64 @@ +suite('Color Pack', function() { + // ====================================================== + test('colorize', 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.Colorize); + darth.setFilterColorizeColor([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('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.setFilter(Kinetic.Filters.Colorize); + darth.setFilterColorizeColor([0,255,0]); + layer.draw(); + + // assert.equal(darth.getFilterColorizeColor(), [0,255,0]); + + done(); + + }; + imageObj.src = 'assets/darth-vader.jpg'; + }); + +}); \ No newline at end of file From ae13dc688aef5684f286ad7164fc669f11890b52 Mon Sep 17 00:00:00 2001 From: ippo615 Date: Sun, 29 Sep 2013 14:44:40 -0400 Subject: [PATCH 06/13] Added grayscale filter test --- test/unit/filters/Grayscale-test.js | 82 +++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 test/unit/filters/Grayscale-test.js diff --git a/test/unit/filters/Grayscale-test.js b/test/unit/filters/Grayscale-test.js new file mode 100644 index 00000000..f47d5d15 --- /dev/null +++ b/test/unit/filters/Grayscale-test.js @@ -0,0 +1,82 @@ +suite('Filter Grayscale', function() { + // ====================================================== + test('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.setFilter(Kinetic.Filters.Grayscale); + layer.draw(); + + done(); + }; + imageObj.src = 'assets/darth-vader.jpg'; + + }); + + // ====================================================== + test('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}, + filter: Kinetic.Filters.Grayscale, + draggable: true + }); + + layer.add(darth); + stage.add(layer); + + done(); + + }; + imageObj.src = 'assets/darth-vader.jpg'; + }); + + // ====================================================== + test('with transparency', 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.Grayscale); + layer.draw(); + + done(); + }; + imageObj.src = 'assets/lion.png'; + + }); + +}); \ No newline at end of file From e4db57355bdcccfe7e9c707c142d56af907d428e Mon Sep 17 00:00:00 2001 From: ippo615 Date: Sun, 29 Sep 2013 14:49:19 -0400 Subject: [PATCH 07/13] Added transparent images to tests. --- test/unit/filters/Blur-test.js | 43 ++++++++++++++++++++++++++++ test/unit/filters/Brighten-test.js | 44 +++++++++++++++++++++++++++++ test/unit/filters/ColorPack-test.js | 32 +++++++++++++++++++-- 3 files changed, 117 insertions(+), 2 deletions(-) diff --git a/test/unit/filters/Blur-test.js b/test/unit/filters/Blur-test.js index 33a03447..ce943c1d 100644 --- a/test/unit/filters/Blur-test.js +++ b/test/unit/filters/Blur-test.js @@ -145,4 +145,47 @@ suite('Blur', function() { imageObj.src = 'assets/darth-vader.jpg'; }); + // ====================================================== + test('transparency', 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.Blur); + darth.setFilterRadius(100); + layer.draw(); + + var tween = new Kinetic.Tween({ + node: darth, + duration: 2.0, + filterRadius: 0, + easing: Kinetic.Easings.EaseInOut + }); + + darth.on('mouseover', function() { + tween.play(); + }); + + darth.on('mouseout', function() { + tween.reverse(); + }); + + done(); + + }; + imageObj.src = 'assets/lion.png'; + }); + }); \ No newline at end of file diff --git a/test/unit/filters/Brighten-test.js b/test/unit/filters/Brighten-test.js index 27cb7f9f..b56184ce 100644 --- a/test/unit/filters/Brighten-test.js +++ b/test/unit/filters/Brighten-test.js @@ -103,4 +103,48 @@ suite('Brighten', function() { imageObj.src = 'assets/darth-vader.jpg'; }); + // ====================================================== + test('tween transparency', 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.Brighten); + darth.setFilterBrightness(100); + layer.draw(); + + var tween = new Kinetic.Tween({ + node: darth, + duration: 2.0, + filterBrightness: -100, + easing: Kinetic.Easings.EaseInOut + }); + + darth.on('mouseover', function() { + tween.play(); + }); + + darth.on('mouseout', function() { + tween.reverse(); + }); + + done(); + + }; + imageObj.src = 'assets/lion.png'; + }); + + }); \ No newline at end of file diff --git a/test/unit/filters/ColorPack-test.js b/test/unit/filters/ColorPack-test.js index 02ff6509..2ab811e5 100644 --- a/test/unit/filters/ColorPack-test.js +++ b/test/unit/filters/ColorPack-test.js @@ -1,6 +1,6 @@ suite('Color Pack', function() { // ====================================================== - test('colorize', function(done) { + test('colorize basic', function(done) { var stage = addStage(); var imageObj = new Image(); @@ -31,7 +31,7 @@ suite('Color Pack', function() { }); // ====================================================== - test('crop', function(done) { + test('colorize crop', function(done) { var stage = addStage(); var imageObj = new Image(); @@ -61,4 +61,32 @@ suite('Color Pack', function() { imageObj.src = 'assets/darth-vader.jpg'; }); + // ====================================================== + test('colorize 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.Colorize); + darth.setFilterColorizeColor([0,128,255]); + layer.draw(); + + done(); + }; + imageObj.src = 'assets/lion.png'; + + }); + }); \ No newline at end of file From 98fef5eb674ac7192e15ca2530da72508156d8e9 Mon Sep 17 00:00:00 2001 From: ippo615 Date: Sun, 29 Sep 2013 14:51:49 -0400 Subject: [PATCH 08/13] Added invert filter test --- test/unit/filters/Invert-test.js | 84 ++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 test/unit/filters/Invert-test.js diff --git a/test/unit/filters/Invert-test.js b/test/unit/filters/Invert-test.js new file mode 100644 index 00000000..1d76bffe --- /dev/null +++ b/test/unit/filters/Invert-test.js @@ -0,0 +1,84 @@ +suite('Invert', function() { + // ====================================================== + test('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.setFilter(Kinetic.Filters.Invert); + layer.draw(); + + done(); + }; + imageObj.src = 'assets/darth-vader.jpg'; + + }); + + // ====================================================== + test('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.setFilter(Kinetic.Filters.Invert); + layer.draw(); + + done(); + + }; + imageObj.src = 'assets/darth-vader.jpg'; + }); + + // ====================================================== + test('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.Invert); + layer.draw(); + + done(); + }; + imageObj.src = 'assets/lion.png'; + + }); + +}); \ No newline at end of file From 26885d18c1613c8591e670c79a63978ea7ab89a0 Mon Sep 17 00:00:00 2001 From: ippo615 Date: Sun, 29 Sep 2013 14:55:47 -0400 Subject: [PATCH 09/13] Added hue shift filter test --- test/unit/filters/ColorPack-test.js | 44 +++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/test/unit/filters/ColorPack-test.js b/test/unit/filters/ColorPack-test.js index 2ab811e5..f1c580ad 100644 --- a/test/unit/filters/ColorPack-test.js +++ b/test/unit/filters/ColorPack-test.js @@ -89,4 +89,48 @@ suite('Color Pack', 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.setFilter(Kinetic.Filters.ShiftHue); + darth.setFilterHueShiftDeg(360); + layer.draw(); + + var tween = new Kinetic.Tween({ + node: darth, + duration: 5.0, + filterHueShiftDeg: 0, + easing: Kinetic.Easings.EaseInOut + }); + + darth.on('mouseover', function() { + tween.play(); + }); + + darth.on('mouseout', function() { + tween.reverse(); + }); + + done(); + }; + imageObj.src = 'assets/lion.png'; + + }); + }); \ No newline at end of file From e98d31e18b558360a91fc40ce7b1a2690ce44608 Mon Sep 17 00:00:00 2001 From: ippo615 Date: Sun, 29 Sep 2013 15:00:42 -0400 Subject: [PATCH 10/13] Added mask filter test --- test/unit/filters/Mask-test.js | 42 ++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 test/unit/filters/Mask-test.js diff --git a/test/unit/filters/Mask-test.js b/test/unit/filters/Mask-test.js new file mode 100644 index 00000000..9560178d --- /dev/null +++ b/test/unit/filters/Mask-test.js @@ -0,0 +1,42 @@ +suite('Mask', function() { + + // ====================================================== + test('basic', function(done) { + var stage = addStage(); + + var imageObj = new Image(); + imageObj.onload = function() { + + var layer = new Kinetic.Layer({ + throttle: 999 + }); + var bamoon = new Kinetic.Image({ + x: 0, + y: 0, + image: imageObj, + draggable: true + }), + filtered = new Kinetic.Image({ + x: 300, + y: 0, + image: imageObj, + draggable: true + }); + + layer.add(bamoon); + layer.add(filtered); + stage.add(layer); + + filtered.setFilter(Kinetic.Filters.Mask); + filtered.setFilterThreshold(10); + + layer.draw(); + + done(); + + }; + imageObj.src = 'assets/bamoon.jpg'; + + }); + +}); \ No newline at end of file From 9e7f27dfe3ab63b104eba46fc36657bae7f4f062 Mon Sep 17 00:00:00 2001 From: ippo615 Date: Sun, 29 Sep 2013 15:06:59 -0400 Subject: [PATCH 11/13] Added convolve pack filter tests --- test/unit/filters/ConvolvePack-test.js | 175 +++++++++++++++++++++++++ 1 file changed, 175 insertions(+) create mode 100644 test/unit/filters/ConvolvePack-test.js diff --git a/test/unit/filters/ConvolvePack-test.js b/test/unit/filters/ConvolvePack-test.js new file mode 100644 index 00000000..51e22748 --- /dev/null +++ b/test/unit/filters/ConvolvePack-test.js @@ -0,0 +1,175 @@ +suite('Convolve Pack', function() { + + // ====================================================== + test('emboss', 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.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(); + }); + + done(); + + }; + //imageObj.src = 'assets/darth-vader.jpg'; + imageObj.src = 'assets/lion.png'; + + }); + + // ====================================================== + test('edge detect', 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.Edge); + 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(); + }); + + done(); + + }; + //imageObj.src = 'assets/darth-vader.jpg'; + imageObj.src = 'assets/lion.png'; + + }); + + // ====================================================== + test('unsharp mask', 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.UnsharpMask); + 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(); + }); + + done(); + + }; + //imageObj.src = 'assets/darth-vader.jpg'; + imageObj.src = 'assets/lion.png'; + + }); + + // ====================================================== + test('soft blur', 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.SoftBlur); + 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(); + }); + + done(); + + }; + //imageObj.src = 'assets/darth-vader.jpg'; + imageObj.src = 'assets/lion.png'; + + }); + +}); \ No newline at end of file From a9c0833a36b20ebbd64d5a0e33dc129ccd161141 Mon Sep 17 00:00:00 2001 From: ippo615 Date: Sun, 29 Sep 2013 15:09:15 -0400 Subject: [PATCH 12/13] Added filter tests to runner.html --- test/runner.html | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/test/runner.html b/test/runner.html index dd2c43db..56c43e68 100644 --- a/test/runner.html +++ b/test/runner.html @@ -74,12 +74,21 @@ + + + + + + + + + - +