如何在Fabric JS中实现橡皮擦

Question

  var width = $('#image').width();
    var height = $('#image').height();
    var canvas = new fabric.Canvas('kv_mark', { selection: false , width: width, height: height });
    var mark="";
    var i=0;
    var linex1=[];
    var linex2=[];
    var liney1=[];
    var liney2=[];
    var rightx=[];
    var righty=[];
    var wrongx=[];
    var wrongy=[];


    $('.mark-button').click(function(){
      // alert('here');
      mark = $(this).data('value');
      if(mark=='right'){
        img = "img/tick-green.png";
      }
      if(mark=='wrong'){
        img = "img/wrong.png";
      }
      if(mark==""){alert('please select a tool');}
    });
    var line, isDown;


    canvas.on('mouse:down', function(o){
      if(mark=='line'){
      isDown = true;
      var pointer = canvas.getPointer(o.e);
      var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
      x1=pointer.x;
      y1=pointer.y;
      linex1.push(x1);
      liney1.push(y1);
      line = new fabric.Line(points, {
        strokeWidth: 1  ,
        fill: 'red',
        stroke: 'red',
        originX: 'center',
        originY: 'center'
      });
      canvas.add(line);
    }
    });

    canvas.on('mouse:move', function(o){
      if(mark=='line'){
      if (!isDown) return;
      var pointer = canvas.getPointer(o.e);
      line.set({ x2: pointer.x, y2: pointer.y });
      canvas.renderAll();
      // console.log(pointer);
      }
    });

    canvas.on('mouse:up', function(o){
      var pointer = canvas.getPointer(o.e);
      x2=pointer.x;
      y2=pointer.y;
      linex2.push(x2);
      liney2.push(y2);
      if(mark=='line'){isDown = false;}
    });

    canvas.on('mouse:dblclick', function(o){
      if(mark=='wrong' || mark=='right'){
      var pointer = canvas.getPointer(o.e);
      var x = pointer.x;
      var y = pointer.y;
      if(mark=='wrong'){
        wrongx.push(x);
        wrongy.push(y);
      }
      if(mark=='right'){
        rightx.push(x);
        righty.push(y);
      }

      $("#container").append('<img class="mark" src="http://localhost:9000/'+img+'" id="'+x+'_'+y+'" style="position:absolute;left:'+x+'px; top:'+y+'px; z-index:3;width:20px;height:20">');
      //
      //        // $("#kv_mark").append('<img class="mark" src="{{ asset('wrong.png')}}" id="'+x+'_'+y+'" style="position:absolute;left:'+x+'px; top:'+y+'px; z-index:2;width:20px;height:20">');
          		i++;}
    });
    $('#container').on("click",".mark",function(e){
      $(this).remove();
    });
    $('#kv_mark').on("click",".mark",function(e){
      $(this).remove();
    });

    $("#kv_mark").dblclick(function(e){

      a[i] = (e.pageX - this.offsetLeft)-17;
      b[i] = (e.pageY - this.offsetTop)-17;
      // console.log(a);
      // console.log(b);
    })

  .correction-block{
    width:100%;
    position: relative;
  }
  .correction-block img{
    width:100%;
  }
  .canvas-body{
    position:relative;
    /*top:0;
    left:0;
    height:100%;
    width:100%;*/
  }
  .correction-block .canvas-container{
    position: absolute!important;
    top:0;
    left:0;
    width:100%!important;
    height:100%!important;
    border:1px solid #333;
  }
  .correction-block canvas{
    position: absolute;
    top:0;
    left:0;
    width:100%!important;
    height:100%!important;
  }
  .relative{
    position: relative;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="relative">
           <div class="correction-block">
             <img src="{{ asset('img/scanned1.jpeg') }}" alt="" id="image">
              <canvas id="kv_mark">   </canvas>
            </div>
        </div>

我实现了fabric js来绘制图像，但我并未尝试对其进行擦除，但尝试了一些操作，但它并未擦除，只是添加了白色，因此我的图像未显示出有人可以建议如何向其添加橡皮擦构造不会影响画布后面图像的方式或解决我问题的任何其他方法

Answer 1

这取决于您在谈论哪种橡皮。如果您要创建具有橡皮擦特征的对象（即圆形或矩形），只需向其添加属性globalCompositeOperation = 'destination-out'。

如果您要使用freeDrawingBrush橡皮擦，请随时提问；目前，这不是Fabric的功能（版本：“ 2.4.4”），您应该修改该库。