lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-07-15 09:53:04 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:ericdrowell/KineticJS

Browse Source
This commit is contained in:
Eric Rowell 2014-01-06 21:51:58 -08:00
commit e594aa5656
2 changed files with 60 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/filters/Kaleidoscope.js
View File

@ -231,10 +231,11 @@
Kinetic.Filters.Kaleidoscope = function(imageData){ Kinetic.Filters.Kaleidoscope = function(imageData){
var xSize = imageData.width, var xSize = imageData.width,
ySize = imageData.height; ySize = imageData.height;
var nCopies = Math.round( this.kaleidoscopeSides() ); var power = Math.round( this.kaleidoscopePower() );
var size = Math.round( this.kaleidoscopeSides() ); var angle = Math.round( this.kaleidoscopeAngle() );
var offset = this.kaleidoscopeOffset() || 0; var offset = Math.floor(xSize*(angle%360)/360);
if( nCopies < 1 ){return;}
if( power < 1 ){return;}
// Work with our shared buffer canvas // Work with our shared buffer canvas
tempCanvas.width = xSize; tempCanvas.width = xSize;
@ -247,15 +248,29 @@
polarCenterY:ySize/2 polarCenterY:ySize/2
}); });
// Copy/repeat a section along the r axis for effect // Determine how big each section will be, if it's too small
//var sectionSize = size; //Math.floor(xSize/nCopies); // make it bigger
//var nCopies = xSize/sectionSize; var minSectionSize = xSize / Math.pow(2,power);
var sectionSize = Math.ceil(xSize/nCopies); while( minSectionSize <= 8){
var x,y,xoff,i, r,g,b,a, srcPos, dstPos; minSectionSize = minSectionSize*2;
power -= 1;
}
minSectionSize = Math.ceil(minSectionSize);
var sectionSize = minSectionSize;
// Copy the offset region to 0 // Copy the offset region to 0
// Depending on the size of filter and location of the offset we may need
// to copy the section backwards to prevent it from rewriting itself
var xStart = 0,
xEnd = sectionSize,
xDelta = 1;
if( offset+minSectionSize > xSize ){
xStart = sectionSize;
xEnd = 0;
xDelta = -1;
}
for( y=0; y<ySize; y+=1 ){ for( y=0; y<ySize; y+=1 ){
for( x=0; x<sectionSize; x+=1 ){ for( x=xStart; x !== xEnd; x+=xDelta ){
xoff = Math.round(x+offset)%xSize; xoff = Math.round(x+offset)%xSize;
srcPos = (xSize*y+xoff)*4; srcPos = (xSize*y+xoff)*4;
r = scratchData.data[srcPos+0]; r = scratchData.data[srcPos+0];
@ -269,21 +284,25 @@
scratchData.data[dstPos+3] = a; scratchData.data[dstPos+3] = a;
} }
} }
// Perform the actual effect // Perform the actual effect
var x,y,xoff,i, r,g,b,a, srcPos, dstPos;
for( y=0; y<ySize; y+=1 ){ for( y=0; y<ySize; y+=1 ){
for( x=0; x<sectionSize; x+=1 ){ sectionSize = Math.floor( minSectionSize );
srcPos = (xSize*y+x)*4; for( i=0; i<power; i+=1 ){
r = scratchData.data[srcPos+0]; for( x=0; x<sectionSize+1; x+=1 ){
g = scratchData.data[srcPos+1]; srcPos = (xSize*y+x)*4;
b = scratchData.data[srcPos+2]; r = scratchData.data[srcPos+0];
a = scratchData.data[srcPos+3]; g = scratchData.data[srcPos+1];
for( i=1; i<nCopies; i+=1 ){ b = scratchData.data[srcPos+2];
dstPos = (xSize*y+x+sectionSize*i)*4; a = scratchData.data[srcPos+3];
dstPos = (xSize*y+sectionSize*2-x-1)*4;
scratchData.data[dstPos+0] = r; scratchData.data[dstPos+0] = r;
scratchData.data[dstPos+1] = g; scratchData.data[dstPos+1] = g;
scratchData.data[dstPos+2] = b; scratchData.data[dstPos+2] = b;
scratchData.data[dstPos+3] = a; scratchData.data[dstPos+3] = a;
} }
sectionSize *= 2;
} }
} }
@ -291,24 +310,24 @@
FromPolar(scratchData,imageData,{polarRotation:0}); FromPolar(scratchData,imageData,{polarRotation:0});
}; };
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'kaleidoscopeSides', 5); Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'kaleidoscopePower', 2);
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'kaleidoscopeOffset', 0); Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'kaleidoscopeAngle', 0);
/** /**
* get/set kaleidoscope side * get/set kaleidoscope power
* @name kaleidoscopeSides * @name kaleidoscopePower
* @method * @method
* @memberof Kinetic.Node.prototype * @memberof Kinetic.Node.prototype
* @param {Integer} number of sides * @param {Integer} power of kaleidoscope
* @returns {Integer} * @returns {Integer}
*/ */
/** /**
* get/set kaleidoscope offset * get/set kaleidoscope angle
* @name kaleidoscopeOffset * @name kaleidoscopeAngle
* @method * @method
* @memberof Kinetic.Node.prototype * @memberof Kinetic.Node.prototype
* @param {Integer} offset * @param {Integer} degrees
* @returns {Integer} * @returns {Integer}
*/ */
})(); })();

