FabricJS を使用して背景画像付きのキャンバスを作成するにはどうすればよいですか?

この記事では、 FabricJS を使用して背景画像を含むキャンバスを作成します。 FabricJS にはキャンバスの背景画像を変更するメソッドが 2 つあります。

• 最初の方法は、Canvas クラス自体を使用し、backgroundImageを渡すことです。

• 2 番目の方法は、setBackgroundColorメソッドを使用することです。例を通してそれらを理解しましょう。

方法 1: Canvas クラスの使用

最初の方法では、クラスの 2 番目のパラメーターに渡して Canvas クラス自体を使用します背景画像。

構文

new fabric.Canvas(element: HTMLElement|String, {backgroundImage: fabric.Image}: Object)

パラメータ

• 要素- このパラメータは です 要素自体は、 document.getElementById()または を使用して要素自体の ID から派生できます。 FabricJS キャンバスはこの要素で初期化されます。

• オプション (オプション)- このパラメータは、キャンバスの追加のカスタマイズを提供するオブジェクトです。backgroundImageは、そのうちの 1 つは、背景画像をカスタマイズするのに役立ちます。backgroundImage指定されたキャンバスの背景画像の値として、fabric.Image を使用します。

例 1

FabricJS を使用して背景画像を含む Canvas を作成する方法を示す次の例を確認してください。 FabricJS は Canvas API 上で動作するため、 タグを使用して HTML 要素を作成し、それに ID を与えます。さらに、その ID を FabricJS API に渡して、 タグで FabricJS Canvas インスタンスを初期化できるようにします。また、2 番目のパラメーターで、backgroundImage キーを持つオブジェクトとその値を画像の URL として渡します。 。 < /p>

     
  
 Creating a Canvas with a Background Image in Fabric.js 
     

方法 2: setBackgroundImage メソッドを使用する

キャンバスの作成後に、Canvas クラスで提供されるsetBackgroundImageメソッドを使用することもできます。これを達成する方法を詳しく見てみましょう。

構文

canvas.setBackgroundImage(image: fabric.Image | String, callback: function, options: Object)

パラメータ