Javascript 如何添加一组保持分组的独立对象？

我使用的是fabricjs 1.7.21，有一个添加文本的按钮。如何将一组对象（如多个可编辑的IText字段（请参见右侧））添加到画布，就像使用单个IText对象一样

换句话说，我希望能够通过单击在右侧添加这样的内容，并能够将其作为一个组进行移动

var canvas=newfabric.canvas（“c”）；
画布设置高度（500）；
画布设置宽度（500）；
//添加文本
函数Addtext（）{
var text=new fabric.IText（“类型…”{
尺寸：30，
前10名，
左:10,，
宽度：200，
身高：200，
textAlign：“居中”
});
canvas.add（文本）；
canvas.setActiveObject（文本）；
text.enterEditing（）；
text.selectAll（）；
text.rendercursorselection（）；//或canvas.renderAll（）；
canvas.isDrawingMode=false；
}
//右侧对象
//标题常量
常数顶部={
尺寸：27，
哈斯博德斯：没错，
哈斯：错，
左：380，
lockMovementX：对，
洛克·莫文蒂：没错，
是的，
原文：“中心”，
原创：“中心”，
是的，
对齐：“中间”，
centeredScaling：正确，
};
const headingOne={
lockMovementX：对，
洛克·莫文蒂：没错，
原文：“中心”，
原创：“中心”，
是的，
对齐：“中间”，
尺寸：14，
字体：“斜体”，
哈斯博德斯：没错，
哈斯：错，
hasRotatingPoint:false，
左：380，
};
常数头2={
对齐：“中间”，
centeredScaling：正确，
尺寸：20，
哈斯博德斯：没错，
哈斯：错，
hasRotatingPoint:false，
lockMovementX：对，
洛克·莫文蒂：没错，
是的，
原文：“中心”，
原创：“中心”，
是的，
左：380，
};
canvas.add（newfabric.IText（“一些文本”）{
…顶部，
前25名，
}));
canvas.add（newfabric.IText（“一些文本”）{
…顶部，
fontWeight：“粗体”，
排名：60，
}));
add（newfabric.IText（“一些文本”，{
…头朝下，
排名：90，
}));
add（newfabric.IText（“一些文本”，{
…朝着两个方向，
排名：110，
}));
画布{
边框：1px实心#dddddd；
边缘顶部：10px；
边界半径：3px；
}

添加文本
我不确定是否真正理解您的需求，但如果您只需要一个按钮，将一个文本字段添加到画布并将其绑定到一个组，我认为这应该可以：

var canvas = new fabric.Canvas("c");
canvas.setHeight(500);
canvas.setWidth(500);
canvas.isDrawingMode = false;
var myGroupOfText = new fabric.Group();

function Addtext() {
  var text = new fabric.IText("Type...", {
    fontSize: 30,
    top: 10,
    left: 10,
    width: 200,
    height: 200,
    textAlign: "center"
  });
  canvas.add(text);
  myGroupOfText.add(text);      
}

我不知道你为什么需要

canvas.setActiveObject(text);
text.enterEditing();
text.selectAll();

但是如果你愿意，我想把它添加到你的
AddText
方法中是没有问题的。请注意，“add”方法已经包括对
canvas.renderAll（）
的调用

最后，请不要将
绘图模式
与假设的
插入模式
混淆
drawingMode
是画布固有的设置，用于确定是否应启用自由绘图（即单击+移动绘制形状）。除非您有一个非常特定的约束，否则无需在每次添加IText时重新设置它

编辑：
根据您的评论，您可能需要使用以下选项：

 var canvas = new fabric.Canvas("c");
canvas.setHeight(500);
canvas.setWidth(500);
canvas.isDrawingMode = false;

[...]

function addGroupOfText() {
    var myGroupOfText = new fabric.Group();
    myGroupOfText.setOptions({selectable: true});
    var options = {
        fontSize: 30,
        top: 10,
        left: 10,
        width: 200,
        height: 200,
        textAlign: "center",
        selectable: false,
        fontWeight: normal, // or 'bold', or a number. see docs
        underline: false, // or true
        fontStyle: normal // or 'italic'. see docs
      }
    this.addText(myGroupOfText, options); // repeat this call as many time as needed
}

function addText(group, options) {
  var text = new fabric.IText("Type...", options);
  canvas.add(text);
  group.add(text);      
}

这将允许您添加X个文本字段（通过重复X次
addText
调用），并为每个字段指定不同的选项。我建议你去看医生和医生。请注意，我在这里为每个
IText
设置了
selective:false
，以确保没有一个被选为一个，并为组设置了
selective:true
，以确保它是可选择的

如果不清楚，请在评论中要求精确，我很乐意回答你
 谢谢你的提示！我不确定您是否这样说，但我正在尝试添加一组IText字段。例如，在我上面的代码中，有几个文本对象——我想通过单击添加它们，然后将它们“锁定在一起”。