added support for image hit detection with new color mapping algo

dist/kinetic-core.js

@@ -3,7 +3,7 @@
  * http://www.kineticjs.com/
  * Copyright 2012, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Aug 13 2012
+ * Date: Aug 14 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -39,7 +39,7 @@ Kinetic.Plugins = {};
 Kinetic.Global = {
     BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
     BUFFER_WHITELIST: ['fill', 'stroke', 'textFill', 'textStroke'],
-    BUFFER_BLACKLIST: ['shadow'],
+    BUFFER_BLACKLIST: ['shadow', 'image'],
     stages: [],
     idCounter: 0,
     tempNodes: {},
@@ -4165,7 +4165,12 @@ Kinetic.Shape = Kinetic.Node.extend({
             var wl = Kinetic.Global.BUFFER_WHITELIST;
             var bl = Kinetic.Global.BUFFER_BLACKLIST;
             var attrs = {};
+
             if(canvas.name === 'buffer') {
+                if('image' in this.attrs) {
+                    this.attrs.fill = '#' + this.colorKey;
+                }
+
                 for(var n = 0; n < wl.length; n++) {
                     var key = wl[n];
                     attrs[key] = this.attrs[key];
@@ -4178,6 +4183,7 @@ Kinetic.Shape = Kinetic.Node.extend({
                     attrs[key] = this.attrs[key];
                     this.attrs[key] = '';
                 }
+
                 context.globalAlpha = 1;
             }
 
@@ -4491,7 +4497,6 @@ Kinetic.Image = Kinetic.Shape.extend({
         this._super(config);
     },
     drawFunc: function(context) {
-        if(this.attrs.image) {
         var width = this.getWidth();
         var height = this.getHeight();
 
@@ -4501,6 +4506,8 @@ Kinetic.Image = Kinetic.Shape.extend({
         this.fill(context);
         this.stroke(context);
         
+        if(this.attrs.image) {
+        	context.beginPath();
             // if cropping
             if(this.attrs.crop && this.attrs.crop.width && this.attrs.crop.height) {
                 var cropX = this.attrs.crop.x ? this.attrs.crop.x : 0;

src/Global.js

@@ -11,7 +11,7 @@ Kinetic.Plugins = {};
 Kinetic.Global = {
     BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
     BUFFER_WHITELIST: ['fill', 'stroke', 'textFill', 'textStroke'],
-    BUFFER_BLACKLIST: ['shadow'],
+    BUFFER_BLACKLIST: ['shadow', 'image'],
     stages: [],
     idCounter: 0,
     tempNodes: {},

src/Shape.js

@@ -355,7 +355,12 @@ Kinetic.Shape = Kinetic.Node.extend({
             var wl = Kinetic.Global.BUFFER_WHITELIST;
             var bl = Kinetic.Global.BUFFER_BLACKLIST;
             var attrs = {};
+
             if(canvas.name === 'buffer') {
+                if('image' in this.attrs) {
+                    this.attrs.fill = '#' + this.colorKey;
+                }
+
                 for(var n = 0; n < wl.length; n++) {
                     var key = wl[n];
                     attrs[key] = this.attrs[key];
@@ -368,6 +373,7 @@ Kinetic.Shape = Kinetic.Node.extend({
                     attrs[key] = this.attrs[key];
                     this.attrs[key] = '';
                 }
+
                 context.globalAlpha = 1;
             }
 

src/shapes/Image.js

@@ -19,7 +19,6 @@ Kinetic.Image = Kinetic.Shape.extend({
         this._super(config);
     },
     drawFunc: function(context) {
-        if(this.attrs.image) {
         var width = this.getWidth();
         var height = this.getHeight();
 
@@ -29,6 +28,8 @@ Kinetic.Image = Kinetic.Shape.extend({
         this.fill(context);
         this.stroke(context);
         
+        if(this.attrs.image) {
+        	context.beginPath();
             // if cropping
             if(this.attrs.crop && this.attrs.crop.width && this.attrs.crop.height) {
                 var cropX = this.attrs.crop.x ? this.attrs.crop.x : 0;

tests/js/unitTests.js

@@ -1463,7 +1463,7 @@ Test.prototype.tests = {
 
         stage.add(layer);
     },
-    'SHAPE - add image': function(containerId) {
+    '*SHAPE - add image': function(containerId) {
         var imageObj = new Image();
         imageObj.onload = function() {
             var stage = new Kinetic.Stage({
@@ -1482,12 +1482,13 @@ Test.prototype.tests = {
                 height: 100,
                 offset: [50, 30],
                 crop: [135, 7, 167, 134],
-                cornerRadius: 20
+                draggable: true
             });
 
             layer.add(darth);
             stage.add(layer);
 
+			/*
             darth.setHeight(200);
             layer.draw();
 
@@ -1509,9 +1510,6 @@ Test.prototype.tests = {
             test(crop.width === 167, 'crop width should be 167');
             test(crop.height === 134, 'crop height should be134');
 
-            /*
-             * test cropping setter
-             */
             darth.setCrop(0, 1, 2, 3);
             crop = darth.getCrop();
             test(crop.x === 0, 'crop x should be 0');
@@ -1538,9 +1536,6 @@ Test.prototype.tests = {
             test(crop.width === 10, 'crop width should be 10');
             test(crop.height === 11, 'crop height should be 11');
 
-            /*
-             * test crop partial setter
-             */
             darth.setCrop({
                 x: 12
             });
@@ -1576,6 +1571,9 @@ Test.prototype.tests = {
             test(crop.y === 13, 'crop y should be 13');
             test(crop.width === 14, 'crop width should be 14');
             test(crop.height === 15, 'crop height should be 15');
+            */
+           
+            document.body.appendChild(layer.bufferCanvas.element)
 
         };
         imageObj.src = '../assets/darth-vader.jpg';
@@ -2631,7 +2629,7 @@ Test.prototype.tests = {
         test(group.get('Group').length === 0, 'group should have 0 groups');
 
     },
-    '*SHAPE - text getters and setters': function(containerId) {
+    'SHAPE - text getters and setters': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -2676,7 +2674,6 @@ Test.prototype.tests = {
          * test getters and setters
          */
 
-		/*
         test(text.getX() === stage.getWidth() / 2, 'text box x should be in center of stage');
         test(text.getY() === stage.getHeight() / 2, 'text box y should be in center of stage');
         test(text.getStroke() === '#555', 'text box stroke should be #555');
@@ -2696,7 +2693,6 @@ Test.prototype.tests = {
         test(text.getShadow().color === 'black', 'text box shadow color should be black');
         test(text.getCornerRadius() === 10, 'text box corner radius should be 10');
         test(text.getDraggable() === true, 'text should be draggable');
-        test(text.getDetectionType() === 'path', 'text detection type should be path');
 
         test(text.getBoxWidth() === 400, 'box width should be 400');
         test(text.getBoxHeight() === 100, 'box height should be 100');
@@ -2723,7 +2719,6 @@ Test.prototype.tests = {
         });
         text.setCornerRadius(20);
         text.setDraggable(false);
-        text.setDetectionType('pixel');
 
         test(text.getX() === 1, 'text box x should be 1');
         test(text.getY() === 2, 'text box y should be 2');
@@ -2743,9 +2738,8 @@ Test.prototype.tests = {
         test(text.getShadow().color === 'green', 'text box shadow color should be green');
         test(text.getCornerRadius() === 20, 'text box corner radius should be 20');
         test(text.getDraggable() === false, 'text draggable should be false');
-        test(text.getDetectionType() === 'pixel', 'text detection type should be pixel');
+
-		*/
+		//document.body.appendChild(layer.bufferCanvas.element)
-		document.body.appendChild(layer.bufferCanvas.element)
 		
 		//layer.setListening(false);
 		layer.drawBuffer();