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

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

王林

リリース： 2023-08-26 20:41:09

転載

796 人が閲覧しました

如何使用 FabricJS 垂直翻转文本框？

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

Syntax

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

ログイン後にコピー

Parameters

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

オプションキー

flipY - このプロパティは、オブジェクトを垂直方向に反転できるようにする boolean 値を受け入れます。 < /p>

例 1

FlipY を値「false」のキーとして渡す

コード例を見てみましょうFabricJS のテキストボックスオブジェクトのデフォルトの方向を示します。 flipY プロパティに「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 flipY as key with a "false" value</h2>
   <p>You can see that the text has not flipped vertically</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("Fall seven times, stand up eight.", {
         backgroundColor: "#e3dac9",
         width: 400,
         left: 70,
         top: 70,
         flipY: false,
      });

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

ログイン後にコピー