Question

我使用带有

功能的FabricJS将SVG文件上传到画布

fabric.loadSVGFromURL (url, function(objects, options){
    group = fabric.util.groupSVGElements(objects, options);
    canvas.add(group).centerObject(group).renderAll();
});

这完美无缺。但是，我想要做的下一步是取消组合最近添加的组。我需要取消组合的原因是我希望能够通过点击它们来选择组的子元素，因为如果它们被分组，则无法访问这些元素。

我找到了一个snippet来执行取消组合但是当我使用组创建的宽度groupSVGElements时，元素会失去原来的位置，因为我加载了整个svg。

有谁知道如何取消组合加载的SVG并仍保留元素的原始位置？

Answer 1

您仍然可以使用perPixelTargetFind

访问每个元素

当设置为true时，在画布上以“每像素”为基础“找到”对象，而不是根据

边界框。

Answer 2

我正在寻找相同的解决方案。到目前为止你找到了答案吗？

看一下SVG元素的结构，我会想象应该可以编写一个递归方法，它给孩子们，组的属性并将它们放在一个级别。如果你继续这样做，你最终应该爆炸所有组并且所有属性都是完整的（否则将继承）。

看看SVG-EDIT，有一个功能应该这样做：

Function: ungroupSelectedElement
// Unwraps all the elements in a selected group (g) element. This requires
// significant recalculations to apply group's transforms, etc to its children
this.ungroupSelectedElement = function() {
var g = selectedElements[0];
if (!g) {
    return;
}
if ($(g).data('gsvg') || $(g).data('symbol')) {
    // Is svg, so actually convert to group
    convertToGroup(g);
    return;
}
if (g.tagName === 'use') {
    // Somehow doesn't have data set, so retrieve
    var symbol = svgedit.utilities.getElem(getHref(g).substr(1));
    $(g).data('symbol', symbol).data('ref', symbol);
    convertToGroup(g);
    return;
}
var parents_a = $(g).parents('a');
if (parents_a.length) {
    g = parents_a[0];
}

// Look for parent "a"
if (g.tagName === 'g' || g.tagName === 'a') {

    var batchCmd = new svgedit.history.BatchCommand('Ungroup Elements');
    var cmd = pushGroupProperties(g, true);
    if (cmd) {batchCmd.addSubCommand(cmd);}

    var parent = g.parentNode;
    var anchor = g.nextSibling;
    var children = new Array(g.childNodes.length);

    var i = 0;

    while (g.firstChild) {
        var elem = g.firstChild;
        var oldNextSibling = elem.nextSibling;
        var oldParent = elem.parentNode;

        // Remove child title elements
        if (elem.tagName === 'title') {
            var nextSibling = elem.nextSibling;
            batchCmd.addSubCommand(new svgedit.history.RemoveElementCommand(elem, nextSibling, oldParent));
            oldParent.removeChild(elem);
            continue;
        }

        children[i++] = elem = parent.insertBefore(elem, anchor);
        batchCmd.addSubCommand(new svgedit.history.MoveElementCommand(elem, oldNextSibling, oldParent));
    }

    // remove the group from the selection          
    clearSelection();

    // delete the group element (but make undo-able)
    var gNextSibling = g.nextSibling;
    g = parent.removeChild(g);
    batchCmd.addSubCommand(new svgedit.history.RemoveElementCommand(g, gNextSibling, parent));

    if (!batchCmd.isEmpty()) {addCommandToHistory(batchCmd);}

    // update selection
    addToSelection(children);
}
};

另见：

https://code.google.com/p/svg-edit/source/browse/trunk/editor/svgcanvas.js

将SVG从文件加载到画布并取消组合

2 个答案: