FabricJSを使用して円のコントロール境界線を非表示にする方法は?-jsチュートリアル-php.cn

FabricJSを使用して円のコントロール境界線を非表示にする方法は?

PHPz

リリース： 2023-08-24 09:21:12

転載

1383 人が閲覧しました

如何使用 FabricJS 隐藏圆的控制边框？

このチュートリアルでは、FabricJS を使用して円のコントロール境界線を非表示にする方法を学びます。円は、FabricJS が提供するさまざまな形状の 1 つです。円を作成するには、Fabric.Circle クラスのインスタンスを作成し、キャンバスに追加します。特定の色や破線パターンの追加など、さまざまな方法でコントロールの境界線をカスタマイズできます。ただし、hasBorders プロパティを使用して境界線を完全に削除することもできます。

構文

new fabric.Circle({ hasBorders: Boolean }: Object)

ログイン後にコピー

パラメータ

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

#オプションキー
##hasBorders - このプロパティはブール値を受け入れます値を False< /strong> に設定すると、コントロールの境界線はレンダリングされません。デフォルト値は True です。
例 1
Circle オブジェクトは境界線のデフォルトの外観を制御します
< /strong>次のコードを見てみましょう。円の境界線のコントロールを表示します。デフォルトの外観です。
hasBorders
プロパティのデフォルト値は True であるため、円形のオブジェクトが選択されると境界線がレンダリングされます。
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Hiding the controlling borders of a circle using FabricJS</h2> <p>Select the object and notice its controlling borders. This is the default appearance. Although we have not used the <b>hasBorders</b> property, it is by default set to True.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var circle = new fabric.Circle({ left: 215, top: 100, fill: "white", radius: 50, stroke: "#c154c1", strokeWidth: 5 }); // Adding it to the canvas canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
ログイン後にコピー
例 2
hasBorders をキーとして渡し、値「false」を割り当てます。
If
hasBorders
属性に False 値が割り当てられている場合、境界線はレンダリングされなくなります。これは、円形オブジェクトを選択すると、コントロールの境界線が非表示になることを意味します。 えええええ
以上がFabricJSを使用して円のコントロール境界線を非表示にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。