Fabric.js - 分组的iText不可编辑

我可能来不及回答这个问题,但是你们当中很多人都希望我能够找到这个答案.你可以找到一个完美的iText解决方案,用户可以编辑iText的文本,这是fabric.group 工作解决方案的一部分.

接下来的方法是:

当用户双击所需的组时,我们将所有元素取消组合

将重点放在iText元素上

进入iText的编辑模式并选择所有文本,以便用户可以直接开始编辑..

用户退出编辑模式后,元素将再次组合在一起.

// ungroup objects in group
var items
var ungroup = function (group) {
    items = group._objects;
    group._restoreObjectsState();
    canvas.remove(group);
    for (var i = 0; i < items.length; i++) {
        canvas.add(items[i]);
    }
    // if you have disabled render on addition
    canvas.renderAll();
};

// Re-group when text editing finishes
var dimensionText = new fabric.IText("Dimension Text", {
    fontFamily: 'Comic Sans',
    fontSize: 14,
    stroke: '#000',
    strokeWidth: 1,
    fill: "#000",
    left: 170,
    top: 60
});
dimensionText.on('editing:exited', function () {
    var items = [];
    canvas.forEachObject(function (obj) {
        items.push(obj);
        canvas.remove(obj);
    });
    var grp = new fabric.Group(items.reverse(), {});
    canvas.add(grp);
    grp.on('mousedown', fabricDblClick(grp, function (obj) {
        ungroup(grp);
        canvas.setActiveObject(dimensionText);
        dimensionText.enterEditing();
        dimensionText.selectAll();
    }));
});