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，因此我们可以使用此属性删除object.like this（我使用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();
                 }
             });
});
}

我从load svg方法测试它并且它工作了。也许这对你有用..

如何从Fabric.js画布中删除SVG？

1 个答案: