Fabric.js：前视图和后视图

Question

如何实现前后画布元素？ （我的意思是在创建名片/T 恤设计师应用程序时）。 如果我使用序列化/反序列化来更改活动画布元素，如何确定将添加到哪些画布对象？

Answer 1

解决了.. 我将画布元素放入 div 中。 （例如：#container1、#container2）；

隐藏#container2;

然后在JS中做了两个这样的变量：

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

然后分配给canvascanvas1或canvas2变量。 因此我们可以激活我们想要的画布..

这是整个部分：

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

使用canvas.deactivateAllWithDispatch(); 禁用先前活动画布中的选定对象，并使用fireEvents() 函数将触发的事件应用于两个画布..（虽然不觉得这是正确的做法......）