FabricJS を使用して三角形に破線のストロークを追加するにはどうすればよいですか?

このチュートリアルでは、FabricJS を使用して三角形に破線のストロークを追加する方法を学びます。三角形は、FabricJS によって提供されるさまざまな形状の 1 つです。三角形を作成するには、fabric.Triangleクラスのインスタンスを作成し、キャンバスに追加する必要があります。StrokeDashArrayプロパティを使用すると、オブジェクトのストロークの破線パターンを指定できます。

構文

new fabric.Triangle( { strokeDashArray: Array }: Object)

パラメータ

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

< /ul>

オプション キー

• Stroke DashArray- このプロパティはarrayを受け入れ、これにより次のことを指定できます。オブジェクトのストロークの破線パターン。たとえば、値 [2,3] の配列を渡すと、それは 2 ピクセルのダッシュと 3 ピクセルのギャップのダッシュ パターンを表し、このパターンは無限に繰り返されます。

例 1

オブジェクト ストロークのデフォルトの外観

三角形オブジェクト ストロークのデフォルトの外観を説明する例を見てみましょう。コード例。StrokeDashArrayプロパティを使用していないため、ダッシュ パターンは表示されません。

     
  
Default appearance of an object's stroke
 
You can see there is no dash pattern in the stroke
    

ログイン後にコピー

例 2

StrikeDashArray プロパティをキーとして渡す

この例では、値を [9,2] に渡します。これは、長さ 9 ピクセルの線、その後に長さ 2 ピクセルのギャップ、そして再び長さ 9 ピクセルの線が描画される破線パターンが作成されることを意味します。えええええ

以上がFabricJS を使用して三角形に破線のストロークを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。