об изменении события текстовой области добавить текст, используя fabric.js на холсте

Question

об изменении события текстовой области я добавляю текст на холсте, как я могу установить окончательный текст на холсте, используя следующий код, я получаю много строк.

$('#filedset').delegate(' textarea', 'change keyup', function() { 

     console.log('text area change'); 
     var message = $(this).val(); 
var text1 = new fabric.Text(message, { left: 100, top: 100 }); 
canvas.add(text1); 
    }); 
    $('#change_pos').click(function() 
    { 
     console.log('button clicked'); 
     rect.set({ left: 120, top: 150 }); 
     canvas.renderAll(); 
    }); 

Answer 1

Я знаю, что этот вопрос немного старый, но я думал, что я хотел бы попробовать, чтобы помочь, так как я должен был решить точную вещь.

// Your Fabric Canvas 
var canvas = new fabric.Canvas('YOURCANVASID'); 

// New event handler to take the value from the textarea and send to the addText utility function. 
$('.add-text').on('click', function(e){ 
    e.preventDefault(); 
    var text = $('#filedset').val(); 
    addText(text); 
}); 

// Watches the keyup event handler in your textarea and updates the selected text node on canvas while you are typing. Creates a nice effect. 
// with whats being typed. 

$('#filedset').on('keyup' , function(){ 

    var activeObject = canvas.getActiveObject(); 

    // We do a check to make sure there is an active canvas object, and see if it's text. 
    if (activeObject && activeObject.type === 'text') { 
     if (!this.value) { 
      return false; 
     } 
     else { 
      activeObject.setText(this.value); 
      console.log(this.value); 
     } 
    } 

    canvas.renderAll(); 

}); 

// Function to add the text, just pass in a text string you want to add to the canvas. 
function addText(addtext) { 
    var text = new fabric.Text(addtext, { }); 
    canvas.add(text); 
    // Center The New Text on the canvas or position it wherever 
    canvas.centerObject(text); 
} 

Это непроверено в его текущей форме, поскольку оно исходит из более крупного приложения с именами, которое я написал. Но это должно сработать. Вы направлялись в правильном направлении, но вы, где по существу добавляли новый текстовый узел в keyup/change. Я надеюсь, что это помогает кому-то.