シリアル化のオブジェクト状態を記録する

Question

キャンバス（イメージ、シェイプ、選択ボックス）上のさまざまなオブジェクトの状態を記録して、XMLまたはJSONにシリアライズできるようにする方法を見つけようとしています。

var shapeState = { //Example of a shape being recorded 
          number:increment, 
          id:thisCanvas, 
          type:'shape', 
          kind:shapeKind, 
          cheight:canvasHeight, 
          cwidth:canvasWidth, 
          height:shapeHeight, 
          width:shapeWidth, 
          color:shapeColor, 
          x:xPos, 
          y:yPos 
         } 

         totalState.push(shapeState); //State of shape data has been stored in global array 

しかし、形状（またはその他のオブジェクト）が静的である場合にのみ機能します。私は、グローバル配列に各オブジェクトを配置しようとしました。たとえば、「移動」ボタンをクリックした後に要素を移動すると、xPosプロパティはどのように更新できますか？シェイプオブジェクトはすでに配列内に配置されており、名前では識別できません。グローバル配列に100以上の図形があるとすれば、更新する特定のものをどのように見つけることができますか？助けてください。ここ

はフィドルです：http://jsfiddle.net/RymyY/5/

Answer 1

ここに1つのアプローチです：Shapeがインスタンス化されるときに、このモデルでは

var AllShapeStates = {}; 

function Shape() { 
    var SerializedState = {}, 
     number, 
     thisCanvas, 
     etc; 
    AllShapeStates[UNIQUE_IDENTIFYING_ATTRIBUTE] = SerializedState; 
    //Shape Business 

    this.updateState = function(){ 
     SerializedState.number = number; 
     SerializedState.id = thisCanvas; 
     //etc 
    } 
} 

が、それはグローバルAllShapestates VARにそのSerializedStateへの参照を追加します。 Shapeが状態を更新するたびに、SerializedStateオブジェクトを更新するupdateStateを呼び出す必要があります。