FabricJS を使用して円のパディングを設定するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS を使用して円のパディングを設定するにはどうすればよいですか?

WBOY

リリース： 2023-08-25 10:45:05

転載

1010 人が閲覧しました

如何使用 FabricJS 设置圆的填充？

このチュートリアルでは、FabricJS を使用して円のパディングを設定する方法を学びます。円は、FabricJS が提供するさまざまな形状の 1 つです。サークルを作成するには、Fabric.Circle クラスのインスタンスを作成し、キャンバスに追加する必要があります。キャンバス内の円形オブジェクトの位置、色、不透明度、サイズを指定できるのと同じように、円形オブジェクトの塗りつぶしを設定することもできます。これは、padding 属性を使用して行うことができます。

構文

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

ログイン後にコピー

パラメータ

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

オプションキー

パディング - このプロパティは 数値を受け入れます＃＃＃＃＃＃価値。割り当てられた値によって、円形オブジェクトとその制御境界ボックスの間の距離が決まります。
#例 1

パディングが使用されていない場合のデフォルトの外観

使用されていない場合を見てみましょうpadding

プロパティを使用するときに円形オブジェクトの外観を表示するコード。ご覧のとおり、オブジェクトとその周囲のコントロール境界の間にはスペースがありません。これは、円とその制御境界ボックスの間にゼロパディングがあることを意味します。
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Setting the padding of circle using FabricJS</h2> <p>Select the object and observe that there is no space between the object and its surrounding controlling borders. This is the default behavior. We haven't used any <b>padding</b> here. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var circle = new fabric.Circle({ left: 115, top: 50, radius: 50, fill: "#85bb65" }); canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
ログイン後にコピー
例 2
パディングプロパティをキーとして渡す

この例では、パディングプロパティを値 7 のキーとして渡します。これは、円形オブジェクトとそのすべてのコントロール境界線の間の距離が 7 ピクセルであることを意味します。えええええ
以上がFabricJS を使用して円のパディングを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。