在文本区域的更改事件上使用 fabric.js 在画布上添加文本答案

【问题标题】：on change event of text area add text using fabric.js on canvas在文本区域的更改事件上使用 fabric.js 在画布上添加文本
【发布时间】：2013-08-29 20:44:06
【问题描述】：

关于文本区域的更改事件，我在画布上添加文本如何使用以下代码在画布上设置最终文本，我得到了很多字符串。

   $('#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();
    });

【问题讨论】：

我不太确定我是否理解这个问题——如果您不想要多个文本，为什么要在每个 keyup 上创建一个新文本？
@xec 谢谢我意识到我也添加了keyup。

标签： jquery html css fabricjs

【解决方案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 上添加了一个新的文本节点。我希望这可以帮助别人。

【讨论】：