Fabric.js子类化fabric.Group - 错误：“无法读取未定义的属性'async'当从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加载时，在控制台中出现以下错误：

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:

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加载时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！