Fabric.js子类化fabric.Group - 错误：“无法读取未定义的属性'async'当从JSON加载时 [英] Fabric.js subclassing fabric.Group - Error: "Cannot read property 'async' of undefined" when load from JSON

问题描述

遇到以下问题：

$ b 尝试子类化fabric.Group： pre> var CustomGroup = fabric.util.createClass（fabric.Group，{
type：'customGroup'，

initialize：function ）{
options ||（options = {}）;

this.callSuper（'initialize'，objects，options）;
this.set（'customAttribute'，options .customAttribute ||'undefinedCustomAttribute'）;
}，

toObject：function（）{
return fabric.util.object.extend（this.callSuper（'toObject'） ，{
customAttribute：this.get（'customAttribute'）
}）;
}，

_render：function（ctx）{
this。 callSuper（'_ render'，ctx）;
}
}）;


测试用例：

我创建一个红色矩形并将其添加到自定义组中：

  function drawTestRect（）{
 / /创建一个矩形对象
 var rect = new fabric.Rect（{
 left：100，
 top：100，
 fill：'red'，
 width： 20，
 height：20 
}）; 
 
 var cgroup = new CustomGroup（[rect]，{
 top：50，
 left：50，
 customAttribute：'Hello World'
} ）; 
 
 canvas.add（cgroup）; 
 
}; 
  

问题：
我想获得画布的JSON

var savedCanvas = canvas.toJSON（）;

canvas.clear（）;

canvas.loadFromJSON ）;

一切正常（Rect / Group被绘制; JSON是有效的），但是当我从JSON加载时，在控制台中出现以下错误：

TypeError：无法读取undefined的属性'async'

我尝试过的操作：

• CustomGroup.async = false; 。但没有帮助

解决方案

错误无法读取未定义的属性async是因为找不到klass - https://github.com/kangax/fabric.js/blob/master/src/util/misc.js#L214-215 。

您必须将自定义对象分配给 fabric object - 否则 canvas.loadFromJSON（）无法工作。 / p>

  var fabric.CustomGroup = fabric.util.createClass（fabric.Group，{
 type：'customGroup'，
 
 initialize：function（objects，options）{
 options ||（options = {}）; 
 
 this.callSuper（'initialize'，objects，options） ; 
 this.set（'customAttribute'，options.customAttribute ||'undefinedCustomAttribute'）; 
}，
 
 toObject：function（）{
 return fabric。 util.object.extend（this.callSuper（'toObject'），{
 customAttribute：this.get（'customAttribute'）
}）; 
}，
 
 _render：function（ctx）{
 this.callSuper（'_ render'，ctx）; 
} 
}）; 
  

此外，您必须声明 fromObject 方法 - 它需要 loadFromJSON 。
在这种情况下，你的对象是加载同步的。

  fabric.CustomGroup.fromObject = function（object，callback）{ 
 var _enlivenedObjects; 
 fabric.util.enlivenObjects（object.objects，function（enlivenedObjects）{
 delete object.objects; 
 _enlivenedObjects = enlivenedObjects; 
}）; 
 return new fabric.CustomGroup（_enlivenedObjects，object）; 
}; 
  

如果您的自定义对象被异步加载，您必须这样做：

  fabric.CustomGroup.fromObject = function（object，callback）{
 fabric.util.enlivenObjects（object.objects，function（enlivenedObjects）{
 delete object.objects; 
 callback&& callback（new fabric.CustomGroup（enlivenedObjects，object））; 
}）; 
}; 
 
 fabric.CustomGroup.async = true; 
  

我做了一个小jsfiddle测试用例： http://jsfiddle.net/Kienz/qPLY6/

Have the following issue:

Trying to subclass fabric.Group:

var CustomGroup = fabric.util.createClass(fabric.Group, {
    type : 'customGroup',

    initialize : function(objects, options) {
        options || ( options = { });

        this.callSuper('initialize', objects, options);
        this.set('customAttribute', options.customAttribute || 'undefinedCustomAttribute');
    },

    toObject : function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {
            customAttribute : this.get('customAttribute')
        });
    },

    _render : function(ctx) {
        this.callSuper('_render', ctx);
    }
});

Testcase:

I create a red rectangle and added it to the custom group:

function drawTestRect() {
    // create a rectangle object
    var rect = new fabric.Rect({
        left : 100,
        top : 100,
        fill : 'red',
        width : 20,
        height : 20
    });

    var cgroup = new CustomGroup([rect], {
        top : 50,
        left : 50,
        customAttribute : 'Hello World'
    });

    canvas.add(cgroup);

};

Problem: I want to get JSON of the canvas and afterwards I want to load canvas from JSON.

drawTestRect()

var savedCanvas = canvas.toJSON();

canvas.clear();

canvas.loadFromJSON(savedCanvas);

Everything is working fine (Rect/Group is drawn; JSON is valid), but when I load from JSON, I get the following error in the console:

TypeError: Cannot read property 'async' of undefined

What I've tried yet:

• I added "CustomGroup.async = false;". But didn't help

解决方案

The error "Cannot read property 'async' of undefined" is raised because no "klass" can be found - https://github.com/kangax/fabric.js/blob/master/src/util/misc.js#L214-215.

You have to assign your custom object to fabric object - otherwise canvas.loadFromJSON() doesn't work.

var fabric.CustomGroup = fabric.util.createClass(fabric.Group, {
    type : 'customGroup',

    initialize : function(objects, options) {
        options || ( options = { });

        this.callSuper('initialize', objects, options);
        this.set('customAttribute', options.customAttribute || 'undefinedCustomAttribute');
    },

    toObject : function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {
            customAttribute : this.get('customAttribute')
        });
    },

    _render : function(ctx) {
        this.callSuper('_render', ctx);
    }
});

Additionally you have to declare the fromObject method - it's needed for loadFromJSON. In this case your object is load synchronous.

fabric.CustomGroup.fromObject = function (object, callback) {
    var _enlivenedObjects;
    fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
        delete object.objects;
        _enlivenedObjects = enlivenedObjects;
    });
    return new fabric.CustomGroup(_enlivenedObjects, object);
};

If your custom object is loaded async you have to do this:

fabric.CustomGroup.fromObject = function (object, callback) {
    fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
        delete object.objects;
        callback && callback(new fabric.CustomGroup(enlivenedObjects, object));
    });
};

fabric.CustomGroup.async = true;

I've made a small jsfiddle testcase: http://jsfiddle.net/Kienz/qPLY6/

这篇关于Fabric.js子类化fabric.Group - 错误：“无法读取未定义的属性'async'当从JSON加载时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！