Fabric.js：Advanced

この記事は、Advanced Fabric.js機能を掘り下げています。

重要な概念：

ファブリックグループ：
• 複数のオブジェクトを単一のユニットとして効率的に管理し、操作を簡素化（移動、スケーリング、回転）。 Canvas Serialization（JSON）： jsonを使用してキャンバス状態を保存してロードします。これは、画像形式よりも帯域幅に優しい方法です。
• カスタムクラス作成：extend Fabric.jsテーラードオブジェクトの動作とプロパティ、効率的にシリアル化され、脱代化されています。
• svg相互運用性：キャンバス要素をsvgにエクスポートし、柔軟性のためにsvgコンテンツをキャンバスにインポートします。>
• 脱介入方法：シームレスなキャンバス状態の復元におよび
を利用してください。
• Advanced Object Control：サブクラスを介して基本的な形状を超えて、複雑なインタラクティブな要素と高度にカスタマイズされたオブジェクトを作成します。 loadFromJSON loadFromSVG
グループ：
• Fabric.jsのグループは、オブジェクトを単一のエンティティに結合することを可能にします。 （図1を参照）。 任意の数のキャンバスオブジェクトをグループ化することができ、統一された操作を可能にします。 グループ特性（色、透明性、境界線）のスケーリング、回転、および変更がすべて可能です。 ファブリックは、複数のオブジェクトを選択するときにグループを暗黙的に作成します

図1

プログラマティックグループの作成：

（結果については図2を参照）。 グループ内の個々のオブジェクトには、

メソッドを使用してアクセスおよび変更されます。 図2

グループオブジェクトの変更：

<code class="language-javascript">var text = new fabric.Text('hello world', { fontSize: 30 });
var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5 });
var group = new fabric.Group([text, circle], { left: 150, top: 100, angle: -10 });
canvas.add(group);</code>

item（図3を参照）。グループ内のオブジェクトは、

/

座標が指定されていない限り、グループの中心に対して配置されます。 図3

水平に整列したグループの作成：

<code class="language-javascript">group.item(0).set({ text: 'trololo', fill: 'white' });
group.item(1).setFill('red');</code>

left（図4を参照）。 画像を含むグループの場合、グループ化する前に画像が完全にロードされていることを確認してください。 top

図4 グループの方法には、

、

、

、

<code class="language-javascript">var circle1 = new fabric.Circle({ radius: 50, fill: 'red', left: 0 });
var circle2 = new fabric.Circle({ radius: 50, fill: 'green', left: 100 });
var circle3 = new fabric.Circle({ radius: 50, fill: 'blue', left: 200 });
var group = new fabric.Group([circle1, circle2, circle3], { left: 200, top: 100 });
canvas.add(group);</code>

、

、

、および

が含まれます。 グループの寸法を更新しながらオブジェクトを追加します。 既存のキャンバスオブジェクトのクローニングは、新しいグループに追加する前に必要です。 シリアル化：

fabric.jsは、シリアル化にtoObjectおよびtoJSONを使用します。 toJSON暗黙のうちにtoObject。

を呼び出します

例：空のキャンバスのシリアル化：

<code class="language-javascript">var text = new fabric.Text('hello world', { fontSize: 30 });
var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5 });
var group = new fabric.Group([text, circle], { left: 150, top: 100, angle: -10 });
canvas.add(group);</code>

オブジェクトの追加は、JSON表現を更新します。 toObject非弦オブジェクト表現を返します。 オブジェクトのシリアル化をカスタマイズすることは、toObjectメソッドをオーバーライドまたは拡張することによって実現されます。

例：：toObject拡張

<code class="language-javascript">group.item(0).set({ text: 'trololo', fill: 'white' });
group.item(1).setFill('red');</code>

SVGシリアル化は、個々のオブジェクトのメソッドに委任され、

メソッドを使用します。 これにより、SVG互換レンダラーにエクスポートできます toSVGtoSVG脱介入：

JSONのキャンバス状態をロードしますおよび

。 SVGデータからのロード。

外部SVGファイルを参照することにより、大きなパスデータを効率的に処理します。 loadFromJSONloadFromDatalessJSONサブクラス：loadSVGFromURL loadSVGFromString loadFromDatalessJSONfabric.jsは、サブクラス化に

を使用します。

プロパティはコンストラクターとして機能します。 親クラスのメソッドを呼び出します。

例：カスタムクラスの作成：

fabric.util.createClass initialize（callSuperの例については、図8および9を参照）。 カスタムプロパティは、

および

。

で処理する必要があります

<code class="language-javascript">var circle1 = new fabric.Circle({ radius: 50, fill: 'red', left: 0 });
var circle2 = new fabric.Circle({ radius: 50, fill: 'green', left: 100 });
var circle3 = new fabric.Circle({ radius: 50, fill: 'blue', left: 200 });
var group = new fabric.Group([circle1, circle2, circle3], { left: 200, top: 100 });
canvas.add(group);</code>

よくある質問（FAQS）：LabeledRect（提供されたFAQはすでに十分に構成されており、包括的であるため、ここでは変更は必要ありません。）toObject initialize画像は要求に応じて含まれており、テキスト内の元の形式と位置を維持しています。

以上がFabric.js：Advancedの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。