Блог

я создаю холст, добавляю текстовый текст, я хочу заполнить текст текстового поля в 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;
});
  

пожалуйста, помогите … заранее спасибо.

Ваш вопрос очень расплывчатый. кажется, это что-то близкое к тому, о чем вы просите. По мере ввода текста в текстовом поле iText обновляется. Хотя вы можете просто щелкнуть по iText на холсте и ввести прямо в so, я не уверен, действительно ли вам вообще нужен ввод 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>