FabricJS：Sub Classing fabric.Line and toObject error

Question

我已經用fabricjs成功地在子組中劃分了子組，但是在嘗試對Line對象進行子類化時，我遇到了各種與toObject()方法有關的問題。

目前我的代碼看起來是這樣的：

fabric.ConnectorLine = fabric.util.createClass(fabric.Line, { 
    initialize: function (points, options) { 
     options || (options = {}); 
     this.callSuper('initialize', points, options); 
     options && 
      this.set('type', 'connector') && 
      this.set('end1', options.end1) && 
      this.set('arrow', options.arrow) 
    }, 
    toObject: function() { 
     return fabric.util.object.extend(this.callSuper('toObject'), { 
      type: this.type, 
      end1: this.end1, 
      arrow: this.arrow 
     }); 
    } 
}); 

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

當我嘗試序列化這個對象，我收到以下錯誤信息：

RangeError: Maximum call stack size exceeded 
at klass.callSuper (fabric.js:1475:30) 
at klass.fabric.Line.fabric.util.createClass.toObject (fabric.js:13632:26) 

是否有你需要的做一些特別的東西toObject方法與行（Rect和Triangle似乎也有同樣的問題）？

剛剛完成了我的頭，所以任何幫助是最讚賞。

UPDATE 1：的jsfiddle加入

下面是一個基本實例的的jsfiddle。您可以在線路124看到的，125我增加了線條的引用結束，箭頭連接到：

arrow.line = line; 
end.line = line; 

正是這種引用，當您嘗試序列（檢查控制檯）拋出的錯誤：

http://jsfiddle.net/iamadamjowett/zL5k0zx3/29/

Answer 1

正如我已經在上面的評論中寫道，您的序列化失敗，因爲行分量，端部部件和箭頭組件具有循環引用對方，所以當你序列化線，序列化結束序列化行，序列化結束等等，直到你陷入堆棧溢出前ception。

我想建議你改變你的設計，而不是使用一個組，並添加你的線，結束和箭頭組;擴展組應該是最好的選擇，你可以把它想象成一個沒有嚴格引用3子組件的單個組件。

我嘗試過的醜陋和骯髒的解決方案，但沒有什麼我一直在尋找：

fabric.ConnectorEnd = fabric.util.createClass(fabric.Rect, { 

     initialize: function (options) { 
     options || (options = {}); 
     this.callSuper('initialize', options); 
     recursionCount = 0; 
     options && 
      this.set('type', 'connector-end') && 
      this.set('line', options.line) && 
      this.set('attachedTo', options.attachedTo) && 
      this.set('attachedPos', options.attachedPos) 
     }, 
     toObject: function() { 
     if (recursionCount > 100) return; // added a recursion limit 
     recursionCount++; 
     return fabric.util.object.extend(this.callSuper('toObject'), { 
      type: this.type, 
      line: this.line, 
      attachedTo: this.attachedTo, 
      attachedPos: this.attachedPos 
     }); 
     } 
    }); 

都不行......

fabric.ConnectorEnd = fabric.util.createClass(fabric.Rect, { 

      initialize: function (options) { 
       options || (options = {}); 
       this.callSuper('initialize', options); 

       options && 
        this.set('type', 'connector-end') && 
        this.set('line', options.line) && 
        this.set('attachedTo', options.attachedTo) && 
        this.set('attachedPos', options.attachedPos) && 
        this.set('recursions', 0) 
      }, 
      toObject: function() { 
       if (this.line.recursions > 0 && this.recursions > 1) { return; } 
       return fabric.util.object.extend(this.callSuper('toObject'), { 
        recursions: this.recursions++, 
        type: this.type, 
        line: this.line, 
        attachedTo: this.attachedTo, 
        attachedPos: this.attachedPos 
       }); 
      } 
     }); 

都不行......可怕的，沒用......我怎麼建議你使用這種類型的低劣代碼？我能做什麼？對，獨特的解決方案，我發現在JSON管理循環引用Cycle.js of Douglas Crockford，但使用它，你應該修改FabricJS的.toJSON()方法。

我的意見是使用一個屬性ID和FindById方法，或者使用一個字符串屬性，您將字符串化的參考，但嘗試，如果你能，以避免循環引用。