Fabric.js Unterklassen Stoff.Gruppe - Fehler: "Cannot read property 'async' of undefined" beim laden von JSON

Haben das folgende Problem:

Versucht Unterklasse Stoff.Gruppe:

var CustomGroup = fabric.util.createClass(fabric.Group, {
    type : 'customGroup',

    initialize : function(objects, options) {
        options || ( options = { });

        this.callSuper('initialize', objects, options);
        this.set('customAttribute', options.customAttribute || 'undefinedCustomAttribute');
    },

    toObject : function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {
            customAttribute : this.get('customAttribute')
        });
    },

    _render : function(ctx) {
        this.callSuper('_render', ctx);
    }
});

Testcase:

Erstelle ich ein rotes Rechteck und fügte zu der benutzerdefinierten Gruppe:

function drawTestRect() {
    //create a rectangle object
    var rect = new fabric.Rect({
        left : 100,
        top : 100,
        fill : 'red',
        width : 20,
        height : 20
    });

    var cgroup = new CustomGroup([rect], {
        top : 50,
        left : 50,
        customAttribute : 'Hello World'
    });

    canvas.add(cgroup);

};

Problem:
Ich möchte JSON-auf der Leinwand und später will ich Last Leinwand von JSON.

drawTestRect()

var savedCanvas = canvas.toJSON();

Leinwand.clear();

Leinwand.loadFromJSON(savedCanvas);

Alles ist in Ordnung (Rect/Gruppe gezogen wird; JSON Valide ist), aber wenn ich laden von JSON, bekomme ich die folgende Fehlermeldung in der Konsole:

TypeError: Cannot read property 'async' undefined

, Was ich versucht habe, noch:

Ich fügte hinzu, "CustomGroup.async = false;". Aber hat auch nicht geholfen

InformationsquelleAutor mahega | 2014-06-24

Den Fehler "Cannot read property 'async' of undefined" wird erhöht, da keine "klass" gefunden werden kann - https://github.com/kangax/fabric.js/blob/master/src/util/misc.js#L214-215.

Ordnen Sie Ihre benutzerdefinierten Objekts fabric Objekt - sonst canvas.loadFromJSON() funktioniert nicht.

var fabric.CustomGroup = fabric.util.createClass(fabric.Group, {
    type : 'customGroup',

    initialize : function(objects, options) {
        options || ( options = { });

        this.callSuper('initialize', objects, options);
        this.set('customAttribute', options.customAttribute || 'undefinedCustomAttribute');
    },

    toObject : function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {
            customAttribute : this.get('customAttribute')
        });
    },

    _render : function(ctx) {
        this.callSuper('_render', ctx);
    }
});

Zusätzlich müssen Sie deklarieren die fromObject Methode - es ist notwendig für loadFromJSON.
In diesem Fall besteht das Objekt geladen ist synchron.

fabric.CustomGroup.fromObject = function (object, callback) {
    var _enlivenedObjects;
    fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
        delete object.objects;
        _enlivenedObjects = enlivenedObjects;
    });
    return new fabric.CustomGroup(_enlivenedObjects, object);
};

Wenn das benutzerdefinierte Objekt geladen wird, async, die Sie haben, dies zu tun:

fabric.CustomGroup.fromObject = function (object, callback) {
    fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
        delete object.objects;
        callback && callback(new fabric.CustomGroup(enlivenedObjects, object));
    });
};

fabric.CustomGroup.async = true;

Habe ich eine kleine jsfiddle testcase: http://jsfiddle.net/Kienz/qPLY6/

Ich denke fromObject Hinzugefügt werden sollten, die Subclassing - Dokumentation auf fabric.js

InformationsquelleAutor Kienz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.