SVG Quadratic Bezier Curve: Alat untuk melukis tepi licin

Artikel ini akan meneroka bagaimana untuk melukis tepi lancar menggunakan lengkung bezier kuadratik dalam HTML5 SVG. Kurva bezier kuadratik ditakrifkan oleh arahan d dalam atribut SVG Q, dengan titik permulaan dan akhir, dan lengkung dibengkokkan melalui satu titik kawalan.

Mata utama:

Arahan
• dalam atribut d SVG Q digunakan untuk menentukan lengkung bezier kuadratik, yang mengandungi tiga koordinat: titik permulaan, titik kawalan dan titik akhir.
• Gunakan huruf kecil q untuk menentukan koordinat relatif, manakala T dan t arahan boleh digunakan untuk menyambungkan pelbagai lengkung. lengkung.
• Semasa pengekodan dan menggambarkan lengkung bezier kuadratik boleh mencabar, kod <path></path> boleh dihasilkan menggunakan alat ini.
• lengkung bezier quadriferous boleh digunakan untuk membuat bentuk kompleks dan boleh animasi melalui unsur -unsur <animate></animate>, animasi CSS, atau JavaScript.

Artikel sebelumnya "Cara Membuat Laluan Kompleks dalam SVG" meneroka unsur -unsur <path></path> dan menunjukkan cara menarik satu siri segmen dan arka untuk membuat apa -apa bentuk (sering digunakan untuk menyalin fon tanpa memuat turun fon penuh).) . Hartanah d menyediakan beberapa helah tambahan untuk menarik lengkung yang lancar. Artikel ini akan membincangkan lengkung bezier kuadratik, dan anda juga boleh merujuk kepada "Cara Menggambar Kurva Bezier Kubik pada Imej SVG" Untuk pilihan yang lebih kompleks.

Apakah lengkung bezier kuadratik?

lengkung bezier kuadratik mempunyai titik permulaan (P0) dan titik akhir (P2). Titik kawalan tunggal (P1) menentukan kelengkungan garis. Halaman Bezier Curve Wikipedia memberikan ilustrasi yang baik:

gambar dari Wikipedia

Peminat matematik juga boleh melihat persamaan sakit kepala di Wolfram Mathworld.

lengkung kuadrilateral sangat bagus untuk melukis tepi lancar. Seperti yang dapat dilihat dari angka di bawah, mudah untuk menentukan titik kawalan, dan biasanya tepi sudut kanan muncul:

jalur kompleks

kurva bezier kuadratik menggunakan definisi arahan

dalam atribut

atribut laluan SVG: d Q Perintah

awal

<path d="M100,250 Q250,100 400,250" />

menggerakkan pen ke titik pertama (100,250).

diikuti oleh dua koordinat: satu titik kawalan (250,100) dan titik akhir terakhir (400,250). M Q Anda juga boleh menggunakan huruf kecil

untuk mewakili koordinat relatif dan bukan koordinat mutlak. Keluk berikut akan sama dan mungkin lebih mudah dikodkan:

<path d="M100,250 Q250,100 400,250" />

Akhirnya, terdapat arahan T dan t (biasanya, huruf kecil mewakili koordinat relatif dan bukan koordinat mutlak). Arahan ini menerima koordinat akhir untuk menyambungkan pelbagai lengkung bersama -sama. Titik kawalan disimpulkan dari titik terakhir yang digunakan untuk memastikan lengkung berterusan yang sempurna. Sebagai contoh, pertimbangkan jalan berikut:

<path d="M100,250 q150,-150 300,0" />

Ia menarik lengkung dari 100,250 hingga 400,250 dengan titik kawalan pada 250,100. Satu lagi lengkung kemudian ditarik, berakhir pada 700,250, dan titik kawalan disimpulkan kepada 550,400.

Titik kawalan yang disimpulkan secara matematik betul, tetapi mungkin tidak selalu menjadi apa yang anda perlukan!

lengkung bezier kuadratik boleh menjadi agak sukar untuk dikodkan dan digambarkan, jadi anda boleh menggunakan alat generasi cepat untuk menjana kod

untuk anda: <path></path>

codepen link

seret titik kawalan di kedua -dua hujung lengkung. Klik lengkung itu sendiri untuk bertukar -tukar kesan pengisian, yang menambah perintah akhir

. Z

Sila ambil perhatian bahawa alat ini mesti menukar koordinat halaman DOM ke koordinat SVG untuk memastikan ia berfungsi dengan baik untuk semua saiz skrin. Ini mungkin sedikit lebih rumit daripada yang anda harapkan, jadi rujuk kepada "Cara Menukar Dari Koordinat DOM ke Koordinat SVG dan Pulangan" untuk butiran lengkap.

Jika anda sudah bersedia untuk menangani masalah yang lebih kompleks, cuba buat lengkung bezier padu pada imej SVG.

(bahagian Soalan Lazim yang disebutkan dalam teks asal harus ditambah di sini, kandungan telah diberikan dalam teks asal dan tidak akan diulang di sini)

Atas ialah kandungan terperinci Cara melukis lengkung bézier kuadratik pada html5 svgs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!