Question

在fabric-js中，我正在制作Group of Rect和文本字段，然后将其添加到画布中。我正在使用以下代码，但是一旦将它添加到画布中，我可以更改文本文本字段。

我做了小提琴请检查，

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

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

尝试更改

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

到

Bar.setText('Selectedoooooooo');

希望它有所帮助......

Answer 3

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

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

Answer 4

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

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

请参阅http://jsfiddle.net/fabricjs/HAb4N/12/

Answer 5

使用“set”函数时，请尝试使用camelcase作为第一个参数！

换句话说改变：

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

为：

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

这对我有用

Answer 6

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

这是我的答案

import QtQuick 2.11
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window
{
    property string windowFull: "FullScreen";
    property string windowWindowed: "Windowed";

    width: 400
    height: 400
    visible: true
    title: "Example"
    visibility: windowFull;
    id: theWindow;

    Button
    {
         onClicked:
        {
            if (theWindow.visibility === Window.FullScreen)
                theWindow.visibility = Window.AutomaticVisibility;
            else
                theWindow.visibility = Window.FullScreen;
        }
    }
}

在画布上添加文本后更改文本

6 个答案: