diff --git a/Gruntfile.js b/Gruntfile.js index ac58660b..586f7d25 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,12 +1,33 @@ module.exports = function(grunt) { var sourceFiles = [ - // core / anim + tween + dd + // core 'src/Global.js', 'src/Util.js', 'src/Canvas.js', 'src/Context.js', 'src/Factory.js', 'src/Node.js', + + // filters + 'src/filters/FilterWrapper.js', + 'src/filters/Grayscale.js', + 'src/filters/Brighten.js', + 'src/filters/Invert.js', + 'src/filters/Blur.js', + 'src/filters/Mask.js', + 'src/filters/ColorPack.js', + 'src/filters/ConvolvePack.js', + 'src/filters/ColorStretch.js', + 'src/filters/Flip.js', + 'src/filters/Levels.js', + 'src/filters/Mirror.js', + 'src/filters/Noise.js', + 'src/filters/Pixelate.js', + 'src/filters/Polar.js', + 'src/filters/Threshold.js', + 'src/filters/Sepia.js', + + // core 'src/Animation.js', 'src/Tween.js', 'src/DragAndDrop.js', @@ -33,27 +54,7 @@ module.exports = function(grunt) { 'src/plugins/TextPath.js', 'src/plugins/RegularPolygon.js', 'src/plugins/Star.js', - 'src/plugins/Label.js', - - // filters - 'src/filters/FilterWrapper.js', - 'src/filters/Grayscale.js', - 'src/filters/Brighten.js', - 'src/filters/Invert.js', - 'src/filters/Blur.js', - 'src/filters/QuickBlur.js', - 'src/filters/Mask.js', - 'src/filters/ColorPack.js', - 'src/filters/ConvolvePack.js', - 'src/filters/ColorStretch.js', - 'src/filters/Flip.js', - 'src/filters/Levels.js', - 'src/filters/Mirror.js', - 'src/filters/Noise.js', - 'src/filters/Pixelate.js', - 'src/filters/Polar.js', - 'src/filters/Threshold.js', - 'src/filters/Sepia.js' + 'src/plugins/Label.js' ]; // Project configuration. diff --git a/src/Container.js b/src/Container.js index 1686b994..ec3b678f 100644 --- a/src/Container.js +++ b/src/Container.js @@ -241,26 +241,41 @@ drawScene: function(can) { var layer = this.getLayer(), canvas = can || (layer && layer.getCanvas()), + context = canvas && canvas.getContext(), cachedCanvas = this._cache.canvas, cachedSceneCanvas = cachedCanvas && cachedCanvas.scene; if (this.isVisible()) { - this._draw(canvas, cachedSceneCanvas, 'drawScene'); + if (cachedSceneCanvas) { + this._drawCachedSceneCanvas(context); + } + else { + this._drawChildren(canvas, 'drawScene'); + } } return this; }, drawHit: function(can) { var layer = this.getLayer(), canvas = can || (layer && layer.hitCanvas), + context = canvas && canvas.getContext(), cachedCanvas = this._cache.canvas, cachedHitCanvas = cachedCanvas && cachedCanvas.hit; if (this.shouldDrawHit()) { - this._draw(canvas, cachedHitCanvas, 'drawHit'); + if (cachedHitCanvas) { + context.save(); + context._applyTransform(this); + context.drawImage(cachedHitCanvas._canvas, 0, 0); + context.restore(); + } + else { + this._drawChildren(canvas, 'drawHit'); + } } return this; }, - _draw: function(canvas, cachedCanvas, drawMethod) { + _drawChildren: function(canvas, drawMethod) { var context = canvas && canvas.getContext(), clipWidth = this.getClipWidth(), clipHeight = this.getClipHeight(), @@ -279,17 +294,9 @@ context.reset(); } - if (cachedCanvas) { - context.save(); - context._applyTransform(this); - context.drawImage(cachedCanvas._canvas, 0, 0); - context.restore(); - } - else { - this.children.each(function(child) { - child[drawMethod](canvas); - }); - } + this.children.each(function(child) { + child[drawMethod](canvas); + }); if (hasClip) { context.restore(); diff --git a/src/Factory.js b/src/Factory.js index 053bc712..7f67cb2d 100644 --- a/src/Factory.js +++ b/src/Factory.js @@ -111,11 +111,17 @@ this.addColorComponentSetter(constructor, attr, G); this.addColorComponentSetter(constructor, attr, B); + // overloaders this.addOverloadedGetterSetter(constructor, attr + RGB); this.addOverloadedGetterSetter(constructor, attr + UPPER_R); this.addOverloadedGetterSetter(constructor, attr + UPPER_G); this.addOverloadedGetterSetter(constructor, attr + UPPER_B); }, + addFilterGetterSetter: function(constructor, attr, def) { + this.addGetter(constructor, attr, def); + this.addFilterSetter(constructor, attr); + this.addOverloadedGetterSetter(constructor, attr); + }, // getter adders addColorRGBGetter: function(constructor, attr) { @@ -237,6 +243,15 @@ return this; }; }, + addFilterSetter: function(constructor, attr) { + var method = SET + Kinetic.Util._capitalize(attr); + + constructor.prototype[method] = function(val) { + this._setAttr(attr, val); + this._filterUpToDate = false; + return this; + }; + }, addPointSetter: function(constructor, attr) { var that = this, baseMethod = SET + Kinetic.Util._capitalize(attr); diff --git a/src/Node.js b/src/Node.js index 0dc69c97..43ce8995 100644 --- a/src/Node.js +++ b/src/Node.js @@ -43,6 +43,7 @@ this.eventListeners = {}; this.attrs = {}; this._cache = {}; + this._filterUpToDate = false; this.setAttrs(config); // event bindings for cache handling @@ -112,18 +113,25 @@ * @example * node.cache(); */ - cache: function(box) { - var x = box.x || 0, + cache: function(b) { + var box = b || {}, + x = box.x || 0, y = box.y || 0, + width = box.width || this.width(), + height = box.height || this.height(), sceneCanvasCache = new Kinetic.SceneCanvas({ pixelRatio: 1, - width: box.width, - height: box.height + width: width, + height: height + }), + filterCanvasCache = new Kinetic.SceneCanvas({ + pixelRatio: 1, + width: width, + height: height }), hitCanvasCache = new Kinetic.HitCanvas({ - pixelRatio: 1, - width: box.width, - height: box.height + width: width, + height: height }), origTransEnabled = this.transformsEnabled(), origX = this.x(), @@ -142,6 +150,7 @@ this._cache.canvas = { scene: sceneCanvasCache, + filter: filterCanvasCache, hit: hitCanvasCache, x: x, y: y @@ -149,6 +158,48 @@ return this; }, + _drawCachedSceneCanvas: function(context) { + var filters = this.filters(), + cachedCanvas = this._cache.canvas, + sceneCanvas = cachedCanvas.scene, + filterCanvas = cachedCanvas.filter, + filterContext = filterCanvas.getContext(), + len, imageData, n, filter; + + context.save(); + context._applyTransform(this); + + if (filters) { + if (!this._filterUpToDate) { + try { + len = filters.length; + filterContext.clear(); + // copy cached canvas onto filter context + filterContext.drawImage(sceneCanvas._canvas, 0, 0); + imageData = filterContext.getImageData(0, 0, filterCanvas.getWidth(), filterCanvas.getHeight()); + + // apply filters to filter context + for (n=0; n + * node.filters([Kinetic.Filters.Blur]);

+ * + * // get filters
+ * var filters = node.filters(); + */ + Kinetic.Factory.addGetterSetter(Kinetic.Node, 'visible', 'inherit'); /** diff --git a/src/Shape.js b/src/Shape.js index b3a128fa..ef243016 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -236,19 +236,16 @@ var canvas = can || this.getLayer().getCanvas(), context = canvas.getContext(), cachedCanvas = this._cache.canvas, - cachedSceneCanvas = cachedCanvas && cachedCanvas.scene, drawFunc = this.getDrawFunc(), hasShadow = this.hasShadow(), stage, bufferCanvas, bufferContext; if(this.isVisible()) { - context.save(); - - if (cachedSceneCanvas) { - context._applyTransform(this); - context.drawImage(cachedSceneCanvas._canvas, 0, 0); + if (cachedCanvas) { + this._drawCachedSceneCanvas(context); } else if (drawFunc) { + context.save(); // if buffer canvas is needed if (this._useBufferCanvas()) { stage = this.getStage(); @@ -286,10 +283,9 @@ context._applyOpacity(this); drawFunc.call(this, context); - } + } + context.restore(); } - - context.restore(); } return this; @@ -302,18 +298,22 @@ cachedHitCanvas = cachedCanvas && cachedCanvas.hit; if(this.shouldDrawHit()) { - context.save(); + if (cachedHitCanvas) { + context.save(); context._applyTransform(this); context.drawImage(cachedHitCanvas._canvas, 0, 0); + context.restore(); } else if (drawFunc) { + context.save(); context._applyLineJoin(this); context._applyTransform(this); drawFunc.call(this, context); + context.restore(); } - context.restore(); + } return this; diff --git a/src/filters/Blur.js b/src/filters/Blur.js index 389c9d2e..efd7c3f8 100644 --- a/src/filters/Blur.js +++ b/src/filters/Blur.js @@ -352,24 +352,19 @@ Blur(src, dst||src, opt ); }else{ Blur.call(this, src, dst||src, opt || { - filterRadius: this.getFilterRadius() + filterRadius: this.blurRadius() }); } }; - Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterRadius', 0); + Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'blurRadius', 0); /** - * get filter radius. Returns the radius for Gaussian blur filter. - * @name getFilterRadius - * @method - * @memberof Kinetic.Image.prototype - */ - - /** - * get filter radius. Set the radius for Gaussian blur filter. - * @name setFilterRadius + * get/set blur radius + * @name blurRadius * @method * @memberof Kinetic.Image.prototype + * @param {Integer} radius + * @returns {Integer} */ })(); \ No newline at end of file diff --git a/src/filters/Brighten.js b/src/filters/Brighten.js index d372fd89..7f16d8e3 100644 --- a/src/filters/Brighten.js +++ b/src/filters/Brighten.js @@ -18,7 +18,7 @@ } }; - Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterBrightness', 0); + Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'brightness', 0); /** * get filter brightness. The brightness is a number between -255 and 255.  Positive values * increase the brightness and negative values decrease the brightness, making the image darker diff --git a/src/filters/ColorPack.js b/src/filters/ColorPack.js index 88893822..0f9f25f0 100644 --- a/src/filters/ColorPack.js +++ b/src/filters/ColorPack.js @@ -70,9 +70,9 @@ }; - Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterHue', 0); - Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterSaturation', 1); - Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterValue', 1); + Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'hue', 0); + Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'saturation', 1); + Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'value', 1); Kinetic.Filters.HSV = function(src,dst,opt){ if( this === Kinetic.Filters ){ @@ -97,7 +97,7 @@ } }; - Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterHueShiftDeg', 0); + Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'hueShiftDeg', 0); /** * get filter hue. Returns the hue shift for the HSV filter. @@ -184,7 +184,7 @@ } }; - Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterColorizeColor', [255,0,0] ); + Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'colorizeColor', [255,0,0] ); /** * Gets the colorizing color. * @name getFilterColorizeColor diff --git a/src/filters/ConvolvePack.js b/src/filters/ConvolvePack.js index b160d679..1127a8bb 100644 --- a/src/filters/ConvolvePack.js +++ b/src/filters/ConvolvePack.js @@ -68,7 +68,7 @@ return kernel; }; - Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterAmount', 50); + Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'convoltion', 50); /** * get the current filter amount * @name getFilterAmount diff --git a/src/filters/Levels.js b/src/filters/Levels.js index 2a41beb7..527326d0 100644 --- a/src/filters/Levels.js +++ b/src/filters/Levels.js @@ -37,7 +37,7 @@ } }; - Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'quantizationLevels', 4); + Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'quantizationLevels', 4); /** * get quantization levels. Returns the number of unique levels for each color diff --git a/src/filters/Mask.js b/src/filters/Mask.js index 97834e8d..26c82fac 100644 --- a/src/filters/Mask.js +++ b/src/filters/Mask.js @@ -191,7 +191,7 @@ return idata; }; - Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'filterThreshold', 0); + Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'threshold', 0); //threshold The RGB euclidian distance threshold (default : 10) diff --git a/src/filters/Noise.js b/src/filters/Noise.js index 6bdaa194..561d8917 100644 --- a/src/filters/Noise.js +++ b/src/filters/Noise.js @@ -40,7 +40,7 @@ } }; - Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'noiseAmount', 32); + Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'noise', 32); Kinetic.Filters.Noise = function(src,dst,opt){ if( this === Kinetic.Filters ){ diff --git a/src/filters/Pixelate.js b/src/filters/Pixelate.js index 2a9bd175..5a890015 100644 --- a/src/filters/Pixelate.js +++ b/src/filters/Pixelate.js @@ -86,16 +86,15 @@ }; - Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'pixelWidth', 8); - Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'pixelHeight', 8); + Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'pixelationSize', 8); Kinetic.Filters.Pixelate = function(src,dst,opt){ if( this === Kinetic.Filters ){ Pixelate(src, dst||src, opt ); }else{ Pixelate.call(this, src, dst||src, opt || { - pixelWidth: this.getPixelWidth(), - pixelHeight: this.getPixelHeight() + pixelWidth: this.pixelationSize(), + pixelHeight: this.pixelationSize() }); } }; diff --git a/src/filters/QuickBlur.js b/src/filters/QuickBlur.js deleted file mode 100644 index 0031494d..00000000 --- a/src/filters/QuickBlur.js +++ /dev/null @@ -1,198 +0,0 @@ -(function () { - - /** - * BlurX Filter. Blurs the image in the X direction (horizontally). It - * performs w*h pixel reads, and w*h pixel writes. It is faster than a - * Gaussian blur but does not look as nice. Use Kinetic.Filters.Blur for - * a Gaussian blur. - * @function - * @author ippo615 - * @memberof Kinetic.Filters - * @param {ImageData} src, the source image data (what will be transformed) - * @param {ImageData} dst, the destination image data (where it will be saved) - * @param {Object} opt - * @param {Number} [opt.blurWidth] how many neighboring pixels to will affect the - * blurred pixel, default: 5 - */ - - var BlurX = function(src,dst,opt){ - - var srcPixels = src.data, - dstPixels = dst.data, - xSize = src.width, - ySize = src.height, - i, m, x, y, k, tmp, r=0,g=0,b=0,a=0; - - // DONT USE: kSize = opt.blurWidth || 5; - // HINT: consider when (opt.blurWidth = 0) - var kSize = 5; - if( opt.hasOwnProperty('blurWidth') ){ - kSize = Math.round( Math.abs(opt.blurWidth) )+1; - } - var kMid = Math.floor(kSize/2); - - //console.info('Blur Width: '+kSize); - //console.info('Blur Middle: '+kMid); - - var xEnd = xSize - kMid; - - for (y = 0; y < ySize; y += 1) { - r=0;g=0;b=0;a=0; - for (x=-kMid; x - diff --git a/test/unit/filters/Blur-test.js b/test/unit/filters/Blur-test.js index bea2a814..47b04b90 100644 --- a/test/unit/filters/Blur-test.js +++ b/test/unit/filters/Blur-test.js @@ -17,11 +17,25 @@ suite('Blur', function() { layer.add(darth); stage.add(layer); - darth.setFilter(Kinetic.Filters.Blur); - darth.setFilterRadius(10); + darth.cache(); + darth.filters([Kinetic.Filters.Blur]); + darth.blurRadius(10); + + assert.equal(darth.blurRadius(), 10); + assert.equal(darth._filterUpToDate, false); + layer.draw(); - assert.equal(darth.getFilterRadius(), 10); + assert.equal(darth._filterUpToDate, true); + + darth.blurRadius(20); + + assert.equal(darth.blurRadius(), 20); + assert.equal(darth._filterUpToDate, false); + + layer.draw(); + + assert.equal(darth._filterUpToDate, true); done(); }; @@ -29,6 +43,78 @@ suite('Blur', function() { }); + test('blur group', function(){ + var stage = addStage(); + var layer = new Kinetic.Layer(); + var group = new Kinetic.Group({ + x: 100, + y: 100, + draggable: true + }); + var top = new Kinetic.Circle({ + x: 0, + y: -70, + radius: 30, + fill: 'blue', + stroke: 'black', + strokeWidth: 4 + }); + var right = new Kinetic.Circle({ + x: 70, + y: 0, + radius: 30, + fill: 'blue', + stroke: 'black', + strokeWidth: 4 + }); + var bottom = new Kinetic.Circle({ + x: 0, + y: 70, + radius: 30, + fill: 'blue', + stroke: 'black', + strokeWidth: 4 + }); + var left = new Kinetic.Circle({ + x: -70, + y: 0, + radius: 30, + fill: 'blue', + stroke: 'black', + strokeWidth: 4 + }); + + group.add(top).add(right).add(bottom).add(left); + layer.add(group); + stage.add(layer); + + group.cache({ + x: -150, + y: -150, + width: 300, + height: 300 + }); + + group.offset({ + x: 150, + y: 150 + }); + + group.filters([Kinetic.Filters.Blur]); + group.blurRadius(20); + + layer.draw(); + + //document.body.appendChild(group._cache.canvas.scene._canvas); + + + + + + + showHit(layer); + }); + // ====================================================== test('tween blur', function(done) { var stage = addStage(); @@ -47,14 +133,15 @@ suite('Blur', function() { layer.add(darth); stage.add(layer); - darth.setFilter(Kinetic.Filters.Blur); - darth.setFilterRadius(100); + darth.cache(); + darth.filters([Kinetic.Filters.Blur]); + darth.blurRadius(100); layer.draw(); var tween = new Kinetic.Tween({ node: darth, duration: 2.0, - filterRadius: 0, + blurRadius: 0, easing: Kinetic.Easings.EaseInOut }); @@ -91,8 +178,9 @@ suite('Blur', function() { layer.add(darth); stage.add(layer); - darth.setFilter(Kinetic.Filters.Blur); - darth.setFilterRadius(10); + darth.cache(); + darth.filters([Kinetic.Filters.Blur]); + darth.blurRadius(10); layer.draw(); done(); @@ -120,14 +208,15 @@ suite('Blur', function() { layer.add(darth); stage.add(layer); - darth.setFilter(Kinetic.Filters.Blur); - darth.setFilterRadius(100); + darth.cache(); + darth.filters([Kinetic.Filters.Blur]); + darth.blurRadius(100); layer.draw(); var tween = new Kinetic.Tween({ node: darth, duration: 2.0, - filterRadius: 0, + blurRadius: 0, easing: Kinetic.Easings.EaseInOut }); @@ -163,14 +252,15 @@ suite('Blur', function() { layer.add(darth); stage.add(layer); - darth.setFilter(Kinetic.Filters.Blur); - darth.setFilterRadius(100); + darth.cache(); + darth.filters([Kinetic.Filters.Blur]); + darth.blurRadius(100); layer.draw(); var tween = new Kinetic.Tween({ node: darth, duration: 2.0, - filterRadius: 0, + blurRadius: 0, easing: Kinetic.Easings.EaseInOut }); @@ -189,64 +279,64 @@ suite('Blur', function() { }); // ====================================================== - test('half layer gaussian blur', function (done) { - var stage = addStage(); + // test('half layer gaussian blur', function (done) { + // var stage = addStage(); - var shapesLayer = new Kinetic.Layer(); + // var shapesLayer = new Kinetic.Layer(); - // The important line! - shapesLayer.on('draw', function () { - var imageData = this.getContext().getImageData(0,0,this.getCanvas().width/2,this.getCanvas().height); - var scratchData = this.getContext().createImageData(imageData); // only size copied - Kinetic.Filters.Blur(imageData,scratchData,{filterRadius:24}); - this.getContext().putImageData(scratchData,0,0); - }); + // // The important line! + // shapesLayer.on('draw', function () { + // var imageData = this.getContext().getImageData(0,0,this.getCanvas().width/2,this.getCanvas().height); + // var scratchData = this.getContext().createImageData(imageData); // only size copied + // Kinetic.Filters.Blur(imageData,scratchData,{filterRadius:24}); + // this.getContext().putImageData(scratchData,0,0); + // }); - var triangle = new Kinetic.RegularPolygon({ - x: stage.getWidth() / 4, - y: stage.getHeight() / 2, - sides: 3, - radius: 80, - fillRadialGradientEndRadius: 70, - fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'], - stroke: 'black', - strokeWidth: 4, - draggable: true - }); + // var triangle = new Kinetic.RegularPolygon({ + // x: stage.getWidth() / 4, + // y: stage.getHeight() / 2, + // sides: 3, + // radius: 80, + // 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' - }); + // 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); - } - } + // 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); + // shapesLayer.add(circle); + // shapesLayer.add(triangle); - stage.add(shapesLayer); + // stage.add(shapesLayer); - done(); - }); + // done(); + // }); }); \ No newline at end of file diff --git a/test/unit/filters/QuickBlur-test.js b/test/unit/filters/QuickBlur-test.js deleted file mode 100644 index deef2c10..00000000 --- a/test/unit/filters/QuickBlur-test.js +++ /dev/null @@ -1,154 +0,0 @@ -suite('Quick Blur', function() { - - // ====================================================== - test('half layer blur', function (done) { - var stage = addStage(); - - var shapesLayer = new Kinetic.Layer(); - - // The important line! - shapesLayer.on('draw', function () { - var imageData = this.getContext().getImageData(0,0,this.getCanvas().width/2,this.getCanvas().height); - var scratchData = this.getContext().createImageData(imageData); // only size copied - Kinetic.Filters.BlurX(imageData,scratchData,{blurWidth:24}); - Kinetic.Filters.BlurY(scratchData,imageData,{blurHeight:24}); - this.getContext().putImageData(imageData,0,0); - }); - - 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('tween x 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.BlurX); - darth.setBlurWidth(100); - layer.draw(); - - var tween = new Kinetic.Tween({ - node: darth, - duration: 2.0, - blurWidth: 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('tween y 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.BlurY); - darth.setBlurHeight(100); - layer.draw(); - - var tween = new Kinetic.Tween({ - node: darth, - duration: 2.0, - blurHeight: 0, - easing: Kinetic.Easings.EaseInOut - }); - - darth.on('mouseover', function() { - tween.play(); - }); - - darth.on('mouseout', function() { - tween.reverse(); - }); - - done(); - - }; - imageObj.src = 'assets/darth-vader.jpg'; - }); - -}); \ No newline at end of file