在kineticjs中制作透明橡皮擦[关闭]

Question

您好，如何使用 kineticjs 或仅使用画布制作透明橡皮擦。

我需要擦除某些图像上的部分多边形，只使多边形的一部分透明并且图像应该保持不变。

Answer 1

您需要访问上下文的globalCompositeOperation="destination-out"，它充当“橡皮擦”。 KineticJS 上下文不会为您提供 globalCompositeOperation，因此您必须挖掘才能获得“真正的” html 画布上下文：

• 把你的图片放在底层
• 将多边形放在顶层
• 在顶层放置自定义形状
• 使用自定义形状获取 html 画布上下文 [context=layer.getContext()._context]
• 使用context.globalCompositeOperation="destination-out"“擦除”多边形并让下面的图像显示出来。

这是一个“擦除”到图像的形状对象的示例：

http://jsfiddle.net/m1erickson/yv9qn/

var myShape = new Kinetic.Shape({
  x: 0,
  y: 0,
  fill:"blue",
  drawFunc: function(context) {
    var ctx=layer.getContext()._context;
    ctx.save();
    ctx.globalCompositeOperation="destination-out";
    for(var i=0;i<this.cutouts.length;i++){
        var cut=this.cutouts[i];
        ctx.fillRect(cut.x,cut.y,cut.width,cut.height);
    }
    ctx.restore();  
  }
});
myShape.cutouts=[];
layer.add(myShape);

myShape.cutouts.push({x:75,y:75,width:30,height:30});
myShape.cutouts.push({x:225,y:75,width:30,height:30});
myShape.cutouts.push({x:150,y:125,width:30,height:30});