Kineticjs通过蒙版图像剪裁形状

Question

我有像这样的面具图片

如何通过这个蒙版隐藏绘制的元素，就像在Photoshop中一样（黑暗区域是不可见的，透明区域显示）。

可以通过设置globalCompositeOperation = 'destination-over'在原始画布中执行此操作，但我希望它在Kineticjs中

Answer 1

您可以这样做：

var shape = new Kinetic.Shape({
  drawFunc: function(context) {
    context.beginPath();
    context.rect(0, 0, image.width, image.height)
    context.closePath();
    context.fillStrokeShape(this);

     context.setAttr('globalCompositeOperation', 'destination-out');
     context.drawImage(image, 0, 0);
      context.setAttr('globalCompositeOperation', 'source-over');        
  },
  fill: '#00D2FF',
});

演示：http://jsbin.com/nebuvi/1/edit?html,js,output

Answer 2

据我所知，您可以尝试使用不透明度：0表示您的图像值。或者在图像上创建一个与矩形重叠的矩形。