ホームページ > 記事 > ウェブフロントエンド > FabricJS を使用してキャンバス上の選択領域の境界線にダッシュを追加するにはどうすればよいですか?
FabricJS を使用してキャンバス上の選択領域の境界線にダッシュを追加するにはどうすればよいですか?
- PHPz転載
- 2023-09-06 18:25:02642ブラウズ
この記事では、FabricJS を使用してキャンバス上の選択領域の境界線にダッシュを追加する方法を学びます。これは、SelectionDashArray プロパティを使用して実現できます。選択領域の境界線を破線に設定できます。
構文
new fabric.Canvas(element: HTMLElement|String, { selectionDashArray: Array }: Object)パラメータ
要素 - このパラメータは
オプション (オプション) - このパラメータは、キャンバスの追加のカスタマイズを提供するオブジェクトです。このパラメーターを使用すると、色、カーソル、境界線の幅など、キャンバスに関連する多くの属性を変更できます。selectionDashArray はその属性の 1 つです。必要なダッシュ パターンを決定する配列を受け入れます。
例 1
SelectionDashArray をキーとしてクラスに渡す strong>
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 サイトの他の関連記事を参照してください。