FabricJS を使用して円にストロークを追加するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS を使用して円にストロークを追加するにはどうすればよいですか?

PHPz

リリース： 2023-08-24 17:57:13

転載

1091 人が閲覧しました

如何使用 FabricJS 向圆添加描边？

このチュートリアルでは、FabricJS を使用して ストローク を円に追加する方法を学びます。円は、FabricJS が提供するさまざまな形状の 1 つです。円を作成するには、Fabric.Circle クラスのインスタンスを作成し、キャンバスに追加します。円オブジェクトは、寸法の変更、背景色の追加、オブジェクトの周囲に描かれた線の色の変更など、さまざまな方法でカスタマイズできます。これは、ストロークプロパティを使用して行うことができます。

構文

new fabric.Circle({ stroke : String }: Object)

ログイン後にコピー

パラメータ

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

#オプションキー
Stroke - このプロパティは String を受け入れますそして、オブジェクトの境界線の色を決定します。 < /strong>
例 1
キーに 16 進値が含まれるとしてストローク を渡す
見てみましょう例では、
lines プロパティを使用したときに円形のオブジェクトがどのように表示されるかを確認します。 16 進数のカラーコードは「#」で始まり、その後に色を表す 6 桁の数字が続きます。この例では、オレンジがかった赤の「#ff4500」を使用しました。
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Adding stroke to a circle using FabricJS</h2> <p>Notice the orange-red outline around the circle. It appears as we have applied the <b>stroke</b> property and assigned it a hexadecimal color code. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var circle = new fabric.Circle({ left: 50, top: 90, radius: 50, fill: "#4169e1", stroke: "#ff4500", strokeWidth: 5 }); canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
ログイン後にコピー
例 2

「rgba」値を lines 属性に渡す
この例では、代入方法を理解します。 rgba 値をストローク属性に設定します。 16 進数のカラーコードの代わりに、赤、青、緑、アルファを表す
RGBA 値を使用できます。 alpha パラメーターは、色の不透明度を指定します。この例では、rgba 値 (255,69,0,0.5) を使用しました。これは、不透明度 0.5 のオレンジがかった赤色です。 えええええ
以上がFabricJS を使用して円にストロークを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。