如何用KineticJS將另一個PNG圖像掩蓋PNG圖像？

Question

所以，我有一張照片，我需要通過PNG蒙版（黑色/透明圖像）與另一張圖片疊加。我如何用KineticJS來做到這一點？

對不起我的英文不好

Answer 1

創建自定義Kinetic.Shape：

var image = new Kinetic.Shape({ 
    draggable: true, 
    x : 100, 
    y : 100, 
    sceneFunc : function(ctx) { 
     ctx.drawImage(mask, 0, 0); 
     ctx.setAttr('globalCompositeOperation', 'source-in'); 
     ctx.drawImage(img, 0, 0); 
    }, 
    hitFunc : function(ctx) { 
     ctx.rect(0,0,img.width, img.height); 
     ctx.fillStrokeShape(this); 
    } 
    }); 

http://jsbin.com/bagix/1/edit