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以帆布和取消組合它

回答

相關問題