Question

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

Answer 1

解决.. 我将canvas元素放入div中。（例如：＃container1，＃container2）;

隐藏#container2;

然后在JS中创建了两个变量：

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

然后分配到canvas canvas1或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();禁用来自previus活动画布和fireEvents()函数的选定对象以将触发事件应用于两个画布..（不要觉得这是正确的方法，但... ）

Fabric.js：正面和背面视图

1 个答案: