2013-10-18 14 views
7

私はベースファブリックを拡張する方法を探しています。カスタム属性を持つオブジェクトクラスJSONに保存し、JSONから読み込んでさまざまなサブクラスに伝播させることができます。Fabric.jsオブジェクトクラスを変更して、すべてのサブクラスが新しいカスタム属性を持つようにするにはどうすればよいですか?

具体的には、JSONからオブジェクトをロードするときにオブジェクトに適切な視差を追加できるように、奥行き属性を格納します。

ソリューションにfabric.Object.prototypeの変更が含まれていると思います。しかし、私はまだプロトタイプで作業する方法を学んでいます。ここで

は私がしようとしているもののいくつかの例です: http://www.sitepoint.com/fabric-js-advanced/

// create a rectangle object 
var rect = new fabric.Rect({ 
    left: 100, 
    top: 100, 
    fill: 'red', 
    width: 20, 
    height: 20 
}); 

rect.toObject = (function (toObject) { 
    return function() { 
     return fabric.util.object.extend(toObject.call(this), { 
      depth: 10 
     }); 
    }; 
})(rect.toObject); 

これはtoJSON()方法で特定のオブジェクトの矩形に "必要な属性を与えるだけでなく、それを利用可能にすることで素晴らしい仕事をしていません。しかし、それはすべてのオブジェクトのためにそれを利用できないし、私がloadFromJSON()を使用するとき、新しい属性を含んでいません。

助けていただけたら幸いです!近いソリューションに私を得た

その他のリソース:

Fabric.js - how to save canvas on server with custom attributes
  - カスタム属性を持つサブクラスを作成しますが、何もそれを継承しません。

https://github.com/kangax/fabric.js/wiki/Adding-additional-object-properties-to-serialized-JSON
 は - 完全にカスタム属性を含めるために必要なメソッドを書き換え最も簡単な方法は、ちょうどあなたがするとき含またいどのプロパティを指定することです

答えて

7

(私はfabricjsのコアを変更したくありません) toJSON呼び出し:

canvas.toJSON([ 'selectable', 'lockMovementX' ]); 

をしかし、あなたは本当に、本当に出力にそれらを追加したい場合は、次のことができ猿パッチfabric.Object.prototype.toObjectそれは長方形で行うのと同じ方法:

fabric.Object.prototype.toObject = (function (toObject) { 
    return function() { 
     return fabric.util.object.extend(toObject.call(this), { 
      foobar: 123 
     }); 
    }; 
})(fabric.Object.prototype.toObject); 
+0

これは完全に機能しました。ありがとう!私はあなたの猿パッチを使用して終了しました。新しい属性を操作して保存することができるからです。 – payne8

+1

この例では、どのように 'foobar'に引数を渡すことができますか? –

+0

fabric.Object.prototype.toObject =(関数(toObject){ 復帰機能(){ 戻りfabric.util.object.extend(toObject.call(本)、{ アニメーション:this.anim }); }; })(fabric.Object.prototype.toObject); –

関連する問題