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输入。

＆＃13;

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();
});

＆＃13;

canvas { border: 1px solid; }

＆＃13;

<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>

＆＃13;

如何在fabric js Itext

1 个答案: