FabricJS を使用してクラスを含むキャンバスを作成するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS を使用してクラスを含むキャンバスを作成するにはどうすればよいですか?

WBOY

リリース： 2023-08-23 21:05:04

転載

1027 人が閲覧しました

この記事では、containerClass プロパティを使用してクラスを含むキャンバスを作成する方法を説明します。ネイティブ HTML キャンバス要素にアクセスするには、その要素にラッパークラスを追加します。このクラスを使用すると、要素を制御して、要件に応じて対話性やスタイルを追加できます。

構文

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

ログイン後にコピー

パラメータ

要素 - このパラメータは
オプション (オプション) - このパラメータは、キャンバスの追加のカスタマイズを提供するオブジェクトです。このパラメータを使用して、色、カーソル、境界線の幅、およびキャンバスに関連するその他の多くのプロパティを変更します。 containerClass はその 1 つで、キャンバスにラッパークラスを追加するのに役立ちます。

例 1

次のコンテンツ例は、containerClass プロパティを使用して Canvas を作成し、HTML DOM を検査して、クラスが追加されました。

<!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>How to create a canvas with a class using FabricJS?</h2>
   <p>Here we have used the containerClass property.</p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         // Name of the wrapper class to be used on the canvas
         containerClass: "className",
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

ログイン後にコピー

次に、開発ツール → 要素タブを開きます。ここでは、指定したクラス名がクラス名として使用されていることがわかります。

例 2

containerClass プロパティを使用して Canvas を作成し、そのクラスを使用して追加するコード例を見てみましょう。 CSSをキャンバススタイルに適用します。
えええええ
以上がFabricJS を使用してクラスを含むキャンバスを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。