fabricjs - 擦除 Fabric JS 上的线条

Question

我正在使用 FabricJS 在图像顶部绘制和擦除线条。我为画布做了两层，底层作为背景图像，顶层用于素描。每当我擦除标记时，如果我使用 freeDrawingBrush.color =white 或任何基本颜色，它就会被擦除。但是，如果我使用透明的 'rgba(0,0,0,0)' 作为 freeDrawingBrush 的颜色，则不会擦除标记。

如何擦除顶层上的标记，透明作为我擦除时创建的路径的背景？

<div style="position: relative;">
    <canvas id="my-canvas" width="800" height="400" style="position: absolute; left: 0; top: 0; z-index: 1;background-color:rgba(0,0,0,0)"> </canvas> 
    <canvas id="layer3" width="800" height="400" style="position: absolute; left: 0; top: 0; z-index: 0;background-image:url(http://gallery.nanfa.org/d/52271-3/DSC_7537.jpg);"></canvas>
</div>

<script>
 canvas = window._canvas = new fabric.Canvas('layer1');
 canvas.isDrawingMode= 1;
 canvas.freeDrawingBrush.width = 10;
 canvas.renderAll();

//eraser function
 function eraser(){
  canvas.freeDrawingBrush.color = "white"; // if "rgba(0,0,0,0)", not work
  canvas.on('path:created', function (opt) {
      opt.path.globalCompositeOperation = 'destination-out';
      canvas.renderAll();
  });
}

//drawing function
function draw(){
    canvas.freeDrawingBrush.color = "black";
    canvas.on('path:created', function (opt) {
        opt.path.globalCompositeOperation = 'source-over';
        canvas.renderAll();
    });
}

</script>

我在 html https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js上使用fabricjs

任何帮助将不胜感激。提前致谢！

标签： fabricjsglobalcompositeoperationeraser