레이아웃을 삽입 할 때 캔버스에서 추가 된 템플릿을 제거해야합니다. 캔버스를 지우려면 다음 코드를 사용하지만 작동하지 않습니다.
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);
}
}
});
Loadlayout 기능
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)
이전 기본 템플릿을로드하는 줄 위에도 있습니다. 따라서 해당 줄을 제거하고 시도하십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다