Rumah > hujung hadapan web > tutorial js > Hanya memahami lengkung Bézier.

Hanya memahami lengkung Bézier.

王林
Lepaskan: 2024-08-16 11:04:02
asal
601 orang telah melayarinya

Bayangkan jika anda hanya boleh menggunakan garis lurus, elips dan bulatan, bukankah sukar untuk mereka bentuk kereta dengan garis halus dan rupa yang kompleks?

Pada tahun 1962, jurutera Perancis Pierre Bézier menerbitkan lengkung Bézier, yang pada mulanya digunakan untuk reka bentuk badan utama kereta.

Simply understanding Bézier curves.

Lengkung Bézier boleh menentukan lengkung licin melalui satu siri titik kawalan. Lengkung sentiasa melalui titik kawalan pertama dan terakhir dan dipengaruhi oleh bentuk titik kawalan pertengahan. Selain itu, lengkung Bézier mempunyai sifat badan cembung.

Lengkung Bézier digunakan secara meluas dalam grafik komputer dan pemodelan imej, seperti dalam animasi, reka bentuk fon dan reka bentuk perindustrian.

Formula

Simply understanding Bézier curves.

Mari kita fahami ini.

P(t) mewakili titik pada lengkung pada t (t ialah pecahan, dengan nilai dari 0 hingga 1). Apakah titik pada lengkung pada t? Penerangan lengkung biasa ialah: y = f(x), dan buat masa ini, mari kita fahami P(t) sebagai f(x). Perbezaannya ialah P(t) ialah perwakilan parametrik (dan hasil pengiraan ialah "vektor" seperti [x, y]), yang akan diterangkan secara terperinci kemudian.

Seterusnya, Pi mewakili titik kawalan ke-i (i bermula dari 0). Mengambil contoh rajah di atas, terdapat 4 titik kawalan iaitu P0, P1, P2, P3. N dalam formula ialah indeks terakhir titik kawalan, iaitu, n = 3 (perhatikan bahawa ini bukan bilangan titik kawalan, tetapi kiraan tolak 1).

Bi,n(t) ialah fungsi asas Bernstein, juga dikenali sebagai fungsi asas. Bagi setiap spesifik (i, n), terdapat fungsi asas berbeza yang sepadan dengannya. Jika anda faham dari perspektif wajaran, anda boleh menganggap fungsi asas sebagai fungsi pemberat, menunjukkan "sumbangan" titik kawalan ke-i Pi kepada koordinat lengkung pada kedudukan t.

Formula untuk fungsi asas adalah seperti berikut:

Simply understanding Bézier curves.

(ni)binom{n}{i} (in ) Adakah nombor gabungan (berapa banyak cara untuk memilih i daripada n?). Mengenai mengapa fungsi asas kelihatan seperti ini, ia boleh difahami berkaitan dengan algoritma De Casteljau (lihat kemudian dalam teks)

Kembali kepada formula P(t), i=0nsum_{i=0}^{n} i=0n ialah simbol penjumlahan, menunjukkan bahawa bahagian berikutnya ( Bi,n(t)Pi B_{i,n}(t) cdot P_iBi,n(t) ⋅Pi ) hendaklah dijumlahkan daripada i=0 kepada i=n.

Mengambil gambar di atas sebagai contoh, dengan mengandaikan kita ingin mengira P(0.1), bagaimana untuk melakukannya? Ia dikembangkan seperti berikut:

Simply understanding Bézier curves.

Simply understanding Bézier curves.

Ganti t=0.1 untuk mendapatkan:

Simply understanding Bézier curves.

Perwakilan parametrik lengkung

Di sini terus memetik artikel daripada netizen (pautan)

Simply understanding Bézier curves.

Jom fokus pada formula di atas.

Seperti yang ditunjukkan dalam rajah di atas, garis lurus yang kita kenali boleh difahami dari perspektif lain: menggunakan t (iaitu, panjang |AP| dari titik P ke titik yang diketahui (x0,y0)), maka titik P boleh ditentukan melalui fungsi trigonometri di atas.

Secara umum, ia boleh ditulis sebagai:

Simply understanding Bézier curves.

Di sini, P0 ialah vektor [x0,y0]dan v juga ialah vektor. Apabila ditambah bersama, P(t) ialah vektor [x,y].

Melihat bulatan sekali lagi:

Simply understanding Bézier curves.

Seperti yang ditunjukkan dalam rajah, bulatan boleh dilihat sebagai mempunyai pusat yang diketahui, dengan mana-mana titik pada bulatan ditentukan oleh sudut putaran dan jejari. Ia juga boleh ditulis sebagai:

Simply understanding Bézier curves.

Persamaan parametrik mengekalkan invarian geometri dan boleh mewakili bentuk seperti bulatan (dengan satu x sepadan dengan berbilang nilai y).

De Casteljau

Algoritma De Casteljau ialah kaedah yang digunakan dalam aplikasi praktikal untuk menilai dan menganggarkan lengkung Bézier untuk lukisan dan operasi lain. Berbanding dengan kaedah penilaian berasaskan definisi sebelumnya, ia lebih cepat dan lebih stabil, serta lebih dekat dengan ciri-ciri lengkung Bézier.

Di sini, kami merujuk kepada dua artikel: pautan1 dan pautan2

Pertama, yang berikut ditakrifkan:

Simply understanding Bézier curves.

Lihat β di atas. Ia agak mengelirukan dengan superskrip dan subskrip; anda boleh menggunakan rekursi segi tiga berikut untuk memahami:

Simply understanding Bézier curves.

Tepi merah segi tiga dalam rajah di atas ialah titik kawalan bagi dua segmen dibahagikan dengan t0. Untuk memahami dengan lebih jelas t0, P(t0) (iaitu, β0(n)beta_0^{(n)} β 0(n) ), titik kawalan kedua-dua lengkung, anda boleh merujuk kepada rajah berikut:

Simply understanding Bézier curves.

Rajah di atas menunjukkan hubungan antara pelbagai titik apabila t=0.5.

Dari perspektif "interpolasi," proses pengiraan juga boleh difahami sebagai:

  1. Mencari titik tengah setiap pasangan titik kawalan bersebelahan (kerana t=0.5), iaitu, b01, b11, b21 (mohon maafkan notasi saya; menulis dalam LaTeX terlalu menyusahkan)
  2. Cari titik tengah b02 pada b01−b11, dan cari titik tengah b12 pada b11-b21
  3. Cari titik tengah b03 pada b02−b12 , Malah, intipati algoritma De Casteljau ialah interpolasi dan lelaran.

Lukisan Lengkung Berdasarkan De Casteljau

Pada masa ini, dua kaedah diperhatikan.

Satu kaedah melibatkan merentasi t dari 0 hingga 1 dengan kenaikan langkah kecil(iaitu. 0.01). Setiap kali P(t) dicari, formula rekursif digunakan untuk menentukan β0(n)beta_0^{(n)} β 0(n) .

Kaedah lain melibatkan mencari P(t=0.5), dan kemudian untuk dua lengkung terbahagi, P(t=0.5) dicari masing-masing... Pembahagian ini berterusan sehingga lengkung dianggarkan.

Perlaksanaan

Selalu berasa tidak nyata untuk hanya menonton tanpa berlatih.

Jadi saya menulis kod pelaksanaan saya sendiri untuk lukisan lengkung dan menyusunnya ke dalam kit alat: Kit Alat Compilelife

Kod teras yang sepadan ada di sini

Atas ialah kandungan terperinci Hanya memahami lengkung Bézier.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan