ファブリック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>