如何从fabricjs中的画布中删除添加的模板？答案

【问题标题】：How to remove added template from canvas in fabricjs?如何从fabricjs中的画布中删除添加的模板？
【发布时间】：2016-03-17 04:35:15
【问题描述】：

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

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();
    });
});
}

如何解决这个问题？

【问题讨论】：

标签： javascript jquery canvas fabricjs clearcanvas

【解决方案1】：

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

makeOverlay(templateBase);
makeOverlay(templateText);

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

【讨论】：