FabricJSを使用してテキストボックスの中央スケーリングを無効にする方法は?-jsチュートリアル-php.cn

FabricJSを使用してテキストボックスの中央スケーリングを無効にする方法は?

PHPz

リリース： 2023-08-23 18:01:02

転載

1287 人が閲覧しました

如何使用 FabricJS 禁用 Textbox 的居中缩放？

このチュートリアルでは、FabricJS を使用してテキストボックスの中央揃えのスケーリングを無効にする方法を学びます。テキストボックスに書かれたテキストをカスタマイズしたり、拡大したり、移動したりできます。テキストボックスを作成するには、 Fabric.Textbox クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。コントロールをスケーリングするときは、オブジェクトの変換原点として中心を使用して、centeredScaling プロパティに true 値を割り当てます。

Syntax

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

ログイン後にコピー

Parameters

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

オプションキー

centeredScaling - このプロパティはブール値を受け入れ、オブジェクトが使用するかどうかを制御できます。その中心が変容の起点であるかどうか。

centeredScaling をキーとして渡し、「true」値を割り当てます

centeredScaling プロパティが有効な場合にテキストボックスオブジェクトがどのように動作するかを理解するために、コード例を見てみましょう。オブジェクトをズームインすると、変換の原点はテキストボックスの中心になります。

<!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 centeredScaling as key and assigning a "true" value to it</h2>
   <p>Try scaling the textbox to see that centered scaling has been enabled</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("Success is the child of audacity.", {
         backgroundColor: "#ffe5b4",
         width: 400,
         top: 70,
         left: 110,
         centeredScaling: true,
      });

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

ログイン後にコピー

centeredScaling プロパティを無効にする

centeredScaling プロパティを無効にできます。それのための。これにより、テキストボックスの中心が変換の中心として使用されなくなります。 -

<!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>Disabling centeredScaling property</h2>
   <p>Try scaling the textbox to see that centered scaling has been disabled</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("Success is the child of audacity.", {
         backgroundColor: "#ffe5b4",
         width: 400,
         top: 70,
         left: 110,
         centeredScaling: false,
      });

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

ログイン後にコピー

以上がFabricJSを使用してテキストボックスの中央スケーリングを無効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。