javascript - In Fabric.js how do I modify the object class so all sub-classes will have a new custom attribute? - Stack Overflow

admin管理员组

文章数量:1345054

I am looking for a way to extend the base fabric.Object class with a custom attribute I can save to JSON and load from JSON that would propagate all the way into the various sub classes.

Specifically i want to store a depth attribute so when i load the objects from the JSON i will be able to add the appropriate parallax to the object.

I imagine the solution would include modifying the fabric.Object.prototype. But i am still learning how to work with prototypes.

Here is some examples of what i have tried: /

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

rect.toObject = (function (toObject) {
    return function () {
        return fabric.util.object.extend(toObject.call(this), {
            depth: 10
        });
    };
})(rect.toObject);

This does a great job at giving the specific object 'rect' the attribute desired, as well as making it available in the toJSON() method. But it fails to make it available for all objects and when i use loadFromJSON() it does not contain the new attribute.

Any help would be appreciated!

Other resources that got me closer to a solution:

Fabric.js - how to save canvas on server with custom attributes
 - Creates a subclass with the custom attributes but nothing inherits from it.

.js/wiki/Adding-additional-object-properties-to-serialized-JSON
 - pletely rewrites the methods needed in order to include custom attributes (I would prefer not to modify the core of fabricjs)

I am looking for a way to extend the base fabric.Object class with a custom attribute I can save to JSON and load from JSON that would propagate all the way into the various sub classes.

Specifically i want to store a depth attribute so when i load the objects from the JSON i will be able to add the appropriate parallax to the object.

I imagine the solution would include modifying the fabric.Object.prototype. But i am still learning how to work with prototypes.

Here is some examples of what i have tried: http://www.sitepoint./fabric-js-advanced/

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

rect.toObject = (function (toObject) {
    return function () {
        return fabric.util.object.extend(toObject.call(this), {
            depth: 10
        });
    };
})(rect.toObject);

This does a great job at giving the specific object 'rect' the attribute desired, as well as making it available in the toJSON() method. But it fails to make it available for all objects and when i use loadFromJSON() it does not contain the new attribute.

Any help would be appreciated!

Other resources that got me closer to a solution:

Fabric.js - how to save canvas on server with custom attributes
 - Creates a subclass with the custom attributes but nothing inherits from it.

https://github./kangax/fabric.js/wiki/Adding-additional-object-properties-to-serialized-JSON
 - pletely rewrites the methods needed in order to include custom attributes (I would prefer not to modify the core of fabricjs)

• javascript
• canvas
• prototype
• fabricjs

Share Improve this question Follow edited May 23, 2017 at 12:02 CommunityBot 111 silver badge asked Oct 18, 2013 at 7:40 payne8payne8 85199 silver badges1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

The simplest way would be to just specify which properties you'd like included when calling toJSON:

canvas.toJSON([ 'selectable', 'lockMovementX' ]);

But if you want to really-really add them to the output, you can monkey-patch fabric.Object.prototype.toObject the same way it's done with rectangle:

fabric.Object.prototype.toObject = (function (toObject) {
    return function () {
        return fabric.util.object.extend(toObject.call(this), {
            foobar: 123
        });
    };
})(fabric.Object.prototype.toObject);

本文标签：