Как установить текстовый текст динамически в ткани 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>