如何在面料js中动态设置文本框文本Itext

Question

我创建了一个画布，我添加了一个面料Itext，我想在Itext中填充文本框的文本。 我的HTML代码...

<input type="text" id="title" placeholder="Your Title" /><br> 
<canvas id="c"></canvas> 

和JavaScript ...

function Addtext() { 
var text = new fabric.IText('Enter text here...',  {fontSize:16,left:20,top:20,radius:10}); 
borderRadius = "25px"; 
canvas.add(text).setActiveObject(text); 
text.hasRotatingPoint = true; 
} 

document.getElementById('title').addEventListener('keyup', function() { 
var stringTitle = document.getElementById('title').value; 
}); 

请帮助...在此先感谢。

Answer 1

你的问题非常模糊。这似乎是接近你所要求的东西。当你在文本框中输入iText更新。虽然你可以直接点击画布上的iText并输入，所以我不确定你是否真的需要html输入。

window.canvas = new fabric.Canvas('c'); 
 

 
var textOptions = { 
 
    fontSize:16, 
 
    left:20, 
 
    top:20, 
 
    radius:10, 
 
    borderRadius: '25px', 
 
    hasRotatingPoint: true 
 
}; 
 

 
var textObject = new fabric.IText('Enter text here...', textOptions); 
 

 
canvas.add(textObject).setActiveObject(textObject); 
 
canvas.renderAll() 
 

 
document.getElementById('title').addEventListener('keyup', function() { 
 
    textObject.text = document.getElementById('title').value; 
 
    canvas.renderAll(); 
 
});

canvas { border: 1px solid; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js" ></script> 
 
<input type="text" id="title" placeholder="Your Title" /><br> 
 
<canvas id="c"></canvas>