Question

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

我需要擦除部分图像上方的多边形部分，使多边形的一部分透明，图像应保持不变。

Answer 1

您需要访问充当＆＃34;橡皮擦＆＃34;的上下文globalCompositeOperation="destination-out"。 KineticJS上下文没有为您提供globalCompositeOperation，因此您必须挖掘以获得真实的＆＃34;真实的＆＃34; html canvas上下文：

将图片放在底层
将多边形放在顶层
在顶层放置自定义形状
使用自定义形状转到html画布上下文[context = layer.getContext（）._ context]
使用context.globalCompositeOperation="destination-out"来＆＃34;擦除＆＃34;多边形，让下面的图像透过。

这是＆＃34;擦除＆＃34;的形状对象的一个例子。到图像：

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});

在kineticjs中制作透明橡皮擦

1 个答案: