如何刪除在畫布上繪製的線條而不選擇她

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

})();

我的函數刪除行只刪除最後一個drawned線帆布不是我所需要的具體線路。謝謝。

來源

2017-03-04 Matheus

這看起來像一個非常通用的編程問題。在創建一個行（你不展現給我們的），你可以assing行函數創建一個唯一的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); 
      } 
     }) 
     });

來源

2017-03-05 22:40:34 AndreaBogazzi

感謝您的回答，我試圖按照你告訴我的步驟，但不起作用。我不知道我應該在哪裏插入第一行。但我已經理解了這個概念（我加了我的所有JS）。 – Matheus

如何刪除在畫布上繪製的線條而不選擇她

回答

相關問題