FabricJS を使用して画像と色のパターンをポリゴンに追加する

fabric.Polygon のインスタンスを作成することで、ポリゴン オブジェクトを作成できます。多角形オブジェクトは、接続された直線セグメントのセットで構成される任意の閉じた形状で記述することができます。これは FabricJS の基本要素の 1 つであるため、角度や不透明度などのプロパティを適用することで簡単にカスタマイズすることもできます。ポリゴンにパターンと色を追加するには、FabricJS の Pattern クラスを使用します。

文法

new fabric.Pattern( options: Object, callback: function )

パラメータ

• options (オプション) - このパラメータは、オブジェクトに追加のカスタマイズを提供する Object です。パラメータ offsetX、cross-origin、およびその他の多くのプロパティは、パターンに関連して変更できます。

• callback - このパラメータは、コールバックが初期化された後に呼び出される function です。このパラメータはオプションです。

例 1: Fabric.Pattern() のインスタンスを作成し、それをポリゴン オブジェクトに追加します。

fabric.Pattern

のインスタンスを作成してキャンバスに追加する方法をコード例で見てみましょう。ここでは形状が長方形（不定形多角形）のポリゴンオブジェクトを作成します。四角形にパターンを追加する

createPattern 関数を初期化します。最後に、createPattern 関数を呼び出し、目的の URL を渡します。 リーリー 例 2: 画像と色のパターンをポリゴンに追加する

コード例を見て、ポリゴン オブジェクトの画像と色を使用して動的なパターンを作成する方法を見てみましょう。この場合、

fromURL

メソッドを使用して画像をロードし、

fabric.StaticCanvas() オブジェクトを初期化しました。これは、FabricJS の主要なレンダリング サーフェイスの 1 つであり、動的なパターンが重要です。 setBackgroundColor

メソッドを使用して、ポリゴンの背景色を設定しました。最後に、ポリゴン オブジェクトをキャンバスに追加します。

リーリー ＃＃＃結論は＃＃＃ このチュートリアルでは、2 つの簡単な例を使用して、FabricJS を使用して画像と色のパターンをポリゴンに追加する方法を示します。

以上がFabricJS を使用して画像と色のパターンをポリゴンに追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。