[英]on change event of text area add text using fabric.js on canvas
on change event of text area i am adding text on canvas how can i set final text on canvas using the following code i am getting many string . 在文本区域发生更改时,我在画布上添加文本,如何使用以下代码在画布上设置最终文本,我得到了很多字符串。
$('#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();
});
I know this question is a little old but I thought I would try to help out since I had to solve the exact thing. 我知道这个问题有点老了,但是我认为我将尽力帮助自己,因为我必须解决确切的问题。
// 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);
}
This is untested in its current form as it comes from a larger, namespaced application i wrote. 这是未经测试的,因为它来自我编写的一个更大的命名空间应用程序。 But it should work. 但它应该起作用。 You were heading in the right direction but you where essentially adding a new text node on keyup / change. 您的方向是正确的,但实际上是在keyup / change上添加了一个新的文本节点。 I hope this helps someone. 我希望这可以帮助别人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.