Javascript 如何删除画布中绘制的线而不选择她

我使用画布（带fabric.js）在图像上画线，但在鼠标上：我打开一个模式来做笔记，然后在画布下面列出笔记。但有时我需要删除一个特定的注释和对应的行。我已经删除了一行，但没有删除相应注释的特定行

我的JS：

(function() {

  var $ = function(id){
    return document.getElementById(id);
  };

  var canvas = this.__canvas = new fabric.Canvas('c', {
    isDrawingMode: true
  });

  var imgOdontogramaInfantil = './img/od-infantil.png';

  canvas.setBackgroundImage(imgOdontogramaInfantil, canvas.renderAll.bind(canvas), {
      backgroundImageOpacity: 0.0,
      backgroundImageStretch: false
  });

  fabric.Object.prototype.transparentCorners = false;

  var drawingModeEl = $('drawing-mode'),
      drawingOptionsEl = $('drawing-mode-options'),
      drawingColorEl = $('drawing-color'),
      drawingShadowColorEl = $('drawing-shadow-color'),
      drawingLineWidthEl = $('drawing-line-width'),
      drawingShadowWidth = $('drawing-shadow-width'),
      drawingShadowOffset = $('drawing-shadow-offset'),
      clearEl = $('clear-canvas');

  clearEl.onclick = function() {
    canvas.clear();
  };

  drawingModeEl.onclick = function() {
    canvas.isDrawingMode = !canvas.isDrawingMode;
    if (canvas.isDrawingMode) {
      drawingModeEl.innerHTML = 'Cancel drawing mode';
      drawingOptionsEl.style.display = '';
    }
    else {
      drawingModeEl.innerHTML = 'Enter drawing mode';
      drawingOptionsEl.style.display = 'none';
    }
  };

  if (fabric.PatternBrush) {
    var vLinePatternBrush = new fabric.PatternBrush(canvas);
    vLinePatternBrush.getPatternSrc = function() {

      var patternCanvas = fabric.document.createElement('canvas');
      patternCanvas.width = patternCanvas.height = 10;
      var ctx = patternCanvas.getContext('2d');

      ctx.strokeStyle = this.color;
      ctx.lineWidth = 5;
      ctx.beginPath();
      ctx.moveTo(0, 5);
      ctx.lineTo(10, 5);
      ctx.closePath();
      ctx.stroke();

      return patternCanvas;
    };

    var hLinePatternBrush = new fabric.PatternBrush(canvas);
    hLinePatternBrush.getPatternSrc = function() {

      //Linha teste
      line.id = fabric.Object.__uid++;

      var patternCanvas = fabric.document.createElement('canvas');
      patternCanvas.width = patternCanvas.height = 10;
      var ctx = patternCanvas.getContext('2d');

      ctx.strokeStyle = this.color;
      ctx.lineWidth = 5;
      ctx.beginPath();
      ctx.moveTo(5, 0);
      ctx.lineTo(5, 10);
      ctx.closePath();
      ctx.stroke();

      return patternCanvas;
    };

    var squarePatternBrush = new fabric.PatternBrush(canvas);
    squarePatternBrush.getPatternSrc = function() {

      var squareWidth = 10, squareDistance = 2;

      var patternCanvas = fabric.document.createElement('canvas');
      patternCanvas.width = patternCanvas.height = squareWidth + squareDistance;
      var ctx = patternCanvas.getContext('2d');

      ctx.fillStyle = this.color;
      ctx.fillRect(0, 0, squareWidth, squareWidth);

      return patternCanvas;
    };

    var diamondPatternBrush = new fabric.PatternBrush(canvas);
    diamondPatternBrush.getPatternSrc = function() {

      var squareWidth = 10, squareDistance = 5;
      var patternCanvas = fabric.document.createElement('canvas');
      var rect = new fabric.Rect({
        width: squareWidth,
        height: squareWidth,
        angle: 45,
        fill: this.color
      });

      var canvasWidth = rect.getBoundingRectWidth();

      patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance;
      rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 });

      var ctx = patternCanvas.getContext('2d');
      rect.render(ctx);

      return patternCanvas;
    };

    var img = new Image();
    img.src = '../img/od-infantil.png';

    var texturePatternBrush = new fabric.PatternBrush(canvas);
    texturePatternBrush.source = img;
  }

  $('drawing-mode-selector').onchange = function() {

    if (this.value === 'hline') {
      canvas.freeDrawingBrush = vLinePatternBrush;
    }
    else if (this.value === 'vline') {
      canvas.freeDrawingBrush = hLinePatternBrush;
    }
    else if (this.value === 'square') {
      canvas.freeDrawingBrush = squarePatternBrush;
    }
    else if (this.value === 'diamond') {
      canvas.freeDrawingBrush = diamondPatternBrush;
    }
    else if (this.value === 'texture') {
      canvas.freeDrawingBrush = texturePatternBrush;
    }
    else {
      canvas.freeDrawingBrush = new fabric[this.value + 'Brush'](canvas);
    }

    if (canvas.freeDrawingBrush) {
      canvas.freeDrawingBrush.color = drawingColorEl.value;
      canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;
      canvas.freeDrawingBrush.shadowBlur = parseInt(drawingShadowWidth.value, 10) || 0;
    }
  };

  drawingColorEl.onchange = function() {
    canvas.freeDrawingBrush.color = this.value;
  };
  drawingShadowColorEl.onchange = function() {
    canvas.freeDrawingBrush.shadowColor = this.value;
  };
  drawingLineWidthEl.onchange = function() {
    canvas.freeDrawingBrush.width = parseInt(this.value, 5) || 1;
    this.previousSibling.innerHTML = this.value;
  };
  drawingShadowWidth.onchange = function() {
    canvas.freeDrawingBrush.shadowBlur = parseInt(this.value, 10) || 0;
    this.previousSibling.innerHTML = this.value;
  };
  drawingShadowOffset.onchange = function() {
    canvas.freeDrawingBrush.shadowOffsetX =
    canvas.freeDrawingBrush.shadowOffsetY = parseInt(this.value, 10) || 0;
    this.previousSibling.innerHTML = this.value;
  };

  if (canvas.freeDrawingBrush) {
    canvas.freeDrawingBrush.color = drawingColorEl.value;
    canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;
    canvas.freeDrawingBrush.shadowBlur = 0;
  }

  //Mouse:up events

