FabricJS を使用して境界線の色を持つ楕円を作成するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS を使用して境界線の色を持つ楕円を作成するにはどうすればよいですか?

王林

リリース： 2023-09-02 16:53:02

転載

1209 人が閲覧しました

如何使用 FabricJS 创建带有边框颜色的椭圆？

このチュートリアルでは、FabricJS を使用して境界線の色を持つ楕円を作成します。楕円形は、FabricJS が提供するさまざまな形状の 1 つです。楕円を作成するには、 Fabric.Ellipse クラスのインスタンスを作成し、それをキャンバスに追加します。 FabricJS は非常に柔軟なので、楕円オブジェクトを好きなようにカスタマイズできます。 FabricJS によって提供されるプロパティの 1 つは borderColor で、これを使用すると、オブジェクトがアクティブなときに境界線の色を操作できます。

構文

new fabric.Ellipse({ borderColor: String }: Object)

ログイン後にコピー

パラメータ

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

#オプションキー
borderColor - このプロパティは String## を受け入れます。 #オブジェクトをアクティブに選択するときに境界線の色を決定します。デフォルト値は rgb(178,204,255) です。
例 1
文字列値を使用して borderColor キーを渡す
次に、borderColor キーを渡す方法を見てみましょう。
borderColor
属性の割り当ての例。値「blue」を borderColor キーに割り当てました。これは、楕円オブジェクトが選択されたときに青い境界線を作成するのに役立ちます。
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>How to create an Ellipse with a border color using FabricJS?</h2> <p>Select the object to see the "blue" border color.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an Ellipse instance var ellipse = new fabric.Ellipse({ left: 215, top: 100, rx: 90, ry: 50, fill: "red", borderColor: "blue", }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
ログイン後にコピー
例 2
単純な色の名前を文字列として指定する代わりに、rgba 値を
borderColor キーに渡します。ちなみに、
RGBA
値を使用することもできます。この値のコンポーネントは、赤、緑、青、アルファの量を指定します。アルファは不透明度を表します。この例では、紫の RGB 値である rgb(128,0,128) を使用しました。 えええええ
以上がFabricJS を使用して境界線の色を持つ楕円を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。