diff --git a/src/filters/Pixelate.js b/src/filters/Pixelate.js index ee32addc..c4dabae2 100644 --- a/src/filters/Pixelate.js +++ b/src/filters/Pixelate.js @@ -18,8 +18,8 @@ var Pixelate = function (src, dst, opt) { - var xBinSize = opt.pixelWidth || 8, - yBinSize = opt.pixelHeight || 8; + var xBinSize = Math.ceil(opt.pixelWidth) || 8, + yBinSize = Math.ceil(opt.pixelHeight) || 8; var xSize = src.width, ySize = src.height, @@ -85,6 +85,50 @@ } }; - - Kinetic.Filters.Pixelate = Kinetic.Util._FilterWrapSingleBuffer(Pixelate); + + Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'pixelWidth', 8); + Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'pixelHeight', 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() + }); + } + };//Kinetic.Util._FilterWrapSingleBuffer(Pixelate); + + /** + * get filter pixel width. Returns the width of a pixelated pixel. Must be + * an integer greater than 0. A value of 4 means a pixel in the filtered + * image is as wide as 4 pixels in the original. + * @name getPixelWidth + * @method + * @memberof Kinetic.Image.prototype + */ + + /** + * set filter pixel width. + * @name setPixelWidth + * @method + * @memberof Kinetic.Image.prototype + */ + + /** + * get filter pixel height. Returns the height of a pixelated pixel. Must be + * an integer greater than 0. A value of 4 means a pixel in the filtered + * image is as tall as 4 pixels in the original. + * @name getPixelHeight + * @method + * @memberof Kinetic.Image.prototype + */ + + /** + * set filter pixel height. + * @name setPixelHeight + * @method + * @memberof Kinetic.Image.prototype + */ })(); diff --git a/test/unit/filters/Pixelate-test.js b/test/unit/filters/Pixelate-test.js index c2565dbc..fb779a21 100644 --- a/test/unit/filters/Pixelate-test.js +++ b/test/unit/filters/Pixelate-test.js @@ -64,4 +64,49 @@ suite('Pixelate', function () { done(); }); + + // ====================================================== + test('tween pixelate', 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.Pixelate); + darth.setPixelWidth(16); + darth.setPixelHeight(16); + layer.draw(); + + var tween = new Kinetic.Tween({ + node: darth, + duration: 3.0, + pixelWidth: 1, + pixelHeight: 1, + easing: Kinetic.Easings.EaseInOut + }); + + darth.on('mouseover', function() { + tween.play(); + }); + + darth.on('mouseout', function() { + tween.reverse(); + }); + + done(); + + }; + imageObj.src = 'assets/lion.png'; + }); });