FabricJS を使用して長方形の中央揃えのスケーリングを無効にする方法は?-jsチュートリアル-php.cn

FabricJS を使用して長方形の中央揃えのスケーリングを無効にする方法は?

WBOY

リリース： 2023-08-24 20:53:07

転載

1185 人が閲覧しました

FabricJS を使用して長方形の中央揃えのスケーリングを無効にする方法は?

このチュートリアルでは、FabricJS を使用して長方形の中央揃えのスケーリングを無効にする方法を学びます。 Rectangle は、FabricJS が提供するさまざまな形状の 1 つです。四角形を作成するには、fabric.Rect クラスのインスタンスを作成し、キャンバスに追加する必要があります。コントローラーを介してスケーリングする場合、centeredScaling プロパティを true に設定して、オブジェクトの変換の開始点として中心を使用します。

Syntax

new fabric.Rect({ centeredScaling: Boolean }: Object)

ログイン後にコピー

Parameters

Options (optional) - このパラメータは Object です。四角形に追加のカスタマイズを提供します。このパラメータを使用すると、色、カーソル、ストロークの幅、その他の多くのプロパティなどのプロパティを、centeredScaling がプロパティであるオブジェクトに関連して変更できます。 ##Options Keys

centeredScaling

Boolean
値を受け入れます。このプロパティが true の場合、オブジェクトは中心をその中心として使用します。変換の起点。例 1

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 rectangle 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         centeredScaling: true,
      });

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

ログイン後にコピー

例 2

centeredScaling 属性を無効にする

centeredScaling 属性に値 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>Disabling the centeredScaling property</h2>
   <p>Try scaling the rectangle 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         centeredScaling: false,
      });

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

ログイン後にコピー

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