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

问题描述

我正在寻找一种方法来扩展基本的fabric.Object类与一个自定义属性我可以保存到JSON和加载JSON，将传播到各种子类。

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

这里是我试过的一些例子：

  //创建一个矩形对象
 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（）它不包含新属性。

任何帮助将不胜感激。

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



  - 使用自定义属性创建子类，但无法从中继承。



  - 完全重写所需的方法，以包含自定义属性（我不想修改fabricjs的核心）

解决方案

最简单的方法是在调用 toJSON 时指定包含哪些属性：

  canvas.toJSON（['selectable'，'lockMovementX']）; 
  

但是如果你真的想把它们添加到输出中，你可以使用monkey-patch 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）; 
  

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.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);

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:

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

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

解决方案

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);

这篇关于在Fabric.js中如何修改对象类，以便所有子类都有一个新的自定义属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！