繁体   English   中英

如何在fabricjs中从画布上删除添加的模板?

[英]How to remove added template from canvas in fabricjs?

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

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

如何解决这个问题?

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

makeOverlay(templateBase);
makeOverlay(templateText);

function loadTemplate(url)行上方也加载了先前的基础模板。 因此,删除这些行并尝试。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM