FabricJS を使用して背景色のテキストボックスを作成するにはどうすればよいですか?-jsチュートリアル-php.cn

Syntax

Parameters

オプションキー

例 2

ホームページ

ウェブフロントエンド

jsチュートリアル

FabricJS を使用して背景色のテキストボックスを作成するにはどうすればよいですか?

Sep 06, 2023 am 11:57 AM

如何使用 FabricJS 创建带有背景颜色的文本框？

このチュートリアルでは、FabricJs を使用して背景色のテキストボックスを作成します。テキストボックスに書かれたテキストをカスタマイズしたり、拡大したり、移動したりできます。 fontSize、fontFamily、fontStyle、fontWeight などのプロパティを使用してテキスト自体をカスタマイズすることもできます。テキストボックスを作成するには、fabric.Textbox クラスのインスタンスを作成し、キャンバスに追加する必要があります。 backgroundColor プロパティを使用すると、オブジェクトの背景に色を割り当て、テキストボックスの形状を長方形にすることができます。

Syntax

new fabric.Textbox(text: String, { backgroundColor: String }: Object)

ログイン後にコピー

Parameters

text - このパラメータは String を受け入れます。 we 使用するテキスト文字列。テキストボックスに表示したい。
オプション (オプション) - このパラメータは、テキストボックスの追加のカスタマイズを提供する オブジェクト です。このパラメータを使用すると、色、カーソル、ストローク幅などのプロパティや、backgroundColor がプロパティであるテキストボックスに関連するその他の多くのプロパティを変更できます。

オプションキー

backgroundColor - このプロパティは、背景を決定する String 値を受け入れます。色。

例 1

backgroundColor プロパティを 16 進値のキーとして渡す

背景を割り当てるコード例を 1 つ見てみましょう16 進数のカラー値を使用して、テキストボックスオブジェクトに color を設定します。この例では、非常に明るい赤の色合いである 16 進数のカラーコード「#ffe4e1」を使用しました。

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;!-- Adding the Fabric JS Library--&gt;
   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt;Passing backgroundColor property as key with a hexadecimal value&lt;/h2&gt;
   &lt;p&gt;You can see that the background colour is a very light shade of red.&lt;/p&gt;
   &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
   &lt;script&gt;
      // Initiate a canvas instance
      var canvas = new fabric.Canvas(&quot;canvas&quot;);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a textbox object
      var textbox = new fabric.Textbox(&quot;Details matter, it&#39;s worth waiting to get it right.&quot;, {
         backgroundColor: &quot;#ffe4e1&quot;,
         width: 400,
         top: 70,
         left: 110,
      });

      // Add it to the canvas
      canvas.add(textbox);
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー