将文本添加到画布后更改文本答案

【问题标题】：change text once it is added on canvas将文本添加到画布后更改文本
【发布时间】：2013-09-22 18:08:12
【问题描述】：

在fabric-js 中，我正在制作一组矩形和文本字段，然后将其添加到画布中。我正在使用以下代码，但是一旦将其添加到画布中，我可以更改文本字段的文本吗？

我已经制作了小提琴，请检查，

http://jsfiddle.net/HAb4N/5/

var canvas = new fabric.Canvas('c');

var Bar = new fabric.Text('Bar', {selectable: false, top: 50, left: 10});


var rect = new fabric.Rect({width: 100, height: 100, left: 100, top: 100, fill: 'red'});
var group = new fabric.Group([rect, Bar], {selectable: true, top: 50, left: 100});
canvas.add(group);

canvas.renderAll();

$(document).click(function(e) {
    console.log('click');
    console.log('ActiveObject', canvas.getActiveObject());
    console.log('ActiveGroup', canvas.getActiveGroup());
    Bar.set('Text','Selectedoooooooo');
});

【问题讨论】：

标签： javascript jquery html canvas fabricjs

【解决方案1】：

这对我有用：

Bar.setText("my_text");
canvas.renderAll();

【讨论】：

在 fabric.js v2+ 中不起作用。请改用Bar.set('text', your_text);。注意属性text乞求小t!

【解决方案2】：

当使用“set”函数时，第一个参数尝试驼峰式！

换句话说改变：

Bar.set('Text','Selectedoooooooo');

到：

Bar.set('text','Selectedoooooooo');

这对我有用??

【讨论】：

【解决方案3】：

在 FabricJS 中使用新的 IText。这是一个很好的解决方案

这是我的答案

addText(color) {
    color = color ? color : '#333';
    let textEl = new fabric.IText('', {
        fontFamily: 'Open Sans',
        fill: color,
        fontSize: 50
    });
    this.canvas.add(textEl).setActiveObject(textEl);
    textEl.enterEditing();
}

【讨论】：

【解决方案4】：

是的，您可以在将文本添加到画布后进行设置。这里是jsfiddle

尝试改变你的

Bar.set('Text','Selectedoooooooo');

到

Bar.setText('Selectedoooooooo');

希望对你有帮助....

【讨论】：

我不能直接使用 Bar 对象，我想在用户点击任何对象时获取对象名称，然后特别更改文本字段
@simmisimmi 现在提出一个不同的问题

【解决方案5】：

您可以通过getObjects() 或item() 方法访问组的子项：

canvas.on('object:selected', function(e) {
  e.target.item(1).setText('Selectedoooooooo');
});

见http://jsfiddle.net/fabricjs/HAb4N/12/

【讨论】：

【解决方案6】：

希望这将有助于选择第一个对象，然后在文本区域中输入文本

<canvas id="c" width="600" height="200"></canvas>
<textarea  id="textinput" name="textarea" placeholder="Enter Text"> </textarea>

var canvas = new fabric.Canvas('c');
document.getElementById('textinput').addEventListener('keyup', function (e) {
var obj = canvas.getActiveObject();
if (!obj) return;
obj.setText(e.target.value);
canvas.renderAll();
});
var text = new fabric.Text('Your Text Here', { left: 400, top: 200,fill:'#A0A0A0'});
 canvas.add(text);
var rect = new fabric.Rect({width: 100, height: 200, left: 200, top: 100, fill:'red'});
var group = new fabric.Group([rect,text], {selectable: true, top: 50, left: 350});
canvas.add(group);
canvas.renderAll();

【讨论】：