如何使用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