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