FabricJS を使用してキャンバス上の選択領域の境界線にダッシュを追加するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS を使用してキャンバス上の選択領域の境界線にダッシュを追加するにはどうすればよいですか?

PHPz

リリース： 2023-09-06 18:25:02

転載

605 人が閲覧しました

如何使用 FabricJS 将破折号添加到画布上选择区域的边框？

この記事では、FabricJS を使用してキャンバス上の選択領域の境界線にダッシュを追加する方法を学びます。これは、SelectionDashArray プロパティを使用して実現できます。選択領域の境界線を破線に設定できます。

構文

new fabric.Canvas(element: HTMLElement|String, { selectionDashArray: Array }: Object)

ログイン後にコピー

パラメータ

要素 - このパラメータは
オプション (オプション) - このパラメータは、キャンバスの追加のカスタマイズを提供するオブジェクトです。このパラメーターを使用すると、色、カーソル、境界線の幅など、キャンバスに関連する多くの属性を変更できます。selectionDashArray はその属性の 1 つです。必要なダッシュパターンを決定する配列を受け入れます。

例 1

SelectionDashArray をキーとしてクラスに渡す

selectionDashArray を使用すると、選択領域の境界線を次のように設定できます。点線。ダッシュパターンを定義する方法は、配列内のダッシュの長さを指定することです。以下の例では、[7,6] 配列を使用します。これは、7 ピクセルの長さの線の後に 6 ピクセルのギャップが続くことを意味します。

<!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>Adding dashes to the border of a selection area on a canvas</h2>
   <p>Select an area around the object. The border of the selection area would have dashed lines.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionDashArray: [7, 6],
         selectionBorderColor: "red"
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 200,
         top: 100,
         radius: 40,
         fill: "blue",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

ログイン後にコピー

例 2

selectionLineWidth およびselectionBorderColor でのselectionDashArray の使用

selectionDashArray プロパティはさまざまな方法で使用できます。 1 つの方法は、選択範囲の境界線の幅と色をそれぞれ指定するselectionLineWidth およびselectionBorderColor と組み合わせて使用することです。
えええええ
以上がFabricJS を使用してキャンバス上の選択領域の境界線にダッシュを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。