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

FabricJSを使用してテキストボックスを水平方向に反転するにはどうすればよいですか?

WBOY

リリース： 2023-09-16 13:17:02

転載

1238 人が閲覧しました

如何使用 FabricJS 水平翻转文本框？

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

Syntax

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

ログイン後にコピー

Parameters

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

オプションキー

##flipX - このプロパティはブール値 # を受け入れます## 値を使用すると、オブジェクトを水平方向に反転できます。

コード例を見てみましょう。 FabricJS のテキストボックスオブジェクトのデフォルトの向きを使用します。

プロパティに False 値を渡したため、テキストは水平方向に反転しません。

<!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 flipX as key with a "false" value</h2>
   <p>You can see that the text has not flipped horizontally</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 textbox object
      var textbox = new fabric.Textbox("Each day provides its own gifts.", {
         backgroundColor: "#e3dac9",
         width: 400,
         left: 70,
         top: 70,
         flipX: false,
      });

      // Create gradient fill
      textbox.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
               colorStops: [
                  { offset: 0, color: "#545a2c" },
                  { offset: 1, color: "#6495ed" },
               ],
            })
         );
      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

ログイン後にコピー

例 2
FlipX 属性を値「true」のキーとして渡す
この例では、幅は 200px です。テキストボックスオブジェクトには、水平方向の線形グラデーションの塗りつぶしがあります。テキストボックスオブジェクトにflipXプロパティを適用すると、テキストが水平方向に反転するため、グラデーションとテキストの反転も確認できます。
えええええ
以上がFabricJSを使用してテキストボックスを水平方向に反転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。