在Fabric.js中,如何修改对象类,以便所有子类都具有新的自定义属性?

时间:2013-10-18 07:40:37

标签: javascript canvas prototype fabricjs

我正在寻找一种扩展基础fabric.Object类的方法,该类具有自定义属性,我可以保存为JSON并从JSON加载,它将一直传播到各个子类中。

具体来说,我想存储一个深度属性,所以当我从JSON加载对象时,我将能够为对象添加适当的视差。

我想解决方案包括修改fabric.Object.prototype。但我仍在学习如何使用原型。

以下是我尝试过的一些例子: http://www.sitepoint.com/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);

这在为特定对象'rect'提供所需属性以及在toJSON()方法中使用它方面做得很好。但它无法使其可用于所有对象,当我使用loadFromJSON()时,它不包含新属性。

任何帮助将不胜感激!

让我更接近解决方案的其他资源:

Fabric.js - how to save canvas on server with custom attributes
- 使用自定义属性创建子类,但不从中继承任何属性。

https://github.com/kangax/fabric.js/wiki/Adding-additional-object-properties-to-serialized-JSON
- 完全重写所需的方法以包含自定义属性(我宁愿不修改fabricjs的核心)

1 个答案:

答案 0 :(得分:8)

最简单的方法是在调用toJSON时指定您想要包含的属性:

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

但是如果你想真正地将它们添加到输出中,你可以像使用矩形一样修补fabric.Object.prototype.toObject

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