9

我正在寻找一种方法来扩展具有自定义属性的基础 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 - 如何使用自定义属性在服务器上保存画布
 - 创建具有自定义属性的子类,但没有任何继承自它。

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

4

1 回答 1

10

最简单的方法是在调用时指定您希望包含的属性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);
于 2013-10-19T07:37:16.493 回答