Canvas fabricjs loadFromJSON与子类对象问题

我将渲染一个画布对象，该画布对象以前保存在数据库中

我的问题和这个很相似。 不幸的是，修正后的JSFIDLE不起作用

我正在使用一个定制的子类，

LabeledRect

，如fabricjs.com/fabric-intro-part-3/ 我在

LabelRect

中修改了

LabelRect

的名称，正如谷歌集团论坛中建议的那样

我尝试使用

enlivenObjects

方法，但没有解决我的问题

我在下面的代码片段中发布了我的代码：

fabric.Labeledrect=fabric.util.createClass（fabric.Rect{
类型：“labeledRect”，
初始化：函数（选项）{
选项| |（选项={}）；
this.callSuper（'initialize'，options）；
此.set（'id'，options.id | |'）；
此.set（'label'，options.label | |'）；
this.set（'htmlContent'，options.htmlContent | |'）；
},
toObject:function（）{
返回fabric.util.object.extend（this.callSuper（'toObject'）{
label:this.get（'label'），
htmlContent:this.get（'htmlContent'），
id:this.get（'id'））
});
},
_渲染：函数（ctx）{
这个.callSuper（“'u render'，ctx”）；
ctx.font='20px skf_chevin_medium'；
ctx.fillStyle='#333'；
ctx.fillText（this.label，-this.width/2，-this.height/2+20，this.width）；
ctx.font=“20px skf_chevin_中等”；
//创建渐变
var gradient=ctx.createLinearGradient（0,0，c.width，0）；
渐变。添加颜色停止（“0”，“洋红色”）；
渐变。添加颜色停止（“0.5”，“蓝色”）；
渐变。添加颜色停止（“1.0”，“红色”）；
//用梯度填充
ctx.fillStyle=渐变；
ctx.fillText（this.htmlContent，-this.width/2，-this.height/2+40，this.width）；
},
});
//fabric.Labeledrect.fromObject=函数（对象，回调）{
//var_活跃的对象；
//fabric.util.enlivenObjects（object.objects，function）（enlivedObjects）{
//删除object.objects；
//_enlivedObjects=enlivedObjects；
//    });
//返回新的织物。Labeledrect（_enlivedObjects，object）；
//};
fabric.Labeledrect.fromObject=函数（对象，回调）{
fabric.util.enlivenObjects（object.objects，function）（enlivedObjects）{
删除object.objects；
回调&回调（newfabric.Labeledrect（enliveedobjects，object））；
});
};
fabric.Labeledrect.async=true；
var canvas=new fabric.canvas（'c'{
背景颜色：“rgb（100100200）”，
选择颜色：“蓝色”，
选择线宽：2
});
帆布({
“对象：选定”：selectedObject
});
函数selectedObject（）{
var id=canvas.getActiveObject（）.get（'id'）；
警报（“id:+id”）；
}
功能添加区域（区域代码、区域ID）{
var labeledRectObj=新织物。Labeledrect({
宽度：100，
身高：50，
左:100,，
前100名，
标签：区域代码，
填写：“#ccc”，
htmlContent:“测试html”，
id:areaID
});
canvas.add（labeledRectObj）；
canvas.setActiveObject（labeledRectObj）；
}
$（“#添加区域1”）。单击（函数（）{
添加区域（“A01”，1）；
});
$（“#添加区域2”）。单击（函数（）{
添加区域（“A02”，2）；
});
$（“#重新加载”）。单击（函数（）{
var canvasJson=canvas.toJSON（）；
警报（JSON.stringify（canvasJson））；
loadFromJSON（canvasJson，canvas.renderAll.bind（canvas））；
//画布未被渲染
});

自定义类上的
类型
属性未按属性命名。请参见更新的
这是一个老问题，但我最近在调用loadFromJson时遇到了类似的反序列化自定义子类错误，例如，
“无法读取未定义的属性'fromObject'”
，我学到的知识可能会帮助其他人。通过检查1.7.19源代码，我发现我必须更改我的子类的两个方面：

我的子类需要在
fabric
命名空间中声明。之前，我将他们声明为另一个类的成员

我的子类必须有一个
fromObject
函数，并且必须与子类本身分开声明。之前我在传递给
createClass
的参数对象中声明了
fromObject

以下是工作声明的内容：

    fabric.MyText = fabric.util.createClass(fabric.Text, {
        type: 'MyText',

        // The following code results in "klass.fromObject is not a function"
        //fromObject: function(object, callback, forceAsync) {
        //    return fabric.Object._fromObject('MyText', object, callback, forceAsync, 'text');
        //},

        ... my specializations ...
    });

    fabric.MyText.fromObject = function (object, callback, forceAsync) {
        return fabric.Object._fromObject('MyText', object, callback, forceAsync, 'text');
    };

通过单击“重新加载对象”按钮，添加的区域仍不会重新渲染。