CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvasfabricjs
medkhelifi
medkhelifi

Reputation: 1121

fabric.js add custom property to IText

I want to add a custom property to fabricjs.IText, i used a same script i used with my fabricjs.Text class:

fabric.CustomIText = fabric.util.createClass(fabric.IText, {
        type        : 'custom-itext',
        initialize  : function(element, options) {
            this.callSuper('initialize', element, options);
            options && this.set('textID', options.textID);
        },
        toObject: function() {
            return fabric.util.object.extend(this.callSuper('toObject'), {textID: this.textID});
        }
    });    
    fabric.CustomIText.fromObject = function(object) {
        return new fabric.CustomIText(object.text, object);
    };
    fabric.CustomIText.async = false;

When I create my new custom-itext there is no problem.

 var text    = new fabric.CustomIText('NewText', { left: 0, top: 0 , fill: color, fillColor:color, textID: "SommeID"});
    canvas.add(text);

But whene I want to load my new CustomItext from a JSON i have a javascrip error:

Uncaught TypeError: Cannot read property 'async' of undefined

Thank you

Upvotes: 0

Views: 3179

Answers (2)

ozooner
ozooner

Reputation: 550

I got it to work with async initialization:

fabric.TextAsset = fabric.util.createClass(fabric.IText, {
    type: 'textAsset',

    initialize: function(element, options) {
        this.callSuper('initialize', element, options);
        this.set('extraProp', options.extraProp);
    },

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

fabric.TextAsset.fromObject = function (object, callback) {
    callback(new fabric.TextAsset(object.text, object));
};

fabric.TextAsset.async = true;
}

Upvotes: 0

levon
levon

Reputation: 939

Here's a code saving additional attributes in serialization for any object on canvas. This might solve your problem, it worked for me

// Save additional attributes in Serialization
fabric.Object.prototype.toObject = (function (toObject) {
    return function () {
        return fabric.util.object.extend(toObject.call(this), {
            textID: this.textID
        });
    };
})(fabric.Object.prototype.toObject);

Upvotes: 4

Related Questions