如何从 Fabric.js canvas 中删除 SVG？

Question

所以我推断我可以使用以下方法将 SVG 图形添加到 canvas：

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 中，我使用不同的方法删除 canvas 中的对象。此方法删除 canvas 中的任何对象。 fabricjs 允许为每个对象设置 name 这样我们就可以使用这个属性删除 object.like 这个（我为此使用 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 方法及其 worked.so 测试了这个，也许这对你有用..

如何从 Fabric.js canvas 中删除 SVG？

How do I remove SVG from a Fabric.js canvas?

javascript

svg

fabricjs