Question

我使用画布（使用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");
    });
  });

})();

我删除该行的功能只删除画布中的最后一条画线而不是我需要的特定行。感谢。

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

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

1 个答案: