javascript - 如何在不选择她的情况下删除 Canvas 中绘制的线条

Question

我使用 Canvas (使用 fabric.js)在图像上画线，但是在鼠标上:我打开一个模态来做笔记，然后我在 Canvas 下面列出笔记。但有时我需要删除与她相对应的特定注释和相应行。我已经删除了一行，但没有删除相应注释的特定行。

我的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");
    });
  });

})();

我删除线条的函数只删除 Canvas 中最后绘制的线条，而不是我需要的特定线条。谢谢。

Answer 1

这看起来是一个非常通用的编程问题。在创建一条线(您没有向我们展示)的函数中，您可以确定该线创建了一个唯一的 id:

line.id = fabric.Object.__uid++;

此时，在鼠标松开时，创建的行是堆栈中的最新对象，因此在创建时不要将您的 ID 附加到某处。

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);
          }
        })
      });