このチュートリアルでは、FabricJS を使用して三角形に破線のストロークを追加する方法を学びます。三角形は、FabricJS によって提供されるさまざまな形状の 1 つです。三角形を作成するには、fabric.Triangleクラスのインスタンスを作成し、キャンバスに追加する必要があります。StrokeDashArrayプロパティを使用すると、オブジェクトのストロークの破線パターンを指定できます。
new fabric.Triangle( { strokeDashArray: Array }: Object)
オプション (オプション)- このパラメータはobjectです。三角形に追加のカスタマイズを提供します。このパラメーターを使用すると、StrokeDashArrayがプロパティであるオブジェクトに関連するプロパティ (色、カーソル、ストローク幅、その他の多くのプロパティなど) を変更できます。
Stroke DashArray- このプロパティはarrayを受け入れ、これにより次のことを指定できます。オブジェクトのストロークの破線パターン。たとえば、値 [2,3] の配列を渡すと、それは 2 ピクセルのダッシュと 3 ピクセルのギャップのダッシュ パターンを表し、このパターンは無限に繰り返されます。
オブジェクト ストロークのデフォルトの外観
三角形オブジェクト ストロークのデフォルトの外観を説明する例を見てみましょう。コード例。StrokeDashArrayプロパティを使用していないため、ダッシュ パターンは表示されません。
Default appearance of an object's stroke
You can see there is no dash pattern in the stroke
StrikeDashArray プロパティをキーとして渡す
この例では、値を [9,2] に渡します。これは、長さ 9 ピクセルの線、その後に長さ 2 ピクセルのギャップ、そして再び長さ 9 ピクセルの線が描画される破線パターンが作成されることを意味します。えええええ
以上がFabricJS を使用して三角形に破線のストロークを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。