Kineticjs 通过蒙版图像剪辑形状

Question

我有这样的蒙版图片

如何像在 photoshop 中那样通过此蒙版隐藏绘制的元素（暗区不可见，显示透明区域）。

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

中执行此操作

Answer 1

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

Answer 2

你可以这样做：

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

Kineticjs 通过蒙版图像剪辑形状

Kineticjs clip shape by mask image

javascript

kineticjs