三角方程式とSVGパスを使用して、リンクされたセグメントを持つ円を作成するにはどうすればよいですか?

境界線側にリンクのある円の作成

明確なセクションを持つ円を生成するには、円周上で機能する点を正確に指定することが重要です。 SVG パス要素の座標として。三角方程式を使用すると、関係する角度を考慮して、円上の点を見つけることが簡単になります。

座標の計算には、次の方程式の利用が含まれます:

• X 座標: 半径 * Cos(角度) 中心点 X
• Y 座標: 半径 * Sin(角度) 中心点Y
• 角度: 度単位の角度 * Math.PI / 180

使用される角度は、必要なセグメントの数によって異なります。たとえば、6 つのセグメントを持つ円を作成するには、各セグメントの範囲は 60 度で、0 から 60、60 から 120 などをカバーします。

6 つのセグメントを持つ円の計算例 (半径) : 50、中心点: 55,55):

Segment	Angle (Degrees)	Angle (Radians)	From Point	To Point
1	0 - 60	0 - π/3	(105,55)	(80, 98.30)
2	60 - 120	π/3 - 2π/3	(80, 98.30)	(30, 98.30)
3	120 - 180	2π/3 - π	(30, 98.30)	(5, 55)
4	180 - 240	π - 4π/3	(5, 55)	(30, 11.69)
5	240 - 300	4π/3 - 5π/3	(30, 11.69)	(80, 11.69)
6	300 - 360	5π/3 - 2π	(80, 11.69)	(105, 55)

これらの点が決定されると、SVG パスの構築が簡単になります。パスは中心点 (55,55) から始まり、始点まで伸び、終点まで円弧を描きます。

最初のセグメントの次のサンプル パスを考えてみましょう:

<path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />

• 線 (L) から円弧 (A) への移行に注目してください。 *.

これは 6 つのセグメントを持つ円の視覚的なデモンストレーションです:

[各セグメントがリンクされた 6 つのセグメントを持つ円の画像]

以上が三角方程式とSVGパスを使用して、リンクされたセグメントを持つ円を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。