Question

我正在制作一个应用程序，允许用户创建设计以个性化卡。为此，我使用一系列准则和白色矩形初始化画布，然后加载设计数据。

我使用fabric.Canvas#toJSON对画布进行序列化，并使用fabric.Canvas#loadFromJSON对画布进行反序列化。

当我尝试反序列化JSON时出现问题：对象的“ z-index”位置发生更改，因此，呈现的设计不是原始设计。

function initCanvasFromJson(){
    jQuery.ajax({
        ...
    }).done(function (data) {
        let img_content = JSON.parse(data);
        addGuideLines(canvas);
        canvas.loadFromJSON(img_content ,canvas.renderAll.bind(canvas));           
    })
}


function addGuideLines(canvas){
        var white_rect = new fabric.Rect({
            width: 636,
            height: 406,
            selectable: false,
            fill: 'white',
            evented: false,
            rx: 10,
            ry: 10,
            name: 'white_rect',
            excludeFromExport: true
        });

        canvas.add(white_rect);
        canvas.centerObject(white_rect);

        var external_border = new fabric.Rect({
            width: 636,
            height: 406,
            selectable: false,
            fill: 'rgba(255, 255, 255, 0)',
            stroke: '#5e6462',
            strokeWidth: 1,
            rx: 10,
            ry: 10,
            evented: false,
            name: 'external_border',
            excludeFromExport: true
        });

        canvas.add(external_border);
        canvas.centerObject(external_border);

        var internal_border = new fabric.Rect({
            width: external_border.get('width') - 14.57 + 2,
            height: external_border.get('height') - 14.57 + 2,
            selectable: false,
            fill: 'rgba(255, 255, 255, 0)',
            stroke: 'black',
            strokeWidth: 0.5,
            strokeDashArray: [3, 2],
            rx: 10,
            ry: 10,
            evented: false,
            name: 'internal_border',
            excludeFromExport: true
        });

        canvas.add(internal_border);
        canvas.centerObject(internal_border);

        //We have to keep the guidelines above the rest elements, but the white rect needs to stay in the back.
        canvas.on('object:added', function (e) {
            white_rect.bringToFront();
            external_border.bringToFront();
            internal_border.bringToFront();
            white_rect.sendToBack();
        });

        canvas.renderAll();
    }

调试loadFromJSON方法中的回调，发现元素数组已反向重新排序。

做一些测试，我意识到，如果我将画布中的所有元素（包括白色矩形和指导方针）序列化，我就可以正确地渲染设计。

您对此有何解释？

无法使用LoadDataFromJSON fabricjs方法以正确的顺序加载画布元素

0 个答案: