mirror of
https://github.com/konvajs/konva.git
synced 2025-10-15 12:34:52 +08:00
Pixelate is tweenable and works with images.
This commit is contained in:
@@ -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
|
||||
*/
|
||||
})();
|
||||
|
@@ -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';
|
||||
});
|
||||
});
|
||||
|
Reference in New Issue
Block a user