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

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

WBOY

リリース： 2023-09-12 12:29:02

転載

1392 人が閲覧しました

如何使用 FabricJS 创建带有边框颜色的三角形？

このチュートリアルでは、FabricJS を使用して境界線の色を持つ三角形を作成します。三角形は、FabricJS によって提供されるさまざまな形状の 1 つです。三角形を作成するには、Fabric.Triangle クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。

FabricJS は非常に柔軟なので、三角形オブジェクトを好きなようにカスタマイズできます。 FabricJS によって提供されるプロパティの 1 つは borderColor で、これを使用すると、オブジェクトがアクティブなときに境界線の色を操作できます。

構文

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

ログイン後にコピー

パラメータ

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

< /ul>
Option Key
borderColor - このプロパティは、選択範囲を指定する string を受け取ります。三角形オブジェクトの境界線の色。デフォルト値は rgb(178,204,255) です。
例 1
文字列値を使用して borderColour キーを渡す
コード例を見て、その方法を理解しましょう。 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>Passing borderColour key with a String value</h2> <p>Select the triangle to see the border colour</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a triangle object var triangle = new fabric.Triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#deb887", borderColor: "blue", }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
ログイン後にコピー
例 2

単純な色の名前を文字列として指定する代わりに、RGBA 値を borderColor キー

に渡します。ちなみに、RGBA 値を使用することもできます。この値のコンポーネントは、赤、緑、青、アルファの量を指定します。アルファは不透明度を表します。この例では、紫の RGB 値である rgb(128,0,128) を使用しました。
えええええ
以上がFabricJS を使用して境界線の色を持つ三角形を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。