Question

我正在使用FabricJS在图像顶部绘制和擦除线条。我为画布制作了2层，底层为背景图像，顶层为草绘。每当我删除标记时，如果我使用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

任何帮助将不胜感激。预先感谢！

在Fabric JS上擦除线

0 个答案: