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

FabricJSを使用して円の半径を設定するにはどうすればよいですか?

王林

リリース： 2023-09-11 09:13:02

転載

952 人が閲覧しました

如何使用 FabricJS 设置圆的半径？

このチュートリアルでは、FabricJS を使用して円の半径を設定する方法を学びます。キャンバス内の円形オブジェクトの位置、色、不透明度、サイズを指定できますが、最初に表示する円の半径を指定する必要があります。これは、radius 属性を使用して実行できます。

構文

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

ログイン後にコピー

パラメータ

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

#Option Key
Radius - このプロパティは受け入れられます数値値。割り当てられた値によって円の半径が決まります。
例 1
radius プロパティをキーとして渡す
FabricJS の例を見てみましょう円の半径を設定します。この例では、radius プロパティに値 50 を指定し、幅 50 ピクセルの半径を持つ円を作成しました。 10 進数値も加算できます。
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Setting the radius of a circle using FabricJS</h2> <p>Here we have set the <b>radius</b> at 50px. </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

値を単一の数値ではなく式として渡す
単一の数値を渡すだけでなく、次のこともできます。 radius 属性も渡します。式を割り当てます。この例では、式
[(30 * 3) 10] を使用しました。これは 100 と評価されるため、円の半径は 100px になります。 えええええ
以上がFabricJSを使用して円の半径を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。