Nesne, json

Question

Project'dan alındıktan sonra düzenlenemez. Giriş alanına ve gömleğindeki yazıya yazdığınızda. Ardından "geri dön" düğmesine basın, bir dezavantajı var. Ardından "ön tarafa" basın ve girişe metin girin. Eski metin kaydedilir ve yeni üst üste bindirilir. Soru: Metnin çakıştığını ve daha önce tanıtılmış olanı nasıl düzenlediğini fark etmek nasıl? Yeni bir kumaş metin oluşturulduğunda loadFromJson aradığınızda loadFromJSON arayıp eski metin nesnesi size stringify tuval gelen # metin dizesi bağlantısını kaldırmak zaman

var canvas; 
    var a; 
    var b; 
    var line1; 
    var line2; 
    var line3; 
    var line4; 

    $(document).ready(function() { 
     canvas = new fabric.Canvas('FrontCanvas'); 

    $('#your-name').on('click', function() { 
     clearCanvas(); 
     initTextString(); 
     $('#text-string').val('Your name') 
    }); 

    var textSample; 
    /*#text-string*/ 
    $('#text-string').on('keyup', function() { 
     var text = $('#text-string').val(); 
     var activeText = canvas.getActiveObject(); 

     textSample = new fabric.Text(text, { 
      originX: 'left', 
      originY: 'top', 
      fontSize: 32, 
      fontFamily: 'MotorCyr', 
      angle: 0, 
      fontWeight: '',  
      hasControls: false, 
      hasBorders: true, 
      top: 50 
     }); 

     canvas.setActiveObject(textSample); 
     canvas.remove(activeText); 
     canvas.renderAll(); 
     canvas.add(textSample); 
     canvas.centerObjectH(textSample); 
     $('#position').show(); 
     $("#removePrint").show();  
     if(document.getElementById('text-string').value.replace(/\s+/g, '').length < 1) { 
      $('#position').hide(); 
      $("#removePrint").hide(); 
     } 
    }); 
    /*#text-string*/ 

    function initTextString() { 
     var text = $('#text-string').val(); 

     textSample = new fabric.Text(text, { 
      originX: 'left', 
      originY: 'top', 
      fontSize: 32, 
      fontFamily: 'MotorCyr', 
      angle: 0, 
      fontWeight: '',  
      hasControls: false, 
      hasBorders: true, 
      top: 50 
     }); 
     canvas.setActiveObject(textSample); 
     canvas.renderAll(); 
     canvas.add(textSample); 
     canvas.centerObjectH(textSample); 
     $('#position').show(); 
     $("#removePrint").show(); 

     if(document.getElementById('text-string').value.replace(/\s+/g, '').length < 1) { 
      $('#position').hide(); 
      $("#removePrint").hide(); 
     } 
    } 




    document.getElementById("text-string").addEventListener("focusout", deactivateAll); 
    document.getElementById("text-string").addEventListener("focus", focusText); 

    function deactivateAll() { 
     canvas.deactivateAllWithDispatch(); 
    } 
    function focusText() { 
     if(textSample != undefined) { 
      canvas.setActiveObject(textSample) 
     } 
    } 






    $('#removePrint').on({ 
     click: function() { 
      clearCanvas(); 
      $("#text-string").val(""); 
      $("#number-string").val(""); 
      $('#removePrint').hide(); 
      $('#position').hide(); 
     } 
    }); 

    $(".printArea").hover(
     function() {     
      canvas.add(line1); 
      canvas.add(line2); 
      canvas.add(line3); 
      canvas.add(line4); 
      canvas.renderAll(); 
     }, 
     function() {     
      canvas.remove(line1); 
      canvas.remove(line2); 
      canvas.remove(line3); 
      canvas.remove(line4); 
      canvas.renderAll(); 
     } 
     ); 



    $('#flip').click(function() { 

     if ($(this).attr("data-title") == "Показать вид сзади") { 

      var backSRC = $('#mainCanvas img').attr('data-back'); 
      console.log(backSRC); 
      $(this).attr('data-title', 'Показать вид спереди');  
      $(this).text('See front');         
      $("#mainCanvas img").attr("src",backSRC);     
      a = JSON.stringify(canvas); 
      canvas.clear(); 
      try 
      { 
       var json = JSON.parse(b); 

       canvas.loadFromJSON(b); 
       canvas.loadFromJSON(b, function() { 
        canvas.renderAll(); 
        console.log(canvas.item(0).name); 
       }); 
      } 
      catch(e) 
      { 
       console.log(e.name); 
       console.log(e.message); 
      } 


     } else { 
      var frontSRC = $('#mainCanvas img').attr('data-front'); 
      console.log(frontSRC); 
      $(this).attr('data-title', 'Показать вид сзади'); 
      $(this).text('See back');          
      $("#mainCanvas img").attr("src",frontSRC); 

      b = JSON.stringify(canvas); 
      canvas.clear(); 
      try 
      { 
       var json = JSON.parse(a); 
       canvas.loadFromJSON(a, function() { 
        canvas.renderAll(); 
        console.log(canvas.item(0).name); 
       });     
      } 
      catch(e) 
      { 
       console.log(e.name); 
       console.log(e.message); 
      } 
     }  
    canvas.renderAll(); 
    setTimeout(function() { 
     canvas.calcOffset(); 
    },200);    
});  


line1 = new fabric.Line([0,0,200,0], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false}); 
line2 = new fabric.Line([199,0,200,399], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false}); 
line3 = new fabric.Line([0,0,0,400], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false}); 
line4 = new fabric.Line([0,400,200,399], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false}); 

});//doc ready 

function clearCanvas() { 
    canvas.clear().renderAll(); 
} 

Answer 1

, bu yeni metinle girdi # metin dizesi eklemek gerekir

canvas.loadFromJSON(a, function() { 
    canvas.getObjects() //get the new text here and attach to input text 
}); 

BTW, fabricjs nesnenin senin değişikliklerle bir proje katkıda am