javascript - 将文本添加到画布后更改文本

Question

在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');
});

Answer 1

这对我有用：

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

Answer 2

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

换句话说，改变：

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

至：

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

这对我有用

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

Answer 4

是的，一旦将文本添加到画布，您就可以设置文本。这是jsfiddle

尝试改变你的

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

至

Bar.setText('Selectedoooooooo');

希望能帮助到你....

Answer 5

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

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

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

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