如何在Fabric 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>