Fabric.js : 앞면 및 뒷면보기

Question

전면 및 후면 캔버스 요소를 구현하는 방법은 무엇입니까? (나는 명함/티셔츠 디자이너 앱을 만들 때를 의미한다). 직렬화/직렬화를 사용하여 활성 캔버스 요소를 변경하는 경우 어떤 캔버스 개체를 추가할지 결정하는 방법은 무엇입니까?

Answer 1

해결 .. 저는 캔버스 요소를 div에 넣었습니다. (예 : # container1, # container2);

lid #container2; 이어서 canvascanvas1 또는 canvas2 변수에 할당

var canvas1 = new fabric.Canvas('c'); 
var canvas2 = new fabric.Canvas('c2'); 

:

그럼 JS에서 같은 두 가지 변수를 만들었다. 따라서 우리는 활성 캔버스 우리는

다음은 전체 부분 .. 할 수 있습니다

var canvas1 = new fabric.Canvas('c'); 
    var canvas2 = new fabric.Canvas('c2'); 

    var switcher = 1; 

    if(switcher == 1) { 
     var canvas = canvas1; 
     $("#container2").hide(); 
      fireEvents(); 
    } 

    $("#bside").click(function(){ 
     switcher = 2; 
     $("#container1").hide() 
     $("#container2").show(); 
      fireEvents(); 
     canvas = canvas2; 
     canvas.deactivateAllWithDispatch(); 
     canvas.calcOffset(); 
    }); 
    $("#fside").click(function(){ 
     switcher = 1; 
     $("#container1").show() 
     $("#container2").hide(); 
      fireEvents(); 
     canvas = canvas1; 
     canvas.deactivateAllWithDispatch(); 
     canvas.calcOffset(); 
    }); 

function fireEvents(){ 
canvas.on('object:selected', function(options){ 
// Event actions 
}); 
} 

은 모두 캔버스에 해고 이벤트를 적용 할 previus 활성 캔버스와 fireEvents() 기능에서 선택한 객체를 사용하지 canvas.deactivateAllWithDispatch();을 사용 .. (그래도 올바른 방법이라고 생각하지 마십시오 ...)