如何從Fabric.js畫布中刪除SVG？

Question

因此，我推斷出可以通過以下方式將SVG圖形添加​​到畫布：

fabric.loadSVGFromURL('img1.svg', function(objects, options) {
    var obj1 = fabric.util.groupSVGElements(objects, options);
    canvas.add(obj1);
}); 

fabric.loadSVGFromURL('img2.svg', function(objects, options) {
    var obj2 = fabric.util.groupSVGElements(objects, options);
    canvas.add(obj2);
}); 

假設我現在要刪除其中一個或兩個。 我怎樣才能做到這一點？

Answer 1

在fabricjs我使用不同的方法來刪除畫布中的對象。 此方法刪除畫布中的任何對象。 fabricjs允許為每個對象設置name ，因此我們可以使用此屬性刪除對象。像這樣（我為此使用jquery ：）

var canvas  = new fabric.Canvas('c');
fabric.loadSVGFromURL('test.svg', function(objects, options) {
    var obj2 = fabric.util.groupSVGElements(objects, options);
    obj2.name ="test_svg"   //<<<<<<< here set name
    canvas.add(obj2);
    console.log(canvas.getObjects())
}); 

function del(){
$.each(canvas._objects, function(index, obj) {
     if(obj == null) return;
     $.each(obj, function(attr, value) {
          //console.log( attr + ' == ' + value );
             if(value == "test_svg"){ //<<<<< here we call name
                   //alert(index);
                     canvas.remove(canvas._objects[index]); // here we delete that object
                     canvas.renderAll();
                 }
             });
});
}

我從加載svg方法及其work..test進行了測試，所以也許這對您有用..