javascript - 如何在Fabric JS中实现橡皮擦

  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来绘制图像，但我并未尝试对其进行擦除，但是我并未尝试擦除它只是添加白色，所以我的图像未显示出有人可以建议如何为织物添加橡皮擦它不会影响画布后面的图像或其他解决我问题的方法

最佳答案

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

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