CODEWITHSUNDEEP
javascriptfabricjs
Shaun Heveron
Shaun Heveron

Reputation: 43

FabricJS modify custom properties

I am using the FabricJS graphics library and have added an additional property (name) to a fabric.Rect object. All well and good and it serializes out to JSON correctly.

I am struggling though with the code needed to allow me to subsequently change the customer property once set i.e. to change 'some name' to something else. It is driving me a bit crazy.

Any additional help really appreciated.

Thanks,

Shaun

                const o = new fabric.Rect({
                    width: width,
                    height: height,
                    fill: tableFill,
                    stroke: tableStroke,
                    strokeWidth: 2,
                    shadow: tableShadow,
                    originX: "center",
                    originY: "center",
                    centeredRotation: true,
                    snapAngle: 45,
                    selectable: true,
                    strokeUniform: true
                });

                o.toObject = (function(toObject) {
                    return function(propertiesToInclude) {
                        return fabric.util.object.extend(toObject.call(this, propertiesToInclude), {
                            name: 'some name'
                        });
                    };
                })(o.toObject);

                console.log(o.toObject().name)

Upvotes: 1

Views: 944

Answers (1)

Shaun Heveron
Shaun Heveron

Reputation: 43

So, basically run this code to allow any additional properties to be serialised to and from JSON. In this example a property called name is added.

const originalToObject = fabric.Object.prototype.toObject;
const myAdditional = ['name'];
fabric.Object.prototype.toObject = function (additionalProperties) {
    return originalToObject.call(this, myAdditional.concat(additionalProperties));
}

Then create a new Fabric object and set or get the additional properties as needed...

const o = new fabric.Rect({
    width: width,
    height: height,
    fill: tableFill,
    stroke: tableStroke,
    strokeWidth: 2,
    shadow: tableShadow,
    originX: "center",
    originY: "center",
    centeredRotation: true,
    snapAngle: 45,
    selectable: true,
    strokeUniform: true
});

o.name = 'Fred'
console.log(o.toJSON())

Upvotes: 2

Related Questions