javascript - Kinetic.js get shape hit region with color change -

first of all, have images different shapes , have recolour them, , set hit region (for onclick event) when mouse on shape. after investigate problem separately, have found both solutions, dont know how use both together.

-to use shape hit region, use .cache(), store image on cache , redraw without transparent pixels.

-to change color, iterate on imagedata pixels, change them 1 one inside loop.

for testing, i'm using original blue image (.png format) , want red image hit regions set properly, i'm using kinetic-v5.0.2.

this code.

    function makekineticimage(imageobj){       var dimage = new kinetic.shape({         scenefunc: function (context) {             context.beginpath();             console.log("scenefunc");             var x = 100;             var y = 100;             context.drawimage(imageobj, x, y, imageobj.width, imageobj.height);             var imagedata = context.getimagedata(x, y, imageobj.width, imageobj.height);             var data = imagedata.data;                              //here i'm changing color             (var = 0; < data.length; += 4) {                 //var brightness = 0.9 * data[i] + 0 * data[i + 1] + 0 * data[i + 2];                 data[i] = 255;                 data[i + 1] = 25;                 data[i + 2] = 25;             }             context.putimagedata(imagedata, x, y);             context.rect(x, y, imageobj.width, imageobj.height);             context.closepath();             context.fillstrokeshape(this);         }     });      dimage.on("click", function() {       console.log("click dimage");     });       layer.add(dimage);      /*dimage.cache({         width: 79,         height: 73,         x: 100,         y: 100     });      dimage.drawhitfromcache();*/      layer.draw();     layer.drawhit(); } 

now shape filled in other color (red) hit region dont fit shape (get image square), if uncomment .cache() , .drawhitfromcache() original image (blue) hit region on shape.

could me? thank much.

try this!!!

the relavant part of code is:

dataurl = context.getcanvas().todataurl("image/png");

var imageobj = new image(); imageobj.src = dataurl;

function makekineticimage(imageobj){         var dataurl;         var dimage = new kinetic.shape({             scenefunc: function (context) {                 context.beginpath();                 console.log("scenefunc");                 var x = 100;                 var y = 100;                 context.drawimage(imageobj, x, y, imageobj.width, imageobj.height);                 var imagedata = context.getimagedata(x, y, imageobj.width, imageobj.height);                 var data = imagedata.data;                 (var = 0; < data.length; += 4) {                     //var brightness = 0.9 * data[i] + 0 * data[i + 1] + 0 * data[i + 2];                     data[i] = 255;                     data[i + 1] = 25;                     data[i + 2] = 25;                 }                 context.putimagedata(imagedata, x, y);                 context.rect(x, y, imageobj.width, imageobj.height);                 context.closepath();                 context.fillstrokeshape(this);                 dataurl = context.getcanvas().todataurl("image/png");                 console.log(dataurl);              },             hitfunc: function(context) {                 console.log("hitfunc");                 context.beginpath();                 var x = 100;                 var y = 100;                 context.drawimage(imageobj, x, y, imageobj.width, imageobj.height);                 var imagedata = context.getimagedata(x, y, imageobj.width, imageobj.height);                 var data = imagedata.data;                 (var = 0; < data.length; += 4) {                     //var brightness = 0.9 * data[i] + 0 * data[i + 1] + 0 * data[i + 2];                     data[i] = 255;                     data[i + 1] = 25;                     data[i + 2] = 25;                 }                 context.putimagedata(imagedata, x, y);                 context.rect(x, y, imageobj.width, imageobj.height);                 context.closepath();                 context.fillstrokeshape(this);             }         });          layer.add(dimage);         layer.draw();         layer.removechildren();         var imageobj = new image();         imageobj.src = dataurl;         var kimage = new kinetic.image({             image: imageobj,             //x: 100,             //y: 100,         });          kimage.on("click", function() {             console.log("click dimage");         });          layer.add(kimage);         kimage.cache();         kimage.drawhitfromcache();         layer.draw();         layer.drawhit();     }