Das Objekt kann nicht bearbeitet werden, nachdem es von JSON

Question

Project abgerufen wurde. Wenn Sie das Eingabefeld und den Text auf dem Shirt eingeben. Dann drücke den Button "siehe zurück" da ist ein Nachteil. Klicken Sie dann auf den Button "siehe vorne" und geben Sie einen Text in die Eingabe ein. Alter Text wird gespeichert und das Neue wird darüber gelegt. Frage: Wie zu erkennen, dass der Text sich nicht überschneiden würde, und bearbeitet einen, der früher eingeführt wurde?

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

Wenn Sie loadFromJson ein neuer Stoff Text nennen erstellt wird, sollten Sie den Eingang # Text-String mit diesem neuen Text an, wenn Sie loadFromJSON anrufen und # Text-String aus dem alten Text-Objekt, wenn Sie stringify Leinwand entkoppeln

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

BTW, hat fabricjs ein itext Objekt, in dem Sie