Kinetic.JS Image Unable to Drag After Using Pixel Detection
-
13-12-2019 - |
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";
Solution
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