31
test/unit/filters/Kaleidoscope-test.js
View File

@ -19,18 +19,18 @@ suite('Kaleidoscope', function() {
darth.cache(); darth.cache();
darth.filters([Kinetic.Filters.Kaleidoscope]); darth.filters([Kinetic.Filters.Kaleidoscope]);
darth.kaleidoscopeSides(9); darth.kaleidoscopePower(2);
assert.equal(darth.kaleidoscopeSides(), 9); assert.equal(darth.kaleidoscopePower(), 2);
assert.equal(darth._filterUpToDate, false); assert.equal(darth._filterUpToDate, false);
layer.draw(); layer.draw();
assert.equal(darth._filterUpToDate, true); assert.equal(darth._filterUpToDate, true);
darth.kaleidoscopeSides(16); darth.kaleidoscopePower(3);
assert.equal(darth.kaleidoscopeSides(), 16); assert.equal(darth.kaleidoscopePower(), 3);
assert.equal(darth._filterUpToDate, false); assert.equal(darth._filterUpToDate, false);
layer.draw(); layer.draw();
@ -44,7 +44,7 @@ suite('Kaleidoscope', function() {
}); });
// ====================================================== // ======================================================
test('tween offset', function(done) { test('tween angle', function(done) {
var stage = addStage(); var stage = addStage();
var imageObj = new Image(); var imageObj = new Image();
@ -63,15 +63,14 @@ suite('Kaleidoscope', function() {
darth.cache(); darth.cache();
darth.filters([Kinetic.Filters.Kaleidoscope]); darth.filters([Kinetic.Filters.Kaleidoscope]);
darth.kaleidoscopeSides(5); darth.kaleidoscopePower(3);
darth.kaleidoscopeOffset(0); darth.kaleidoscopeAngle(0);
layer.draw(); layer.draw();
var tween = new Kinetic.Tween({ var tween = new Kinetic.Tween({
node: darth, node: darth,
duration: 4.0, duration: 10.0,
kaleidoscopeOffset: 64, kaleidoscopeAngle: 720,
//rippleSize: 64,
easing: Kinetic.Easings.EaseInOut easing: Kinetic.Easings.EaseInOut
}); });
@ -90,7 +89,7 @@ suite('Kaleidoscope', function() {
}); });
// ====================================================== // ======================================================
test('tween sides', function(done) { test('tween power', function(done) {
var stage = addStage(); var stage = addStage();
var imageObj = new Image(); var imageObj = new Image();
@ -109,15 +108,15 @@ suite('Kaleidoscope', function() {
darth.cache(); darth.cache();
darth.filters([Kinetic.Filters.Kaleidoscope]); darth.filters([Kinetic.Filters.Kaleidoscope]);
darth.kaleidoscopeSides(1); darth.kaleidoscopePower(0);
darth.kaleidoscopeOffset(0); darth.kaleidoscopeAngle(0);
layer.draw(); layer.draw();
var tween = new Kinetic.Tween({ var tween = new Kinetic.Tween({
node: darth, node: darth,
duration: 2.0, duration: 2.0,
kaleidoscopeSides: 32, kaleidoscopePower: 8,
easing: Kinetic.Easings.EaseInOut easing: Kinetic.EasingsEaseInOut
}); });
darth.on('mouseover', function() { darth.on('mouseover', function() {
@ -131,7 +130,7 @@ suite('Kaleidoscope', function() {
done(); done();
}; };
imageObj.src = 'assets/cropped-darth.jpg'; imageObj.src = 'assets/lion.png';
}); });
}); });