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

Question

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

特别是我想存储一个深度属性，这样当我从 JSON 加载对象时，我将能够为对象添加适当的视差。

我想解决方案将包括修改 fabric.Object.prototype。但我仍在学习如何使用原型(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 的核心)

Answer 1

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

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

但是如果你真的想把它们添加到输出中，你可以猴子修补 fabric.Object.prototype.toObject 就像它对 rectangle 所做的一样:

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