FabricJS を使用して移動するときに円の境界線の不透明度を設定するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS を使用して移動するときに円の境界線の不透明度を設定するにはどうすればよいですか?

王林

リリース： 2023-08-24 14:53:02

転載

806 人が閲覧しました

如何使用 FabricJS 在移动时设置圆的边框不透明度？

このチュートリアルでは、FabricJS を使用して、移動時の円の境界線の不透明度を設定します。円は、FabricJS が提供するさまざまな形状の 1 つです。サークルを作成するには、Fabric.Circle クラスのインスタンスを作成し、キャンバスに追加する必要があります。 borderOpacityWhenMoving プロパティを使用して、円がキャンバス上を移動するときに円の不透明度を変更できます。

構文

new fabric.Circle({ borderOpacityWhenMoving: Number }: Object)

ログイン後にコピー

パラメータ

##オプション (オプション) - このパラメータはobject は、サークルに追加のカスタマイズを提供します。このパラメーターを使用すると、色、カーソル、ストローク幅などのプロパティ、および < /em>borderOpacityWhenMoving が属性であるオブジェクトに関連付けられたその他の多くのプロパティを変更できます。

オプションキー
borderOpacityWhenMoving - このプロパティは 数値を受け入れます、円を移動するときに境界線をどの程度不透明にするかを指定します。円形のオブジェクトを移動するときに境界線の不透明度を制御できます。デフォルト値は 0.4 です。
例 1
borderOpacityWhenMoving プロパティのデフォルト動作の表示
boderOpacityWhenMoving を示す例を見てみましょうプロパティのデフォルトの動作。円オブジェクトを選択してキャンバス上で移動すると、選択枠の不透明度が 1 (完全に不透明) から 0.4 に変化し、少し半透明に見えます。
<!DOCTYPE html> <html> <head>  <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 サイトの他の関連記事を参照してください。