加载这个 JSON 有什么问题？

Question

加载这个 JSON 有什么问题？ 选择一个新对象，设置它的 ID，添加并保存它。尝试重新加载 JSON 对象会导致画布为空。

http://jsfiddle.net/Sugv4/14/

function loadCanvas() {
    canvas.clear();
    window.alert(js);

    canvas.loadFromDatalessJSON(js)
    canvas.renderAll();
}

Answer 1

尝试将其放入 Javascript 代码中：

var canvas;
$(function () {
    canvas = window._canvas = new fabric.Canvas('c');

    fabric.Labeledrect = fabric.util.createClass(fabric.Rect, {
        type: 'labeledRect',
        initialize: function (options) {
            options || (options = {});
            this.callSuper('initialize', options);
            this.set('label', options.label);
            this.set('id', options.id);
        },
        toObject: function () {
            return fabric.util.object.extend(this.callSuper('toObject'), {
                label: this.get('label'),
                id: this.get('id')
            });
        },
        _render: function (ctx) {
            this.callSuper('_render', ctx);
            ctx.font = '10px Helvetica';
            ctx.fillStyle = '#333';
            ctx.fillText(this.label, -this.width / 2, -this.height / 2 + 10);
            ctx.fillText(this.id, -this.width / 2, -this.height / 2 + 30);
        }

    });

    fabric.Labeledrect.fromObject = function (object, callback) {
        return new fabric.Labeledrect(object);
    }
    fabric.Labeledrect.async = true;
});




function voegObjectToe() {

    var myObjects = document.getElementById("myObjects");
    var kenmerk = myObjects.options[myObjects.selectedIndex].text;


    //nieuw object
    var rect = new fabric.Labeledrect({
        left: canvas.width / 2,
        top: canvas.height / 2

    });

    if (kenmerk == 'Camper') {
        rect.set({
            width: 80,
            height: 50,
            fill: '#faa',
            label: 'Camper',
            id: document.getElementById("myObject").value
        });

    } else if (kenmerk == 'Caravan') {
        rect.set({
            width: 80,
            height: 60,
            fill: '#3ac',
            label: 'Caravan',
            id: document.getElementById("myObject").value
        });
    } else if (kenmerk == 'Auto') {
        rect.set({
            width: 70,
            height: 40,
            fill: '#bbb',
            label: 'Auto',
            id: document.getElementById("myObject").value
        });
    } else if (kenmerk == "Boot") {
        rect.set({
            width: 150,
            height: 60,
            fill: '#8d1',
            label: 'Boot',
            id: document.getElementById("myObject").value
        });

    }
    canvas.add(rect);
    rect.set({
        label: kenmerk + ' ' + rect.width * 7 + ' cm',
        rx: 8,
        ry: 8
    });
    canvas.renderAll();

}


function saveCanvas() {
    js = JSON.stringify(canvas.toDatalessJSON());

}

function loadCanvas() {
    //window.alert(js);

    canvas.clear();
    canvas.loadFromDatalessJSON(js);
    canvas.renderAll();
}