Fabric.js中SVG无法与文本框编组并居中的问题求助

我可将一个SVG与两个文本框加载至Fabric Canvas，文本位于SVG下方。但尝试将三者编组并居中时，SVG无法与文本框一同编组，仅两个文本框能编组并垂直居中，SVG仍处于独立状态。

原代码示例 #

var sign = new fabric.Canvas('canvas_0');

sign.backgroundColor = "green";

var w = 633;
var h = 291;
var fontSize = w / 12;

var vtop = 0;
var mainText = new fabric.Textbox("Testing", {
    top: vtop,
    fontSize: fontSize,
    width: Number(w),
    textAlign: "center",
    fill: "red",
});

vtop += mainText.calcTextHeight();

var subText = new fabric.Textbox("Subtext", {
    top: vtop,
    fontSize: fontSize/2,
    width: Number(w),
    textAlign: "center",
    fill: "red",
});

var svgURL = '/assets/example.svg';
var svgVar;
var group = new fabric.Group([], {});
fabric.loadSVGFromURL(svgURL, function(objects) {
    svgVar = objects[0].set({
        top: 0,
        fill: "blue"
    });
    svgVar.scaleToWidth(w/3);
    svgVar.scaleToHeight(h/3);
    svgVar.setCoords();
    sign.add(svgVar);
    svgVar.centerH();
});

sign.add(mainText);
sign.add(subText);

var objs = sign.getObjects();
var group = new fabric.Group(objs);
sign.centerObject(group);
sign.add(group);
sign.renderAll();

问题原因 #

fabric.loadSVGFromURL是异步方法——调用它后，代码会立刻执行后续的添加文本、编组逻辑，此时SVG还没加载完成，sign.getObjects()只能获取到已经添加的两个文本框，SVG尚未被加入画布，自然无法进入编组。

解决方案 #

把所有依赖SVG加载完成的操作（编组、居中、渲染）都放到loadSVGFromURL的回调函数内，确保SVG加载完成后再执行这些步骤。同时调整元素的位置关系，让SVG位于最上方，文本框依次在其下方，最后统一编组并居中。

修改后的代码：

var sign = new fabric.Canvas('canvas_0');

sign.backgroundColor = "green";

var w = 633;
var h = 291;
var fontSize = w / 12;

var mainText = new fabric.Textbox("Testing", {
    fontSize: fontSize,
    width: Number(w),
    textAlign: "center",
    fill: "red",
});

var subText = new fabric.Textbox("Subtext", {
    fontSize: fontSize/2,
    width: Number(w),
    textAlign: "center",
    fill: "red",
});

var svgURL = '/assets/example.svg';
fabric.loadSVGFromURL(svgURL, function(objects) {
    var svgVar = objects[0].set({
        fill: "blue"
    });
    svgVar.scaleToWidth(w/3);
    svgVar.scaleToHeight(h/3);
    svgVar.setCoords();

    // 计算元素垂直位置：SVG在最上方，文本依次在下方（间距可按需调整）
    svgVar.top = 0;
    mainText.top = svgVar.height + 10;
    subText.top = mainText.top + mainText.calcTextHeight() + 5;

    // 将所有元素加入数组并创建编组
    var allObjects = [svgVar, mainText, subText];
    var group = new fabric.Group(allObjects);
    
    // 居中组并渲染
    sign.centerObject(group);
    sign.add(group);
    sign.renderAll();
});

内容的提问来源于stack exchange，提问作者vishalsidd