Javascript Fabric.js从现有形状创建新类fromObject错误

在我接下来的故事中，我试图在Fabric.js中创建一个可以保存和加载的自定义类。我正在尝试扩展Line和Circle类并添加一些自定义属性。。。但我在尝试加载数据时遇到了一个问题。它保存好了，我的简单“name”属性就在那里，但是当尝试加载时，我陷入了“enlivenObjects”函数中，即klass从fabric.util.getKlass函数中获取该对象类型。我的对象没有得到任何回报（“未定义”）。 在所附的示例中，如果单击“保存”，画布的数据将被放入DIV中，则可以“清除”画布并尝试“加载”数据。尝试加载时出错。 因此，在JS控制台窗口中，我可以运行“fabric.util.getKlass（'Line'），这样做有效，我得到了一个对象，但是当我对我的'namedCircle'或'namedLine'执行相同操作时，我得到了未定义的。。。 有什么想法吗？这种方法对我不起作用吗

var画布；
window.onload=函数（）{
canvas=newfabric.canvas（'c'）；
/**
*尝试创建从fabric.Line继承的自定义行
*当前具有自定义属性“name”
* 
*/
fabric.namedLine=fabric.util.createClass（fabric.Line{
键入：“namedLine”，
初始化：功能（点、选项）{
选项| |（选项={}）；
this.callSuper（'initialize'，points，options）；
this.set（'name'，options.name | |'）；
},
toObject:function（）{
返回fabric.util.object.extend（this.callSuper（'toObject'）{
name:this.get（'name'）
});
},
fromObject:函数（对象，回调）{
返回fabric.Object.\u fromObject（'namedLine'，options，callback）；
},
_渲染：函数（ctx）{
这个.callSuper（“'u render'，ctx”）；
}
});
/**
*尝试自定义循环，从结构继承。使用
*“名称”属性。
* 
*/
fabric.namedCircle=fabric.util.createClass（fabric.Circle{
键入：“namedCircle”，
初始化：函数（选项）{
选项| |（选项={}）；
this.callSuper（'initialize'，options）；
this.set（'name'，options.name | |'）；
},
toObject:function（）{
返回fabric.util.object.extend（this.callSuper（'toObject'）{
name:this.get（'name'）
});
},
fromObject:函数（对象，回调）{
返回fabric.Object.\u fromObject（'namedCircle'，Object，callback）；
},
_渲染：函数（ctx）{
这个.callSuper（“'u render'，ctx”）；
}
});
fabric.Object.prototype.originX=fabric.Object.prototype.originY='center'；
//首先创建我们的产品线。
var-line=makeLine（[250125250175]，“myLine”）；
canvas.add（行）；
//现在我们创建我们的圆，链接到我们的线。
canvas.add(
//第一个圆在直线的顶部，第1行为空，第2行为直线。
makeCircle（line.get（'x1'）、line.get（'y1'）、“head”、null、line），
//第二个圆圈在底部，第1行是线，第2行没有。
makeCircle（line.get（'x2'）、line.get（'y2'）、“tail”、line），
);
canvas.on（'object:moving'，function（e）{
var p=e.target；
//将线条的底部设置为形状的左侧和顶部位置。
p、 line1&&p.line1.set（{'x2'：p.left，'y2'：p.top}）；
//将线的顶部设置为圆形位置。
p、 line2&&p.line2.set（{'x1'：p.left，'y1'：p.top}）；
canvas.renderAll（）；
});
//添加我们的按钮事件。
document.getElementById（“btnSave”）.addEventListener（“单击”，保存数据）；
document.getElementById（“btnLoad”）.addEventListener（“单击”，加载数据）；
document.getElementById（“btnClear”）.addEventListener（“单击”，清除数据）；
};
//我们的圈子最多有两个链接。
函数makeCircle（左、上、名称、第1行、第2行）{
var c=new fabric.namedCircle({
左:左,，
顶:顶,，
冲程宽度：5，
半径：12，
填写：“#fff”，
笔划：'#666'，
姓名：姓名
});
c、 hasControls=c.hasBorders=false；
c、 line1=line1；
c、 line2=line2；
返回c；
}
函数生成线（坐标、名称）{
返回新的fabric.namedLine（coords{
填充：“红色”，
笔划：“红色”，
冲程宽度：5，
可选：false，
姓名：姓名
});
}
函数saveData（）{
document.getElementById（“out”）.innerHTML=“”；
document.getElementById（“out”）.innerHTML=JSON.stringify（canvas.toDatalessJSON（））；
};
函数loadData（）{
var data=document.getElementById（“out”）.innerHTML；
控制台日志（数据）；
canvas.loadFromDatalessJSON（数据）；
canvas.renderAll（）；
};
函数clearData（）{
canvas.clear（）；
}

#输出{
宽度：500px；
高度：300px；
边框：1px纯红；
溢出：滚动；
}

拯救
清楚的
负载

嗯，有时候你只需要离开一些事情，好好想想。 我仔细查看了getKlass函数，它将类名的第一个字符大写。。。因此，修复方法是将类从“namedLine”和“namedCircle”更改为“namedLine”和“namedCircle”。 我必须做的另一件事是将返回函数移到类之外

var画布；
/**
*尝试创建从结构继承的自定义线