FabricJS を使用して長方形のコントロールの角のサイズを設定するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS を使用して長方形のコントロールの角のサイズを設定するにはどうすればよいですか?

WBOY

リリース： 2023-09-21 11:17:02

転載

1193 人が閲覧しました

FabricJS を使用して長方形のコントロールの角のサイズを設定するにはどうすればよいですか?

このチュートリアルでは、コントロールの角のサイズを設定する方法を学習します。 FabricJSを使用した長方形。オブジェクトの角度を制御することで、拡大縮小や伸縮が可能になります。または場所を変更します。

コントロールコーナーは、特定の機能を追加するなど、さまざまな方法でカスタマイズできます。色を付けたり、サイズを変更したりできます。 CornerSize を使用してサイズを変更できます属性。

構文

new fabric.Rect({ cornerSize: Number }: Object)

ログイン後にコピー

パラメータ

オプション (オプション) - このパラメータは、四角形であるオブジェクトです。追加のカスタマイズを提供します。。このパラメータを使用すると、cornerSize を属性として持つオブジェクトに関連する色、カーソル、ストローク幅、その他のプロパティを変更できます。

オプションキー

cornerSize - このプロパティは、操作を可能にする number を受け入れます。選択したオブジェクトの角のサイズを制御します。デフォルト値は 13 です。

#例 1

コントロールコーナーのデフォルトサイズ

コントロールコーナーのデフォルトを説明するコード例を見てみましょう。サイズ長方形のオブジェクトがアクティブに選択されている場合。

<!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>Default size of the controlling corners</h2>
   <p>Select the rectangle to see the default size of the controlling corners</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,
         cornerColor: "#3b7a57",
      });

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

ログイン後にコピー

例 2

カスタム値を持つキーとして cornerSize を渡す

この例では、cornerSize プロパティをキーとして渡します値は 17 です。私たち長方形のオブジェクトが配置されたときに、コントロールの角のサイズがどのように変化するかがわかります。選ばれた。

えええええ

以上がFabricJS を使用して長方形のコントロールの角のサイズを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。