关于文本区域更改事件在画布上添加使用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); 
} 

这是未经测试的当前形式，因为它来自我写的更大的命名空间应用程序。但它应该工作。你正朝着正确的方向前进，但你基本上在关键点/变化上添加了新的文本节点。我希望这可以帮助别人。