Merge branch 'master' of https://github.com/Ziriax/KineticJS

Fixed bug #527 - filters and cropping are now friends.

src/shapes/Image.js

@@ -40,15 +40,13 @@
             Kinetic.Shape.call(this, config);
             this.className = IMAGE;
         },
+
         drawFunc: function(context) {
-            var width = this.getWidth(),
+            var width = this.getWidth(), 
-                height = this.getHeight(),
+                height = this.getHeight(), 
-                params,
+                that = this, 
-                that = this,
+                crop,
-                cropX = this.getCropX() || 0,
+                params, 
-                cropY = this.getCropY() || 0,
-                cropWidth = this.getCropWidth(),
-                cropHeight = this.getCropHeight(),
                 image;
 
             //TODO: this logic needs to hook int othe new caching system
@@ -60,11 +58,26 @@
             }
 
             // NOTE: this.filterCanvas may be set by the above code block
+            // In that case, cropping is already applied.
             if (this.filterCanvas) {
                 image = this.filterCanvas._canvas;
+                params = [image, 0, 0, width, height];
             }
             else {
                 image = this.getImage();
+
+                if (image) {
+                    crop = this.getCrop();
+                    if (crop) {
+                        crop.x = crop.x || 0;
+                        crop.y = crop.y || 0;
+                        crop.width = crop.width || image.width - crop.x;
+                        crop.height = crop.height || image.height - crop.y;
+                        params = [image, crop.x, crop.y, crop.width, crop.height, 0, 0, width, height];
+                    } else {
+                        params = [image, 0, 0, width, height];
+                    }
+                }
             }
 
             context.beginPath();
@@ -72,22 +85,13 @@
             context.closePath();
             context.fillStrokeShape(this);
 
-            if(image) {
+            if (image) {
-                // if cropping
-                if(cropWidth && cropHeight) {
-                    params = [image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height];
-                }
-                // no cropping
-                else {
-                    params = [image, 0, 0, width, height];
-                }
-
                 context.drawImage.apply(context, params);
             }
         },
         drawHitFunc: function(context) {
-            var width = this.getWidth(),
+            var width = this.getWidth(), 
-                height = this.getHeight(),
+                height = this.getHeight(), 
                 imageHitRegion = this.imageHitRegion;
 
             if(imageHitRegion) {
@@ -110,25 +114,37 @@
                 width = this.getWidth(),
                 height = this.getHeight(),
                 filter = this.getFilter(),
+                crop = this.getCrop() || {},
                 filterCanvas, context, imageData;
 
-            if (this.filterCanvas){
+            // Determine the region we are cropping
+            crop.x = crop.x || 0;
+            crop.y = crop.y || 0;
+            crop.width = crop.width || image.width - crop.x;
+            crop.height = crop.height || image.height - crop.y;
+
+            // Make a filterCanvas the same size as the cropped image
+            if (this.filterCanvas &&
+                    this.filterCanvas.getWidth() === crop.width &&
+                    this.filterCanvas.getHeight() === crop.height) {
                 filterCanvas = this.filterCanvas;
                 filterCanvas.getContext().clear();
             }
             else {
                 filterCanvas = this.filterCanvas = new Kinetic.SceneCanvas({
-                    width: width,
+                    width: crop.width, 
-                    height: height,
+                    height: crop.height,
-                    pixelRatio: 1
+                    pixelRatio: 1,
                 });
             }
 
             context = filterCanvas.getContext();
 
             try {
-                context.drawImage(image, 0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
+                // Crop the image onto the filterCanvas then apply
-                imageData = context.getImageData(0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
+                // the filter to the filterCanvas
+                context.drawImage(image, crop.x, crop.y, crop.width, crop.height, 0,0,crop.width, crop.height);
+                imageData = context.getImageData(0, 0, crop.width, crop.height);
                 filter.call(this, imageData);
                 context.putImageData(imageData, 0, 0);
             }

test/unit/filters/Blur-test.js

@@ -1,6 +1,6 @@
 suite('Blur', function() {
     // ======================================================
-    test('basic blur', function() {
+    test('basic blur', function(done) {
         var stage = addStage();
 
         var imageObj = new Image();
@@ -21,12 +21,14 @@ suite('Blur', function() {
             darth.setFilterRadius(10);
             layer.draw();
 
+            done();
         };
         imageObj.src = 'assets/darth-vader.jpg';
+
     });
 
     // ======================================================
-    test('tween blur', function() {
+    test('tween blur', function(done) {
         var stage = addStage();
 
         var imageObj = new Image();
@@ -49,7 +51,7 @@ suite('Blur', function() {
 
             var tween = new Kinetic.Tween({
               node: darth, 
-              duration: 5.0,
+              duration: 2.0,
               filterRadius: 0,
               easing: Kinetic.Easings.EaseInOut
             });
@@ -62,12 +64,14 @@ suite('Blur', function() {
               tween.reverse();
             });
 
+            done();
+
         };
         imageObj.src = 'assets/darth-vader.jpg';
     });
 
     // ======================================================
-    test('crop blur', function() {
+    test('crop blur', function(done) {
         var stage = addStage();
 
         var imageObj = new Image();
@@ -78,7 +82,7 @@ suite('Blur', function() {
                 x: 10,
                 y: 10,
                 image: imageObj,
-                crop: {x:48, y:48, width:256, height:256},
+                crop: {x:128, y:48, width:256, height:128},
                 draggable: true
             });
 
@@ -89,6 +93,52 @@ suite('Blur', function() {
             darth.setFilterRadius(10);
             layer.draw();
 
+            done();
+
+        };
+        imageObj.src = 'assets/darth-vader.jpg';
+    });
+
+    // ======================================================
+    test('crop tween 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,
+                crop: {x:128, y:48, width:256, height:128},
+                draggable: true
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+
+            darth.setFilter(Kinetic.Filters.Blur);
+            darth.setFilterRadius(100);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 2.0,
+              filterRadius: 0,
+              easing: Kinetic.Easings.EaseInOut
+            });
+        
+            darth.on('mouseover', function() {
+              tween.play();
+            });
+      
+            darth.on('mouseout', function() {
+              tween.reverse();
+            });
+
+            done();
+
         };
         imageObj.src = 'assets/darth-vader.jpg';
     });