Canvas mengimplementasikan kurva Bezier orde tinggi (generator kurva Bezier orde-N)

Karena Canvas asli hanya mendukung hingga kurva Bezier orde ketiga, apa yang harus saya lakukan jika ingin menambahkan beberapa titik kontrol? (Bahkan kurva yang paling rumit pun dapat disimulasikan dengan Bezier orde ketiga.) Pada saat yang sama, sulit bagi kita untuk memahami dengan jelas posisi titik kendali Bezier secara intuitif. Berapa banyak kita dapat mengatur titik kendali untuk membentuk kurva kita inginkan? Untuk mengatasi dua masalah di atas, sepertinya tidak ada solusi level N (versi js) di komunitas, jadi kali ini penulis sangat serius dengan bezierMaker.js open source!

bezierMaker.js secara teoritis mendukung pembuatan kurva Bezier orde-N, dan juga menyediakan tempat pengujian bagi pengembang untuk menambahkan dan menyeret titik kontrol untuk menghasilkan serangkaian animasi gambar. Sangat intuitif bagi pengembang untuk mengetahui kurva generasi berbeda yang sesuai dengan titik kontrol di posisi berbeda.

Jika Anda menyukai pekerjaan ini, selamat datang untuk membintangi. Bagaimanapun, bintang diperoleh dengan susah payah. .

Alamat proyek: di sini✨✨✨

Saat menggambar kurva Bezier tingkat tinggi yang kompleks, Anda tidak dapat mengetahui lokasi titik kontrol kurva yang Anda perlukan secara tepat. Saat melakukan simulasi di lapangan uji, nilai koordinat titik kontrol dapat diperoleh secara real time. Koordinat titik yang diperoleh dapat diubah menjadi array objek dan diteruskan ke kelas BezierMaker untuk menghasilkan kurva target.

rendering

1. [x] Sejumlah titik kontrol dapat ditambahkan ke lokasi pengujian
2. [x] Situs pengujian mendukung animasi pembentukan gambar kurva.
3. [x] Titik kontrol dapat diseret dengan bebas
4. [x] Mendukung tampilan garis singgung selama pembentukan kurva Bezier
5. [x] Gambar kurva Bezier orde 3 ke bawah menggunakan API asli

 <skrip src=./bezierMaker.js></skrip>

Render di atas menunjukkan penggunaan situs pengujian. Setelah Anda mendapatkan koordinat titik kontrol yang akurat melalui situs pengujian, Anda dapat memanggil bezierMaker.js untuk menggambar kurva secara langsung.

 /** * Objek DOM dari kanvas kanvas * array titik kontrol bezierCtrlNodesArr, termasuk koordinat x, y * warna kurva warna */var canvas = document.getElementById('canvas')//Gunakan metode asli untuk mengimplementasikan sebelum level 3 var arr0 = [ {x:70,y:25},{x:24,y:51}]var arr1 = [{x:233,y:225},{x:170,y:279},{x:240,y:51}]var arr2 = [{x:23,y:225},{x:70, y:79},{x:40,y:51},{x:300, y:44}]var arr3 = [{x:333,y:15},{x:70,y:79},{x:40,y:551},{x:170,y:279},{x:17,y:239} ]var arr4 = [{x:53,y:85},{x:170,y:279},{x:240,y:551},{x:70,y:79},{x:40,y:551} ,{x:170,y:279}]var bezier0 = new BezierMaker(kanvas, arr0, 'black')var bezier1 = new BezierMaker(kanvas, arr1, 'merah')var bezier2 = BezierMaker baru(kanvas, arr2, 'biru')var bezier3 = BezierMaker baru(kanvas, arr3, 'kuning')var bezier4 = BezierMaker baru(kanvas, arr4, 'hijau')bezier0.drawBezier()bezier1.drawBezier()bezier2.drawBezier()bezier3.drawBezier()bezier4.drawBezier()

Gambarkan hasilnya

