fabric.js의 캔버스에서 추가 된 템플릿을 제거하는 방법은 무엇입니까?

Isuru

레이아웃을 삽입 할 때 캔버스에서 추가 된 템플릿을 제거해야합니다. 캔버스를 지우려면 다음 코드를 사용하지만 작동하지 않습니다.

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] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

AngularJS에서 생성 된 템플릿 내부에 정적 HTML을 추가하는 방법은 무엇입니까?

분류에서Dev

Javascript의 for 루프 안에 html 템플릿을 추가하는 방법은 무엇입니까?

분류에서Dev

기존 handelbar 템플릿의 목록에 항목을 추가하는 방법은 무엇입니까?

분류에서Dev

django-업로드 된 파일의 내용을 템플릿에 삽입하는 방법은 무엇입니까?

분류에서Dev

템플릿 매개 변수에 전달 된 유형을 추출하는 방법은 무엇입니까?

분류에서Dev

템플릿에 제약 조건을 적용하는 세 가지 방법의 차이점은 무엇입니까?

분류에서Dev

여러 캔버스가 포함 된 섹션 뒤에 섹션을 추가하는 방법은 무엇입니까?

분류에서Dev

GDB에서 역 추적의 템플릿 함수 서명을 해석하는 방법은 무엇입니까?

분류에서Dev

AngularJS 템플릿의 중첩 된 JSON 배열에서 값을 얻는 방법은 무엇입니까?

분류에서Dev

Docker 이미지에서 추가 된 후 제거 된 파일을 검색하는 방법은 무엇입니까?

분류에서Dev

나뭇 가지 확장에서 템플릿 블록을 재정의하는 방법은 무엇입니까?

분류에서Dev

목록에서 정의 된 값을 가진 요소를 제거하는 방법은 무엇입니까?

분류에서Dev

Angular Covalent 템플릿에서 중복 된 스크롤바를 제거하는 방법은 무엇입니까?

분류에서Dev

Android에서 확장 된보기에 캔버스를 추가하는 방법은 무엇입니까?

분류에서Dev

Android에서 확장 된보기에 캔버스를 추가하는 방법은 무엇입니까?

분류에서Dev

Adobe 사전 정의 템플릿을 사용하여 C #에서 PDF에 스탬프를 추가하는 방법은 무엇입니까?

분류에서Dev

템플릿 클래스의 이름을 템플릿 인수에 전달하는 방법은 무엇입니까?

분류에서Dev

xslt의 다른 템플릿에서 템플릿을 호출하는 방법은 무엇입니까?

분류에서Dev

Hyperledger Fabric의 관리자에게 속성 값을 추가하는 방법은 무엇입니까?

분류에서Dev

사용자가 이동을 마친 후 Fabric.js 캔버스에 대한 모든 정보를 얻는 방법은 무엇입니까?

분류에서Dev

템플릿 매개 변수에서 중복성을 제거하고 유연성을 추가하는 방법은 무엇입니까?

분류에서Dev

필터링 된 제품을 표시 할 때 / shop / 페이지에서 카테고리 템플릿을 재정의하는 방법은 무엇입니까?

분류에서Dev

React-native 프로젝트에서 추가 된 하나의 권한을 제거하는 방법은 무엇입니까?

분류에서Dev

.append ()에 의해 추가 된 jQuery 요소를 제거하는 방법은 무엇입니까?

분류에서Dev

depmod -a로 추가 된 드라이버의 삽입을 제거 / 비활성화하는 방법은 무엇입니까?

분류에서Dev

템플릿 필드 GridView에 조건부 버튼을 추가하는 방법은 무엇입니까?

분류에서Dev

클래스 템플릿 외부에서 클래스 템플릿의 생성자 템플릿을 정의하는 방법은 무엇입니까?

분류에서Dev

jQuery의 clone () 메서드에있는 새로 추가 된 테이블 행에 삭제 버튼을 추가하는 방법은 무엇입니까?