var creatingModal = false;

canvas.on('mouse:up', function (){
      creatingModal = true;
      jQuery('#modal').modal('show').trigger('shown');
      //get values from obs form
      jQuery(document).on("click", "#submitObservacao", function(e){
        e.preventDefault();

        var denteNumero   = jQuery("#dente").val();
        var procedimentos = jQuery("#procedimentos").val();
        var observacao    = jQuery("#observacoes").val();

        //iuncrement id itemObs
        var canvas_objects = canvas._objects, lastId = 0;
          if(canvas_objects.length !== 0){
            var lastId = canvas_objects[canvas_objects.length -1].id;
          }
        jQuery("#anotacoes").append(
          '<div lineId="' + lastId + '" class="thumbnail mark" id="itemObs" data-toggle="modal" data-target="#EditMod"><b>Dente</b>:<span id="anotacaoDente" class="anotDent">'+ denteNumero +'</span> <i class="fa fa-trash f-right" id="removerNow" aria-hidden="true"></i> <br> <b>Procedimentos:</b> <span id="anotacaoProcedimentos">'+ procedimentos +'</span><br> <b>Observações:</b> <span id="anotacaoObservacao">'+ observacao +'</span><br> </div>'
        );


        jQuery('.anotDent').each(function(i){
          jQuery(this).addClass('.uniqueDent' + i);
      });

        //refreshing values
        jQuery(denteNumero).val('');
        jQuery("#dente").val('');
        jQuery(procedimentos).val('');
        jQuery(observacao).val('');
        jQuery("#observacoes").val('');
        jQuery('#modal').modal('hide').unique();
      });

      jQuery(document).on("click", "#removerNow", function(e){
        e.preventDefault();

        jQuery(this).parent().remove();

        var canvas_objects = canvas._objects;
        console.log(canvas_objects);
          if(canvas_objects.length !== 0){
            var last = canvas_objects[canvas_objects.length -1]; //Get last object
            canvas.remove(last);
            canvase.renderAll();
           }
      });
  });

  jQuery(document).on("click", ".mark", function(e){
          e.preventDefault();
            var marcador = jQuery(this).attr('.uniqueDent');
            console.log(marcador);
           var numDente = jQuery(this).find(".anotDent").html();
           var numObservacoes = jQuery(this).find("#anotacaoObservacao").html();
           var numProcedimentos = jQuery(this).find("#anotacaoProcedimentos").html();

          jQuery("#obsModalEdit input[name=dente]").val(numDente);
          jQuery("#obsModalEdit select[name=procedimentos]").val(numProcedimentos);
          jQuery("#obsModalEdit textarea[name=observacoes]").val(numObservacoes);

  });

  //Edit on click
  jQuery(document).on("click", "#submitEditar", function(e){
    e.preventDefault();

    var numDente   = jQuery("#denteEdit").val();
    var numProcedimentos = jQuery("#procedimentosEdit").val();
    var numObservacoes     = jQuery("#observacoesEdit").val();

    //Can't you changed the value of the relevant controller like this.
    // jQuery(document).ready( "unique", function(){
    //
    // });

    // jQuery(this).attr(".uniqueDente", i);
    // console.log(i);
    jQuery("#anotacaoDente").val(numDente);
    jQuery("#anotacaoDente").html(numDente);
    // console.log(marcador);

    jQuery('#anotacaoProcedimentos').val(numProcedimentos);
    jQuery('#anotacaoProcedimentos').html(numProcedimentos);

    jQuery("#anotacaoObservacao").val(numObservacoes);
    jQuery("#anotacaoObservacao").html(numObservacoes);

    jQuery("#submitEditar").html("Salvando..").addClass('btn-success');
    jQuery("#submitEditar").delay(3000);
    jQuery("#submitEditar").html("Salvo, Clique aqui para fechar");
    jQuery("#submitEditar").addClass('closeModal');

    jQuery(document).on("click", ".closeModal", function(){
      jQuery('#EditMod').modal('hide');
      jQuery("#submitEditar").removeClass('closeModal');
      jQuery("#submitEditar").removeClass('btn-success');
      jQuery("#submitEditar").html("Editar Anotação");
    });
  });

})();

