Fabric.js – Polygon クラスを使用して六角形のグリッド (ハニカム) を描画する方法

fabric.Polygon のインスタンスを作成することで、Polygon オブジェクトを作成できます。ポリゴン オブジェクトは、接続された直線セグメントのセットで構成される閉じた形状として特徴付けることができます。これは FabricJS の基本要素の 1 つであるため、角度や不透明度などのプロパティを適用することで簡単にカスタマイズすることもできます。

＃＃＃文法＃＃＃ リーリー

パラメータ

• #points - このパラメーターは、ポリゴン オブジェクトを構成する点の配列を表す Array を受け入れます。

• オプション (オプション) - このパラメータは オブジェクト であり、この目的に役立ちます。このパラメータを使用して、原点、ストローク幅、および Polygon オブジェクトに関連付けられたその他の多くのプロパティを変更します。

例 1: 多角形を使用して六角形を描画する

多角形を使用して

六角形

を描画する方法のコード例を見てみましょう。さまざまな種類の六角形を描画できますが、この例では正六角形を描画します。正六角形には6つの等しい辺があることがわかっています。 リーリー 例 2: Polygon を使用して六角形のメッシュを描画する

六角形のグリッドを作成する方法を示すコード例を見てみましょう。

drawHexagon

(m,n) という関数を起動するだけです。(m,n) は六角形の中心点です。この関数が呼び出されるたびに、六角形が描画されます。また、drawGrid(width, height) 関数を開始します。この関数は、連続する六角形の次の中心の位置を計算して、連続する六角形を描画します。 リーリー ＃＃＃結論は＃＃＃ このチュートリアルでは、2 つの簡単な例を使用して、FabricJS を使用して Polygon クラスを使用して六角形のグリッドを描画する方法を示します。

以上がFabric.js – Polygon クラスを使用して六角形のグリッド (ハニカム) を描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。