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

FabricJSを使用してテキストボックスに影を追加するにはどうすればよいですか?

王林

リリース： 2023-09-12 18:33:02

転載

1688 人が閲覧しました

如何使用 FabricJS 向文本框添加阴影？

このチュートリアルでは、FabricJS を使用してテキストボックスに影を追加する方法を学びます。テキストボックスに書かれたテキストをカスタマイズしたり、拡大したり、移動したりできます。テキストボックスを作成するには、 Fabric.Textbox クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。テキストボックスオブジェクトは、寸法の変更、背景色の追加、影の追加など、さまざまな方法でカスタマイズできます。 shadow プロパティを使用して、テキストボックスに影を追加できます。

構文

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

ログイン後にコピー

パラメータ

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

オプションキー

shadow - このプロパティは、キャストを可能にする fabric.Shadow オブジェクトを受け入れます。 Textbox オブジェクトに影を追加します。たとえば、Textbox オブジェクトにシャドウを追加するには、新しい Fabric.Shadow インスタンスを作成し、そのインスタンスを Shadow プロパティに割り当てる必要があります。

例 1

シャドウオブジェクトを shadow プロパティに渡す

例を見てみましょう。 TextBox オブジェクトに Shadow を追加するために、Shadow プロパティに値を割り当てる方法を示すコード例です。まず、fabric.Shadow の新しいインスタンスを作成し、そのインスタンスをシャドウプロパティに割り当てる必要があります。

<!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>Passing the shadow object to the shadow property</h2>
   <p>You can see that a blue shadow has been added to the textbox</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a shadow instance
      var shadow = new fabric.Shadow({
         color: "blue",
         blur: 20,
      });

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Try Again. Fail again. Fail better.", {
         backgroundColor: "#fffff0",
         width: 400,
         left: 110,
         top: 70,
         fill: "violet",
         strokeWidth: 2,
         stroke: "blue",
         textAlign: "center",
         shadow: shadow,
      });

      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

ログイン後にコピー