（函数（）{
var$=函数（id）{
返回文档.getElementById（id）；
};
var canvas=this.\uu canvas=new fabric.canvas（'c'{
isDrawingMode:true
});
变量imgodonogramainfantil='./img/od infantil.png'；
canvas.setBackgroundImage（imgOdontogramaInfantil，canvas.renderAll.bind（canvas）{
背景图像不透明度：0.0，
背景：错误
});
fabric.Object.prototype.transparentCorners=false；
var drawingModeEl=$（“绘图模式”），
drawingOptionsEl=$（'drawing-mode-options'），
drawingColorEl=$（'drawing-color'），
drawingShadowColorEl=$（'drawing-shadow-color'），
drawingLineWidthEl=$（'drawing-LineWidth'），
drawingShadowWidth=$（'drawing-shadow-width'），
drawingShadowOffset=$（'drawing-shadow-offset'），
clearEl=$（'clear-canvas'）；
clearEl.onclick=函数（）{
canvas.clear（）；
};
drawingModeEl.onclick=函数（）{
canvas.isDrawingMode=！canvas.isDrawingMode；
if（canvas.isDrawingMode）{
drawingModeEl.innerHTML='取消绘图模式'；
DrawingOptions sel.style.display=''；
}
否则{
drawingModeEl.innerHTML='进入绘图模式'；
drawingOptionsEl.style.display='none'；
}
};
if（织物图案刷）{
var vLinePatternBrush=新织物。PatternBrush（画布）；
vlinepatternsbrush.getPatternSrc=函数（）{
var patterncavas=fabric.document.createElement（'canvas'）；
patternCanvas.width=patternCanvas.height=10；
var ctx=patternCanvas.getContext（'2d'）；
ctx.strokeStyle=this.color；
ctx.lineWidth=5；
ctx.beginPath（）；
ctx.moveTo（0,5）；
ctx.lineTo（10,5）；
ctx.closePath（）；
ctx.stroke（）；
返回模式画布；
};
var hLinePatternBrush=新的fabric.PatternBrush（画布）；
hLinePatternBrush.getPatternSrc=函数（）{
//林哈睾丸
line.id=fabric.Object.uu uid++；
var patterncavas=fabric.document.createElement（'canvas'）；
patternCanvas.width=patternCanvas.height=10；
var ctx=patternCanvas.getContext（'2d'）；
ctx.strokeStyle=this.color；
ctx.lineWidth=5；
ctx.beginPath（）；
ctx.moveTo（5,0）；
ctx.lineTo（5,10）；
ctx.closePath（）；
ctx.stroke（）；
返回模式画布；
};
var squarePatternBrush=新织物。PatternBrush（画布）；
squarePatternBrush.getPatternSrc=函数（）{
var squareWidth=10，squareDistance=2；
var patterncavas=fabric.document.createElement（'canvas'）；
patternCanvas.width=patternCanvas.height=squareWidth+squareDistance；
var ctx=patternCanvas.getContext（'2d'）；
ctx.fillStyle=this.color；
ctx.fillRect（0，0，squareWidth，squareWidth）；
返回模式画布；
};
var diamondPatternBrush=新织物。PatternBrush（画布）；
diamondPatternBrush.getPatternSrc=函数（）{
var squareWidth=10，squareDistance=5；
var patterncavas=fabric.document.createElement（'canvas'）；
var rect=new fabric.rect({
宽度：平方宽度，
高度：平方宽度，
角度：45，
填充：这个颜色
});
var canvasWidth=rect.getBoundingRectWidth（）；
patternCanvas.width=patternCanvas.height=画布宽度+平方距离；
rect.set（{left:canvasWidth/2，top:canvasWidth/2}）；
var ctx=patternCanvas.getContext（'2d'）；
矩形渲染（ctx）；
返回模式画布；
};
var img=新图像（）；
img.src='../img/od infantial.png'；
var texturePatternBrush=新织物.PatternBrush（画布）；
texturePatternBrush.source=img；
}
$（'drawing-mode-selector'）。onchange=function（）{
如果（this.value=='hline'）{
canvas.freeDrawingBrush=vLinePatternBrush；
}
else if（this.value==='vline'）{
canvas.freedrawingprush=hLinePatternBrush；
}
else if（this.value==='square'）{
canvas.freeDrawingBrush=方形图案笔刷；
}
else if（this.value==='diamond'）{
canvas.freeDrawingBrush=钻石图案刷；
}
else if（this.value==='texture'）{
canvas.freeDrawingBrush=texturePatternBrush；
}
否则{
canvas.freeDrawingBrush=新织物[this.value+'Brush']（画布）；
}
if（画布.freeDrawingBrush）{
canvas.freeDrawingBrush.color=drawingColorEl.value；
canvas.freedrawingprush.width=parseInt（drawingLineWidthEl.value，10）| 1；
canvas.freeDrawingBrush.shadowBlur=parseInt（drawingShadowWidth.value，10）| | 0；
}
};
drawingColorEl.onchange=函数（）{
canvas.freeDrawingBrush.color=此.value；
};
drawingShadowColorEl.onchange=函数（）{
canvas.freeDrawingBrush.shadowColor=this.value；
};
drawingLineWidthEl.onchange=函数（）{
canvas.freedrawingprush.width=parseInt（this.value，5）| | 1；
this.previousSibling.innerHTML=this.value；
};
drawingShadowWidth.onchange=函数（）{
canvas.freedrawingprush.shadowBlur=parseInt（this.value，10）| | 0；
this.previousSibling.innerHTML=this.value；
};
drawingShadowOffset.onchange=函数（）{
canvas.freeDrawingBrush.shadowOffsetX=
canvas.freeDrawingBrush.shadowOffsetY=parseInt（this.value，10）| | 0；
this.previousSibling.innerHTML=this.value；
};
if（画布.freeDrawingBrush）{
canvas.freeDrawingBrush.color=drawingColorEl.value；
canvas.freedrawingprush.width=parseInt（drawingLineWidthEl.value，10）| 1；
canvas.freeDrawingBrush.shadowBlur=0；
}
//鼠标：启动事件
var creatingModal=false；
canvas.on（'鼠标：向上'
line.id = fabric.Object.__uid++;

var canvas_objects = canvas._objects, lastId = 0;
if(canvas_objects.length !== 0){
  var lastId = canvas_objects[canvas_objects.length -1].id;
}
jQuery("#anotacoes").append(
          '<div lineId="' + lastId + '" class="thumbnail mark" id="itemObs" data-toggle="modal" data-target="#EditMod"><b>Dente</b>:<span id="anotacaoDente" class="anotDent">'+ denteNumero +'</span> <i class="fa fa-trash f-right" id="removerNow" aria-hidden="true"></i> <br> <b>Procedimentos:</b> <span id="anotacaoProcedimentos">'+ procedimentos +'</span><br> <b>Observações:</b> <span id="anotacaoObservacao">'+ observacao +'</span><br> </div>'
  );

jQuery(document).on("click", "#removerNow", function(e){
        e.preventDefault();
        var parent = jQuery(this).parent();
        lineId = parent.getAttribute('lastId');
        var canvas_objects = canvas._objects;
        if(canvas_objects.forEach(object => {
          if (object.id === lineId) {
            canvas.remove(object);
          }
        })
      });