如何从 fabricjs 中的 canvas 中删除添加的模板？

Question

插入布局时，我需要从 canvas 中删除添加的模板。我使用以下代码清除 canvas 但它不起作用。

function clearCanvas() {
    canvas.clear();
    canvas.renderAll.bind(canvas);
    $('#layer-list li').each(function(i,obj) {
        if(!$(this).hasClass('disabled'))
            $(this).remove();
    });
}

布局添加功能如下

$(document).on('click','#layout-content .item', function(event) {
    if($(this).attr('data-image')) {
        var url = $(this).attr('data-image');
        if(url != '') {
            layoutMode = true;
            clearCanvas();
            loadLayout(url);
        }
    }
});

加载布局函数

function loadTemplate(url) {
fabric.loadSVGFromURL(url, function(objects, options) { 
    var svg = fabric.util.groupSVGElements(objects,options);
    svg.scaleToHeight(canvas.getHeight());
    canvas.add(svg);
    svg.center();
    canvas.renderAll();        
    var bounds = svg.getObjects();
    fabric.loadSVGFromURL(url, function(objects, options) {
        var group = new fabric.Group(objects,options);
        canvas.add(group);
        group.scaleToHeight(canvas.getHeight());

        canvas.renderAll();
        var items = group._objects;
        group._restoreObjectsState();
        canvas.remove(group);  

        for(var i = 0; i < items.length; i++) { 
            var left = svg.getLeft() + bounds[i].getLeft()*svg.getScaleX();
            var top = svg.getTop() + bounds[i].getTop()*svg.getScaleY();
              items[i].set({
              left:left,
              top:top,
              droppable:true,
              selectable:false,
              hasControls:false,
              hasBorders:false,
              layering:false
            });
            canvas.add(items[i]);
            canvas.renderAll();
        }         
        canvas.remove(svg);
        makeOverlay(templateBase);//////////wrong
        makeOverlay(templateText);
        canvas.renderAll();
    });
});
}

如何解决该问题？

Answer 1

您的 function clearCanvas() 和 $(document).on('click','#layout-content .item', function(event) 没有任何问题。问题出在您的 function loadTemplate(url) 上。

makeOverlay(templateBase);
makeOverlay(templateText);

function loadTemplate(url) 中的上一行也加载以前的基本模板。所以删除这些行并尝试。

如何从 fabricjs 中的 canvas 中删除添加的模板？

How to remove added template from canvas in fabricjs?

javascript

jquery

canvas

clearcanvas

fabricjs