2017-02-15 12 views
2

私はfabric.jsを使用してキャンバスとやりとりしています。いくつかのオブジェクトに一意のIDを割り当て、そのオブジェクトにIDでアクセスする必要があります。fabric.js内のいくつかのオブジェクトにオブジェクト識別子を割り当て、jsonとして保存します。

私はHow to select Fabric.js object programmaticallyから次のコードを持って、今fabric.js

var object = { 
    id: this.id, 
    } 

で追加され、私は動的に次のコードを使用して、いくつかのオブジェクトのIDを追加してい:

for (i=0;i<10;i++) 
{ 
    var rect = new fabric.Rect({ 
     left: 100, 
     top: 100, 
     fill: 'red', 
     id: 'RECT'+i 
     }); 
    alert(rect.id) //this is showing me the ids of each rectangle. 
} 

しかし状況私はjsonでこれらのidを保存する必要があるので、一度私はjsonを読み込むと、私はそのIDでプログラムを通じてオブジェクトにアクセスできます。 私は、次のコードを試してみました:私は、JSON内のIDを取得しておりません。これにより

var json = JSON.stringify(canvas.toDataLessJSON(['id'])); 

を。いくつかのオブジェクトのIDをJSONに保存できる方法を提案してください。

+0

参考用にJSFiddleを追加しました。それが役に立てば幸い! –

+0

@TimHarker。どうもありがとう。私は今、jsonでIDを取得できます。しかし、JavaScriptでこれらのidsにアクセスすることは可能ですか?私は努力していますが、そうすることはできません。 – uddipana

+0

確かに、私はステップ4、[http://jsfiddle.net/rekrah/dw3bakkp/](http://jsfiddle.net/rekrah/dw3bakkp/)でフィドルを更新しました。 「JavaScriptでこれらのIDにアクセスすることは可能ですか?」と言います。あなたは 'canvas.loadFromJSON'を使わずに参照しています。とにかく、JSFiddleのアップデートを見て、私に教えてください。 –

答えて

2

はここで働いてJSFiddleです:http://jsfiddle.net/rekrah/dw3bakkp/

はこのお試しください:var json = JSON.stringify(canvas.toJSON(['id']));

をそしてJSONからキャンバスをロードし、そのIDによってオブジェクトにアクセスするには:

var rectOne, rectTwo; 
canvas.loadFromJSON(json, function() {}, 
    function (o, object) { 
    switch (object.id) { 
     case 'RECT1': 
      rectOne = object; 
      break;    
     case 'RECT2': 
      rectTwo = object; 
      break; 
     default: 
      break; 
    } 
}); 

そして、ここでは、私は「ウェブサイトですコードを使用しています:

http://xpressclocks.azurewebsites.net/customize/abstract/liquid/white-paint-splash-on-black-background

関連する問題