Javascript FabricJS以编程方式将循环图像添加到组中

我有一套信。这些字母构成了一个单词。我循环使用数据ID来构建单词

然而，我似乎无法将它们组合在一起

如果我手动选择字母并尝试

canvas.getActiveObject().toGroup();
canvas.requestRenderAll();

它将把它们组合在一起

但我需要通过编程和添加

canvas.add(img).setActiveObject();

它将只选择添加到画布的最后一个对象

这是我构建单词的功能

function buildImage(i) {

  var wordo = jQuery('*[data-id="' + wordArray[i] + '"]').attr('src');

  fabric.Image.fromURL(wordo, function(img, letterWidth) {
    // fabric.Image.fromURL(tiles[i], function (img) {
    img.scale(scaleO).set({
      left: offset[i],
      top: wordPositionY,
      selectable: true,
      cornerStyle: 'circle',
      cornerColor: '#f6ff00',
      cornerStrokeColor: '#f6ff00',
      transparentCorners: false,
      borderColor: '#f9f60b',
      cornerSize: 22,
      hasRotatingPoint: true,
      id: 'letter'
    });

    img.setControlsVisibility({
      mt: false,
      mr: false,
      mb: false,
      ml: false
    });

    canvas.add(img);

  });
}

这是调用它的循环

for (var i = 0; i < letters; i++) {
  buildImage(i);
}

我想将这些字母作为一个组添加到画布中，如果需要也可以取消分组。有办法做到这一点吗

这是我的

，因为fabric.Image.fromURL是异步的，所以您必须等到加载了所有图像后再创建一组所有图像

$document.readyfunction{ 画布宽度=448； 画布高度=390； canvas=新结构。canvas'c'{ 宽度：画布宽度， 高度：画布高度， containerClassName:'c'， 选择：正确， 对,对， }; var-word='abc'； 让字母=单词长度； 设imageLoaded=0； var letterWidth=画布宽度/字母； var numArr=[]； var wordArray=word.split； 变量偏移=[ 0, 字体宽度， 字体宽度*2， 字体宽度*3， 字体宽度*4， 字体宽度*5， 字体宽度*6， 字体宽度*7， 字体宽度*8， 字体宽度*9， 字体宽度*10， 字体宽度*11， 字体宽度*12， 字体宽度*13， ]; 对于变量i=0；i<字母；i++{ buildImagei； } 设imageData=[]； var scaleO=字体宽度/448； 变量wordPositionY=画布高度-字体宽度/2 //在调用时为传入的值i创建一个新范围： 函数buildImagei{ var wordo=jQuery'*[data id='+wordArray[i]+']']'.attr'src'； fabric.Image.fromURLwordo，函数img，字母宽度{ //fabric.Image.fromURLtiles[i]，函数img{ img.scalescaleO.set{ 左：偏移量[i]， 上图：罗嗦， id:“信” }; img.setControlsVisibility{ mt：错， mr：错， mb：错， ml：错 }; imageData.pushimg； 如果字母==++imageLoaded{ 集合群； } }; } 函数集组{ 设group=new fabric.GroupimageData{ 前100名， 是的， cornerStyle:“圆形”， cornerColor:'f6ff00'， cornerStrokeColor:'f6ff00'， 透明角：错误， 边框颜色：“f9f60b”， 尺寸：22， } canvas.addgroup imageData=[]； } }; 身体{ 背景：20262E； 填充：20px； 字体系列：Helvetica； } 横幅信息{ 背景：fff； 边界半径：4px； 填充：20px； 字体大小：25px； 文本对齐：居中； 过渡：均为0.2s； 保证金：0自动； 宽度：450px； } 钮扣{ 背景：0084ff； 边界：无； 边界半径：5px； 填充：8px 14px； 字体大小：15px； 颜色：fff； } banner-message.alt{ 背景：0084ff； 颜色：fff； 边缘顶端：40px； } banner-message.alt按钮{ 背景：fff； 颜色：000； } c{ 背景：E6； } 我的画布

---

非常感谢您的解释和回答。