diff --git a/src/filters/Sepia.js b/src/filters/Sepia.js index 02c3e12e..113478d6 100644 --- a/src/filters/Sepia.js +++ b/src/filters/Sepia.js @@ -10,21 +10,12 @@ * @license MPL v1.1 [http://www.pixastic.com/lib/license.txt] */ - var Sepia = function (src, dst, opt) { - var data = src.data, - w = src.width, - y = src.height, - dstData = dst.data, + Kinetic.Filters.Sepia = function (imageData) { + var data = imageData.data, + w = imageData.width, + y = imageData.height, w4 = w*4, - offsetY, - x, - offset, - or, - og, - ob, - r, - g, - b; + offsetY, x, offset, or, og, ob, r, g, b; do { offsetY = (y-1)*w4; @@ -40,20 +31,13 @@ g = or * 0.349 + og * 0.686 + ob * 0.168; b = or * 0.272 + og * 0.534 + ob * 0.131; - dstData[offset] = r > 255 ? 255 : r; - dstData[offset+1] = g > 255 ? 255 : g; - dstData[offset+2] = b > 255 ? 255 : b; - dstData[offset+3] = data[offset+3]; + data[offset] = r > 255 ? 255 : r; + data[offset+1] = g > 255 ? 255 : g; + data[offset+2] = b > 255 ? 255 : b; + data[offset+3] = data[offset+3]; } while (--x); } while (--y); }; - Kinetic.Filters.Sepia = function(src,dst,opt){ - if( this === Kinetic.Filters ){ - Sepia(src, dst||src, opt ); - }else{ - Sepia.call(this, src, dst||src, {} ); - } - }; })(); diff --git a/test/runner.html b/test/runner.html index 80dd8718..f251eec0 100644 --- a/test/runner.html +++ b/test/runner.html @@ -95,8 +95,8 @@ - + + diff --git a/test/unit/filters/Sepia-test.js b/test/unit/filters/Sepia-test.js index 9fecdbbe..1b9e3d74 100644 --- a/test/unit/filters/Sepia-test.js +++ b/test/unit/filters/Sepia-test.js @@ -17,7 +17,8 @@ suite('Filter Sepia', function() { layer.add(darth); stage.add(layer); - darth.setFilter(Kinetic.Filters.Sepia); + darth.cache(); + darth.filters([Kinetic.Filters.Sepia]); layer.draw(); done(); @@ -39,13 +40,17 @@ suite('Filter Sepia', function() { y: 10, image: imageObj, crop: {x:128, y:48, width:256, height:128}, - filter: Kinetic.Filters.Sepia, draggable: true }); + layer.add(darth); stage.add(layer); + darth.cache(); + darth.filters([Kinetic.Filters.Sepia]); + layer.draw(); + done(); }; @@ -70,7 +75,8 @@ suite('Filter Sepia', function() { layer.add(darth); stage.add(layer); - darth.setFilter(Kinetic.Filters.Sepia); + darth.cache(); + darth.filters([Kinetic.Filters.Sepia]); layer.draw(); done(); @@ -78,69 +84,4 @@ suite('Filter Sepia', function() { imageObj.src = 'assets/lion.png'; }); - - // ====================================================== - test('half layer', 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.Sepia(imageData,scratchData,{}); - this.getContext().putImageData(scratchData,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(); - }); - }); \ No newline at end of file