如何在面料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>