使透明橡皮擦在动力学

Make transparent eraser in kineticjs

本文关键字：动力学 橡皮擦 透明      更新时间：2023-09-26

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

我需要擦除部分多边形，这是在某些图像，使部分多边形透明，图像应该保持不变。

您需要访问上下文的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});
相关文章：