Bagaimana untuk Membuat Bulatan dengan Segmen Terpaut Menggunakan Persamaan Trigonometri dan Laluan SVG?-tutorial css-php.cn

Bagaimana untuk Membuat Bulatan dengan Segmen Terpaut Menggunakan Persamaan Trigonometri dan Laluan SVG?

Patricia Arquette

Lepaskan： 2024-12-17 17:03:15

asal

330 orang telah melayarinya

How to Create a Circle with Linked Segments Using Trigonometric Equations and SVG Paths?

Membuat Bulatan dengan Pautan di Sebelah Sempadan

Untuk menghasilkan bulatan dengan bahagian yang berbeza, adalah penting untuk menentukan titik sepanjang lilitan yang berfungsi sebagai koordinat dalam elemen laluan SVG. Menggunakan persamaan trigonometri memudahkan pencarian titik pada bulatan, memandangkan sudut yang terlibat.

Mengira koordinat melibatkan penggunaan persamaan berikut:

Koordinat X: Jejari * Cos(Sudut) Titik Pusat X
Koordinat Y: Jejari * Titik Pusat Sin(Sudut). Y
Sudut: Sudut dalam Darjah * Math.PI / 180

Sudut yang digunakan bergantung pada bilangan segmen yang diperlukan. Contohnya, untuk membuat bulatan dengan enam segmen, setiap segmen menjangkau 60 darjah, meliputi dari 0 hingga 60, 60 hingga 120 dan seterusnya.

Sampel Pengiraan untuk Bulatan dengan Enam Segmen (Jejari : 50, Titik Tengah: 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)

Sekali ini mata ditentukan, membina laluan SVG menjadi mudah. Laluan bermula dari titik tengah (55,55), memanjang ke titik permulaan dan melukis lengkok ke titik penamat.

Pertimbangkan laluan sampel berikut untuk segmen pertama:

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

Salin selepas log masuk

Perhatikan peralihan dari garis (L) ke lengkok (A) *.

Berikut ialah demonstrasi visual bulatan dengan enam segmen:

[Imej bulatan dengan enam segmen, setiap segmen dipautkan]

Atas ialah kandungan terperinci Bagaimana untuk Membuat Bulatan dengan Segmen Terpaut Menggunakan Persamaan Trigonometri dan Laluan SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!