Question

I’m using Kinetic.JS library for developing HTML5 Apps.
I used Kinetic.Image to load an image (in .PNG format), and using pixel detection to detect only the non-transparent part of my image. The problem is I can’t drag my image properly although I’ve set the draggable property to true and using saveImageData method.
Image is dragged well before (using path detection). Any solution guys?
This is my code:

   var beeObj = new Image();
        beeObj.onload = function(){ 
            bee = new Kinetic.Image({ //bee is global variable
            x: 325 - 45,
            y: 145 - 83,
            image: beeObj,          
            draggable: true         
        });
        lineLayer.add(bee); 
        lineLayer.draw();
        bee.saveImageData();
   };
   beeObj.src = directory + "smile_bee.png";

Answer 1

There is no DetectionType inside your image loader..
it should be something like

bee = new Kinetic.Image({ //bee is global variable
        x: 325 - 45,
        y: 145 - 83,
        image: beeObj,          
        draggable: true,
        DetectionType: 'Pixels'         
    });

and on mouse out you can use the same function i.e

bee.saveImageData();

and also end the whole onload function with the same function
then it will work

Now Eric has release v4+
so now there is no Pixel Detection type

you can use something like

    image.createImageBuffer();

// clear image buffer

     image.clearImageBuffer();

Hope this hels..

Regards