분류에서Dev

클래스 내에서 중첩 된 템플릿 매개 변수의 중첩 된 유형을 참조하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    AngularJS에서 생성 된 템플릿 내부에 정적 HTML을 추가하는 방법은 무엇입니까?

  2. 2

    Javascript의 for 루프 안에 html 템플릿을 추가하는 방법은 무엇입니까?

  3. 3

    기존 handelbar 템플릿의 목록에 항목을 추가하는 방법은 무엇입니까?

  4. 4

    django-업로드 된 파일의 내용을 템플릿에 삽입하는 방법은 무엇입니까?

  5. 5

    템플릿 매개 변수에 전달 된 유형을 추출하는 방법은 무엇입니까?

  6. 6

    템플릿에 제약 조건을 적용하는 세 가지 방법의 차이점은 무엇입니까?

  7. 7

    여러 캔버스가 포함 된 섹션 뒤에 섹션을 추가하는 방법은 무엇입니까?

  8. 8

    GDB에서 역 추적의 템플릿 함수 서명을 해석하는 방법은 무엇입니까?

  9. 9

    AngularJS 템플릿의 중첩 된 JSON 배열에서 값을 얻는 방법은 무엇입니까?

  10. 10

    Docker 이미지에서 추가 된 후 제거 된 파일을 검색하는 방법은 무엇입니까?

  11. 11

    나뭇 가지 확장에서 템플릿 블록을 재정의하는 방법은 무엇입니까?

  12. 12

    목록에서 정의 된 값을 가진 요소를 제거하는 방법은 무엇입니까?

  13. 13

    Angular Covalent 템플릿에서 중복 된 스크롤바를 제거하는 방법은 무엇입니까?

  14. 14

    Android에서 확장 된보기에 캔버스를 추가하는 방법은 무엇입니까?

  15. 15

    Android에서 확장 된보기에 캔버스를 추가하는 방법은 무엇입니까?

  16. 16

    Adobe 사전 정의 템플릿을 사용하여 C #에서 PDF에 스탬프를 추가하는 방법은 무엇입니까?

  17. 17

    템플릿 클래스의 이름을 템플릿 인수에 전달하는 방법은 무엇입니까?

  18. 18

    xslt의 다른 템플릿에서 템플릿을 호출하는 방법은 무엇입니까?

  19. 19

    Hyperledger Fabric의 관리자에게 속성 값을 추가하는 방법은 무엇입니까?

  20. 20

    사용자가 이동을 마친 후 Fabric.js 캔버스에 대한 모든 정보를 얻는 방법은 무엇입니까?

  21. 21

    템플릿 매개 변수에서 중복성을 제거하고 유연성을 추가하는 방법은 무엇입니까?

  22. 22

    필터링 된 제품을 표시 할 때 / shop / 페이지에서 카테고리 템플릿을 재정의하는 방법은 무엇입니까?

  23. 23

    React-native 프로젝트에서 추가 된 하나의 권한을 제거하는 방법은 무엇입니까?

  24. 24

    .append ()에 의해 추가 된 jQuery 요소를 제거하는 방법은 무엇입니까?

  25. 25

    depmod -a로 추가 된 드라이버의 삽입을 제거 / 비활성화하는 방법은 무엇입니까?

  26. 26

    템플릿 필드 GridView에 조건부 버튼을 추가하는 방법은 무엇입니까?

  27. 27

    클래스 템플릿 외부에서 클래스 템플릿의 생성자 템플릿을 정의하는 방법은 무엇입니까?

  28. 28

    jQuery의 clone () 메서드에있는 새로 추가 된 테이블 행에 삭제 버튼을 추가하는 방법은 무엇입니까?

  29. 29

    클래스 내에서 중첩 된 템플릿 매개 변수의 중첩 된 유형을 참조하는 방법은 무엇입니까?

뜨겁다태그

보관