Jika terdapat kurang dari 3 titik kontrol, antarmuka API asli akan digunakan. Jika terdapat lebih dari 2 titik kontrol, fungsi yang kita terapkan akan digunakan untuk menggambar titik tersebut.

Gambarlah Kurva Bezier

Inti dari menggambar kurva Bezier terletak pada penerapan rumus Bezier:

P0-Pn dalam rumus ini mewakili berbagai operasi daya setiap titik dan proporsi t dari titik awal ke setiap titik kontrol dan kemudian ke titik akhir.

 BezierMaker.prototype.bezier = function(t) { //Rumus Bezier memanggil var x = 0, y = 0, bezierCtrlNodesArr = this.bezierCtrlNodesArr, //Array titik kontrol n = bezierCtrlNodesArr.length - 1, self = this bezierCtrlNodesArr .forEach (fungsi(item, indeks) { jika(!indeks) { x += item.x * Math.pow(( 1 - t ), n - indeks) * Math.pow(t, indeks) y += item.y * Math.pow(( 1 - t ), n - indeks) * Math.pow(t, indeks) } else { //faktorial adalah fungsi faktorial x += self.factorial(n) / self.factorial(index) / self.factorial(n - indeks) * item.x * Math .kekuatan(( 1 - t ), n - indeks) * Math.pow(t, indeks) y += self.factorial(n) / self.factorial(index) / self.factorial(n - indeks) * item.y * Math. pow(( 1 - t ), n - indeks) * Math.pow(t, indeks) } }) return { x: x, y: y }}

Lintasi semua titik dan hitung koordinat titik saat ini x, y pada kurva Bezier berdasarkan nilai proporsi saat ini t (0<=t<=1). Penulis membagi nilai t menjadi 1000 bagian, yaitu t+=0,01 untuk setiap operasi. X dan y yang dihitung saat ini adalah titik-titik setelah kurva Bezier dibagi menjadi 1000 bagian. Ketika nilai t melintasi dari 0 hingga 1 1000 kali, 1000 x dan y koordinat yang sesuai dihasilkan, dan kurva Bezier orde tinggi dapat disimulasikan dengan menggambar titik dan garis secara berurutan.

Penulis akan menjelaskan secara spesifik turunan dari rumus Bezier pada artikel selanjutnya. Sekarang yang perlu anda ketahui hanyalah bahwa kita menggunakan rumus Bezier untuk menghitung bahwa kurva Bezier sebenarnya dibagi menjadi 1000 titik, dan kemudian menghubungkan titik-titik tersebut dengan garis lurus kurva kelas dapat disimulasikan.

Implementasi animasi yang dihasilkan oleh kurva Bezier di bidang simulasi

Kode yang relevan untuk bagian ini dapat ditemukan di sini

Ide keseluruhannya adalah menggunakan metode rekursif untuk memperlakukan setiap lapisan titik kontrol sebagai fungsi Bessel orde pertama untuk menghitung lapisan titik kontrol berikutnya dan menghubungkannya sesuai dengan itu. Penulis akan meninggalkan logika spesifik hingga penjelasan mendalam tentang prinsip rumus kurva Bezier untuk memilah prinsip pembuatan animasi di lokasi pengujian~

Penulis selalu ingin membuat sesuatu menjadi open source (tetapi tidak ada yang bisa dia tulis). Namun, semua yang biasanya digunakan telah ditulis oleh orang lain, dan menciptakan kembali roda tidak dapat ditulis dengan baik oleh orang lain. Kali ini, saya menemukan area yang tampak kosong. Jadi saya membuat keputusan yang sangat serius untuk menjadikannya open source. Sebagian besar aplikasi lanjutan Bezier di gayhub adalah implementasi Android. Masih banyak tempat di bidang front-end yang dapat diperluas. Diskusi dipersilakan~ Banyak kritik!

Alamat proyek: di sini✨✨

Alamat situs pengujian: Pastikan untuk masuk dan bermain✨✨✨

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.