javascript - how to set a textbox text dynamically in fabric js Itext - Stack Overflow

admin管理员组

文章数量:1022989

i create a canvas, i add a fabric Itext, i want to fill text of textbox in Itext. my html code is...

 <input type="text" id="title" placeholder="Your Title" /><br>
<canvas id="c"></canvas>

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

please help...thanks in advance.

i create a canvas, i add a fabric Itext, i want to fill text of textbox in Itext. my html code is...

 <input type="text" id="title" placeholder="Your Title" /><br>
<canvas id="c"></canvas>

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

please help...thanks in advance.

• javascript
• html5-canvas
• fabricjs

Share Improve this question Follow asked Sep 30, 2016 at 13:49 Kishor AdmaneKishor Admane 6911 silver badge1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Your question is very vague. this seems to be something close to what you are asking for. As you type in the textbox the iText updates. Although you can just click in to the iText on the canvas and type right in to so I'm not sure if you really need the html input at all.

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./ajax/libs/fabric.js/1.6.4/fabric.min.js" ></script>
<input type="text" id="title" placeholder="Your Title" /><br>
<canvas id="c"></canvas>

i create a canvas, i add a fabric Itext, i want to fill text of textbox in Itext. my html code is...

 <input type="text" id="title" placeholder="Your Title" /><br>
<canvas id="c"></canvas>

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

please help...thanks in advance.

i create a canvas, i add a fabric Itext, i want to fill text of textbox in Itext. my html code is...

 <input type="text" id="title" placeholder="Your Title" /><br>
<canvas id="c"></canvas>

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

please help...thanks in advance.

• javascript
• html5-canvas
• fabricjs

Share Improve this question Follow asked Sep 30, 2016 at 13:49 Kishor AdmaneKishor Admane 6911 silver badge1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Your question is very vague. this seems to be something close to what you are asking for. As you type in the textbox the iText updates. Although you can just click in to the iText on the canvas and type right in to so I'm not sure if you really need the html input at all.

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./ajax/libs/fabric.js/1.6.4/fabric.min.js" ></script>
<input type="text" id="title" placeholder="Your Title" /><br>
<canvas id="c"></canvas>

本文标签： javascripthow to set a textbox text dynamically in fabric js ItextStack Overflow