Fabric.js來自現有Shape的新類fromObject錯誤

Question

在我不斷的嘗試中，試圖在Fabric.js中創建一個可以保存和加載的自定義類。 我正在嘗試擴展Line和Circle類並添加一些自定義屬性...但是在嘗試加載數據時遇到了問題。 可以保存，我的簡單的“名稱”屬性在那里，但是在嘗試加載時，我陷入了“ enlivenObjects”功能，即klass從fabric.util.getKlass函數獲取該對象類型的位置。 我的對象沒有得到任何回報（“未定義”）。 在隨附的示例中，如果單擊“保存”，則畫布的數據將放入DIV中，然后可以“清除”畫布並嘗試“加載”數據。 嘗試加載時發生錯誤。 因此，在JS控制台窗口中，我可以運行“ fabric.util.getKlass（'Line'）”，並且可以正常工作，我可以得到一個對象，但是當我對“ namedCircle”或“ namedLine”執行相同操作時，未定義...有什么想法嗎？ 這種方法對我不起作用嗎？

 var canvas; window.onload = function() { canvas = new fabric.Canvas('c'); /** * Attempt to make a custom Line, inherited from the fabric.Line * currently has a custom attribute of 'name' * */ fabric.namedLine = fabric.util.createClass(fabric.Line, { type: 'namedLine', initialize: function(points, options) { options || (options = { }); this.callSuper('initialize', points, options); this.set('name', options.name || ''); }, toObject: function() { return fabric.util.object.extend(this.callSuper('toObject'), { name: this.get('name') }); }, fromObject: function(object, callback) { return fabric.Object._fromObject('namedLine', options, callback); }, _render: function(ctx) { this.callSuper('_render', ctx); } }); /** * Attempt at custom Circle, inherited from fabric.Circle with * a 'name' attribute. * */ fabric.namedCircle = fabric.util.createClass(fabric.Circle, { type: 'namedCircle', initialize: function(options) { options || (options = { }); this.callSuper('initialize', options); this.set('name', options.name || ''); }, toObject: function() { return fabric.util.object.extend(this.callSuper('toObject'), { name: this.get('name') }); }, fromObject: function(object, callback) { return fabric.Object._fromObject('namedCircle', object, callback); }, _render: function(ctx) { this.callSuper('_render', ctx); } }); fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; // First Create our line. var line = makeLine([ 250, 125, 250, 175 ], "myLine"); canvas.add(line); // Now we create our circles, linking to our line. canvas.add( // first circle is at top of line, line1 is null, line2 is the line. makeCircle(line.get('x1'), line.get('y1'), "head", null, line), // second circle is at the bottom, line 1 is the line, nothing for line 2. makeCircle(line.get('x2'), line.get('y2'), "tail", line), ); canvas.on('object:moving', function(e) { var p = e.target; // set bottom of the line to the shapes left and top position. p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top }); // set the top to the line to the circle position. p.line2 && p.line2.set({ 'x1': p.left, 'y1': p.top }); canvas.renderAll(); }); // Add our button events. document.getElementById("btnSave").addEventListener("click", saveData); document.getElementById("btnLoad").addEventListener("click", loadData); document.getElementById("btnClear").addEventListener("click", clearData); }; // our circle has up to 2 links. function makeCircle(left, top, name, line1, line2) { var c = new fabric.namedCircle({ left: left, top: top, strokeWidth: 5, radius: 12, fill: '#fff', stroke: '#666', name: name }); c.hasControls = c.hasBorders = false; c.line1 = line1; c.line2 = line2; return c; } function makeLine(coords, name) { return new fabric.namedLine(coords, { fill: 'red', stroke: 'red', strokeWidth: 5, selectable: false, name: name }); } function saveData() { document.getElementById("out").innerHTML = ""; document.getElementById("out").innerHTML = JSON.stringify(canvas.toDatalessJSON()); }; function loadData() { var data = document.getElementById("out").innerHTML; console.log(data); canvas.loadFromDatalessJSON(data); canvas.renderAll(); }; function clearData() { canvas.clear(); } 

 #out { width:500px; height:300px; border:1px solid red; overflow:scroll; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script> <canvas style="border: 2px solid; " height="500" width="600" id="c"></canvas> <p> <button id="btnSave">Save</button> <button id="btnClear">Clear</button> <button id="btnLoad">Load</button> </p> <div id="out"></div> 

Answer 1

好吧，有時候您只需要遠離事物並思考它。 我仔細研究了getKlass函數，該函數將類名的第一個字符大寫...因此，解決方法是將類從“ namedLine”和“ namedCircle”更改為“ NamedLine”和“ NamedCircle”。 我要做的另一件事是將return函數移到類之外。

  var canvas; /** * Attempt to make a custom Line, inherited from the fabric.Line * currently has a custom attribute of 'name' * */ fabric.NamedLine = fabric.util.createClass(fabric.Line, { type: 'NamedLine', initialize: function(points, options) { options || (options = { }); this.callSuper('initialize', points, options); this.set('name', options.name || ''); }, toObject: function() { return fabric.util.object.extend(this.callSuper('toObject'), { name: this.get('name') }); }, _render: function(ctx) { this.callSuper('_render', ctx); } }); fabric.NamedLine.fromObject = function(object, callback) { callback && callback(new fabric.NamedLine([object.x1, object.y1, object.x2, object.y2], object)); }; /** * Attempt at custom Circle, inherited from fabric.Circle with * a 'name' attribute. * */ fabric.NamedCircle = fabric.util.createClass(fabric.Circle, { type: 'NamedCircle', initialize: function(options) { options || (options = { }); this.callSuper('initialize', options); this.set('name', options.name || ''); }, toObject: function() { return fabric.util.object.extend(this.callSuper('toObject'), { name: this.get('name') }); }, _render: function(ctx) { this.callSuper('_render', ctx); } }); fabric.NamedCircle.fromObject = function(object, callback) { return fabric.Object._fromObject('NamedCircle', object, callback); }; fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; window.onload = function() { canvas = new fabric.Canvas('c'); // First Create our line. var line = makeLine([ 250, 125, 250, 175 ], "myLine"); canvas.add(line); // Now we create our circles, linking to our line. canvas.add( // first circle is at top of line, line1 is null, line2 is the line. makeCircle(line.get('x1'), line.get('y1'), "head", null, line), // second circle is at the bottom, line 1 is the line, nothing for line 2. makeCircle(line.get('x2'), line.get('y2'), "tail", line), ); canvas.on('object:moving', function(e) { var p = e.target; // set bottom of the line to the shapes left and top position. p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top }); // set the top to the line to the circle position. p.line2 && p.line2.set({ 'x1': p.left, 'y1': p.top }); canvas.renderAll(); }); // Add our button events. document.getElementById("btnSave").addEventListener("click", saveData); document.getElementById("btnLoad").addEventListener("click", loadData); document.getElementById("btnClear").addEventListener("click", clearData); }; // our circle has up to 2 links. function makeCircle(left, top, name, line1, line2) { var c = new fabric.NamedCircle({ left: left, top: top, strokeWidth: 5, radius: 12, fill: '#fff', stroke: '#666', name: name }); c.hasControls = c.hasBorders = false; c.line1 = line1; c.line2 = line2; return c; } function makeLine(coords, name) { return new fabric.NamedLine(coords, { fill: 'red', stroke: 'red', strokeWidth: 5, selectable: false, name: name }); } function saveData() { document.getElementById("out").innerHTML = ""; document.getElementById("out").innerHTML = JSON.stringify(canvas.toDatalessJSON()); }; function loadData() { var data = document.getElementById("out").innerHTML; console.log(data); canvas.loadFromDatalessJSON(data); canvas.renderAll(); }; function clearData() { canvas.clear(); } 

 #out { width:500px; height:300px; border:1px solid red; overflow:scroll; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script> <canvas style="border: 2px solid; " height="500" width="600" id="c"></canvas> <p> <button id="btnSave">Save</button> <button id="btnClear">Clear</button> <button id="btnLoad">Load</button> </p> <div id="out"></div>