FabricJS を使用して背景画像付きのキャンバスを作成するにはどうすればよいですか?-jsチュートリアル-php.cn

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

王林

リリース： 2023-09-23 11:29:04

転載

1089 人が閲覧しました

如何使用 FabricJS 创建带有背景图像的画布？

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

最初の方法は、Canvas クラス自体を使用し、backgroundImage を渡すことです。
2 番目の方法は、setBackgroundColor メソッドを使用することです。例を通してそれらを理解しましょう。

方法 1: Canvas クラスの使用

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

構文

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

ログイン後にコピー

パラメータ

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

例 1

FabricJS を使用して背景画像を含む Canvas を作成する方法を示す次の例を確認してください。 FabricJS は Canvas API 上で動作するため、

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2> Creating a Canvas with a Background Image in Fabric.js </h2>
   <canvas id="canvas"> </canvas>
   <script>
      //Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         backgroundImage: "https://www.tutorialspoint.com/tools/images/logo.png",
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

ログイン後にコピー

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

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

構文

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

ログイン後にコピー

パラメータ

image - このパラメータは、fabric.Image または参照された文字列を受け入れます。背景に設定したい画像の URL。

callback - このパラメータは、画像がロードされ背景として設定されるときに呼び出されるコールバック関数を受け取ります。

オプション (オプション): - このパラメータは、背景画像オプションを指定できるオブジェクトです。不透明度を変更したり、画像を拡大・縮小したりすることができます。

例 2

まず、画像の URL を変数に割り当て、それを最初のパラメーターとして使用します。 2 番目のパラメータでは、以下のコードに示すように背景画像を設定した後、renderAll() メソッドを使用してキャンバスをバインドします。
以上がFabricJS を使用して背景画像付きのキャンバスを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。