javascript - 如何在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来绘制图像，我不知道如何删除它，我尝试了一些东西，但它没有删除它只是添加白色，所以我的图像没有显示，任何人都可以建议如何添加橡皮擦织物的方式不会影响 Canvas 后面的图像或解决我的问题的任何其他方法

Answer 1

这取决于您所说的橡皮擦类型。如果您想创建一个具有橡皮擦特征的对象(即圆形或矩形)，您只需向其添加属性 globalCompositeOperation = 'destination-out'。

如果您想要一个 freeDrawingBrush 橡皮擦，请随时询问；目前，这不是 Fabric(版本:“2.4.4”)中的功能，您应该破解该库才能做到这一点。