SVG以帆布和取消组合它

我使用FabricJS与功能SVG以帆布和取消组合它

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

这完美的作品上传SVG文件到画布上。然而，我想要做的下一步是将最近添加的组取消组合。我需要取消组合的原因是我希望能够通过单击它们来选择组的子元素，因为如果这些元素是分组的，则无法访问这些元素。

我发现了一个snippet来执行取消组合，但是当我用组创建宽度groupSVGElements时，元素失去了原来的位置，扰乱了我加载的整个svg。

有谁知道如何取消组合一个加载的SVG，仍然保持元素的原始位置？

来源

2014-02-28 Gary Torres

这里是解决方案： http://stackoverflow.com/questions/15046602/how-to-select-child-elements-after-using-groupsvgelements –

您可以使用svg.js，它可以取消组合您的元素而不会改变视觉外观 – Fuzzyma

可以仍然访问每个使用perPixelTargetFind

元素的当设定为true，对象在画布上每像素为基础，而不是根据

边界框“找到”。

来源

2014-03-03 03:15:32 John

是的，Im设置'perP ixelTargetFind'设置为“true”，但是当你点击一个Group对象时，整个组被选中。我想在不取消分组的情况下访问组的子对象（如果可能的话） –

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

看看一个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

来源

2014-06-04 05:21:01 user3666579

SVG以帆布和取消组合它

回答

相关问题