ホームページ > 記事 > ウェブフロントエンド > FabricJS を使用して移動するときに円の境界線の不透明度を設定するにはどうすればよいですか?
FabricJS を使用して移動するときに円の境界線の不透明度を設定するにはどうすればよいですか?
- 王林転載
- 2023-08-24 14:53:02776ブラウズ
このチュートリアルでは、FabricJS を使用して、移動時の円の境界線の不透明度を設定します。円は、FabricJS が提供するさまざまな形状の 1 つです。サークルを作成するには、Fabric.Circle クラスのインスタンスを作成し、キャンバスに追加する必要があります。 borderOpacityWhenMoving プロパティを使用して、円がキャンバス上を移動するときに円の不透明度を変更できます。
構文
new fabric.Circle({ borderOpacityWhenMoving: Number }: Object)パラメータ
##オプション (オプション) - このパラメータはobject は、サークルに追加のカスタマイズを提供します。このパラメーターを使用すると、色、カーソル、ストローク幅などのプロパティ、および borderOpacityWhenMoving が属性であるオブジェクトに関連付けられたその他の多くのプロパティを変更できます。
ul>オプション キー
borderOpacityWhenMoving - このプロパティは 数値を受け入れます、円を移動するときに境界線をどの程度不透明にするかを指定します。円形のオブジェクトを移動するときに境界線の不透明度を制御できます。デフォルト値は 0.4 です。
borderOpacityWhenMoving プロパティのデフォルト動作の表示
boderOpacityWhenMoving を示す例を見てみましょう プロパティのデフォルトの動作。円オブジェクトを選択してキャンバス上で移動すると、選択枠の不透明度が 1 (完全に不透明) から 0.4 に変化し、少し半透明に見えます。
<!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>Setting the border opacity of Circle while moving using FabricJS</h2>
<p>Select the object and move it around. Notice that the opacity of the outline border reduces slightly while moving the object. This is the default behavior. Here we have not used the <b>boderOpacityWhenMoving</b> property.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#966fd6",
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>例 2
borderOpacityWhenMoving をキーとして渡す
値をborderOpacityWhenMoving に割り当てる例を見てみましょう。財産。この例では、値を 0 に指定します。これは、円を移動すると、境界線の不透明度が 0 に変化し、非表示になることがわかります。 えええええ
以上がFabricJS を使用して移動するときに円の境界線の不透明度を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。