Untuk pemrosesan pixel di HTML5, Anda perlu menggunakan dua fungsi getImagedata dan putimagedata. Penggunaan pertama getImagedata untuk menyalin data piksel di kanvas kanvas, kemudian memproses data piksel yang diperoleh, dan akhirnya menempelkan data yang diproses ke kanvas kanvas melalui putimageData . Kami mungkin juga menyebut proses pemrosesan piksel di tengah pemrosesan batch piksel. Karena menyalin dan menempel piksel adalah dua proses yang memakan waktu, untuk memproses piksel secara lebih efisien, kami harus memproses data piksel sebanyak mungkin dalam proses batch untuk mengurangi dua operasi penyalinan dan piksel piksel.
Ini terdengar seperti proses yang sangat merepotkan. Beberapa teman mungkin tidak sabar hanya dengan melihat kalimat di atas. Bahkan, saya kira begitu, jadi saya merangkum proses yang merepotkan ini ke dalam kelas lbitmapdata di mesin Lufylegend. Anda dapat menangani kanvas di HTML5 seperti piksel dalam flash. Bukankah ini terdengar sangat menarik? Jika Anda tertarik, ikuti saya untuk melihat fitur kecil yang menyenangkan ini. Pertama, mari kita kenal lbitmapdata, yang biasanya digunakan untuk menyimpan objek gambar. Saya tidak akan berbicara tentang penggunaan khusus. Anda dapat melihat dokumentasi API. Di sini saya terutama akan memperkenalkan cara menggunakannya untuk memproses piksel.
Di bawah ini adalah dua fungsi di lbitmapdata
| fungsi | Fungsi |
|---|
| getpixel (x, y, colortype) | Mengembalikan array yang mewakili nilai piksel RGB dalam objek bitmapdata pada titik tertentu (x, y). di mana colortype adalah format data piksel yang akan diambil, dan standarnya adalah array piksel. Saat diatur ke nomor string, ia mengembalikan piksel jenis angka. |
| setpixel (x, y, data) | Mengatur satu piksel objek lbitmapdata. Di mana data adalah nilai piksel (mendukung tiga format: array piksel, #ff0000, 0xff000, dll.) |
Dua fungsi di atas adalah untuk mendapatkan dan mengatur satu piksel. Ketika kita perlu mendapatkan atau mengatur piksel di area pada satu waktu, dua fungsi yang sesuai adalah sebagai berikut
| fungsi | Fungsi |
|---|
| getpixels (rect) | Mengembalikan array yang mewakili nilai piksel RGB di area tertentu dalam objek bitmapdata. di mana Rect adalah objek lrectangle, yang merupakan persegi panjang. |
| setpixels (rect, data) | Mengonversi dan menempel array data piksel ke area persegi panjang yang ditentukan. Di mana data adalah nilai piksel (mendukung tiga format: array piksel, #ff0000, 0xff000, dll.) |
Mari kita siapkan gambar terlebih dahulu, seperti avatar tampan pria di bawah ini, jangan muntah ...
Jika Anda ingin menyalin wajah tampan di tengah melalui getpixels, Anda bisa melakukannya seperti ini
[JavaScript] Lihat PlainCopy
- bitmapdata = newlbitmapdata (imlist [wajah]);
- bitmapdata.lock ();
- varimg = bitmapdata.getpixels (newlrectangle (75,50.100.100));
Terkadang kita perlu menyalin dan menempelkan piksel di lbitmapdata beberapa kali. Pada saat ini, kita dapat menggunakan fungsi kunci, yang dapat menyimpan array piksel. Dalam proses ini, semua operasi piksel yang dilakukan dioperasikan pada array cache ini. Setelah operasi selesai, fungsi unlock yang sesuai dipanggil untuk menempelkan data piksel operasi kembali ke lbitmapdata.
Misalnya, seperti yang ditunjukkan di bawah ini, kami menempelkan bagian dari array yang disalin ke empat lokasi berbeda di lbitmapdata lain dalam empat kali.
[JavaScript] Lihat PlainCopy
- bitmapData2 = newlbitmapdata (null, 0,0.500.400, lbitmapdata.data_canvas);
- bitmapdata2.lock ();
- bitmapdata2.setpixels (newlrectangle (50,30,50,50), img);
- bitmapdata2.setpixels (newlrectangle (100,30,50,50), img);
- bitmapdata2.setpixels (newlrectangle (150,30,50,50), img);
- bitmapdata2.setpixels (newlrectangle (200,30,50,50), img);
- bitmapdata2.unlock ();
Kode di atas pertama kali membuat objek lbitrmapdata kosong. Parameter terakhir adalah fitur baru dalam versi Lufylegend-1.8.8, mengonversi data yang disimpan dalam objek lbitrmapdata menjadi objek Canvas, yang dapat meningkatkan efisiensi operasi piksel.
Efek kode eksekusi adalah sebagai berikut
Tentu saja, Anda juga dapat melakukan beberapa pemrosesan pada piksel ini, seperti berikut ini
[JavaScript] Lihat PlainCopy
bitmapdata2.lock (); varrect = newlrectangle (50.100.100.100); varrect1 = newlrectangle (150.100.100.100); untuk (vary = 0; y <rect.height; y ++) { untuk (varx = 0; x <rect.width; x ++) { vari = y*4*100+x*4; bitmapdata2.setpixel (rect.x+rect.width-x, y+rect.y, [img.data [i], img.data [i+1], img.data [i+2], img.data [i+3]]); } } untuk (vary = 0; y <rect1.height; y ++) { untuk (varx = 0; x <rect1.width; x ++) { vari = y*4*100+x*4; bitmapdata2.setpixel (x+rect1.x, y+rect1.y, [img.data [i], img.data [i+1], img.data [i+2], img.data [i+3]]); } } bitmapdata2.unlock (); Efeknya adalah sebagai berikut Seperti yang Anda lihat, kami berhasil membalikkan gambar dengan memproses piksel.
Tentu saja, membalik gambar tidak perlu begitu merepotkan. Di mesin lufylegend.js, Anda hanya perlu mengatur skala properti objek ke -1 untuk mencapai flip gambar. Di sini kami terutama menunjukkan bahwa pemrosesan piksel sangat fleksibel.
Oke, dengan pengantar di atas, kita dapat menggunakan API ini untuk menciptakan efek partikel yang keren, efeknya adalah sebagai berikut.
Pertama, mari tambahkan teks ke kanvas
[JavaScript] Lihat PlainCopy varlabeltext = newLtextField (); labeltext.color =#000000; labeltext.weight = Bolder; labeltext.text = getParameter (k); if (! labeltext.text) labeltext.text = lufylegend.js; labeltext.size = 50; varw = labeltext.getWidth ()*1.1; varh = labeltext.size*1.5; labeltext.width = w; labeltext.setWordWrap (true, h); labeltext.x = (lglobal.width-w)*0.5; labeltext.y = (lglobal.height-h)*0,5; backlayer = newLsprite (); addChild (backlayer); backlayer.addchild (labeltext); Efeknya adalah sebagai berikut Satu -satunya yang perlu dijelaskan di atas adalah baris berikut
[JavaScript] Lihat PlainCopy varw = labeltext.getWidth ()*1.1; varh = labeltext.size*1.5; labeltext.width = w; labeltext.setWordWrap (true, h); Bahkan, Anda hanya perlu menggunakan getWidth () dan getHeight () untuk mendapatkan tinggi dan lebar teks. Namun, karena tidak ada fungsi untuk mendapatkan tinggi teks di kanvas, mesin menggunakan cara yang tidak akurat untuk mendapatkannya (tentu saja, ini akan diselesaikan dengan sempurna dalam pembaruan mesin berikutnya). Dalam pengembangan ini, tinggi dan lebar teks yang digunakan harus tidak kurang dari ukuran asli teks, jadi saya mengatur ulang tinggi dan lebar yang sedikit lebih besar untuk teks. Selanjutnya, kami menggunakan fungsi draw dari objek lbitmapdata untuk mengubah teks ini menjadi objek lbitmapdata. Mengapa kita perlu mengubahnya menjadi objek lbitmapdata? Silakan terus melihat ke bawah dan Anda akan tahu sebentar lagi.
[JavaScript] Lihat%20PlainCopy bitmapdata = newlbitmapdata (#000000,0,0, lglobal.width, lglobal.height, lbitmapdata.data_canvas); bitmapdata.draw (backlayer); Pemrosesan di atas sebenarnya adalah awal, bukan untuk tampilan nyata. Mari kita buat objek kosong lbitmapdata dan gambarkan di kanvas kanvas melalui lbitmap. [JavaScript] Lihat%20PlainCopy snowback = newlbitmapdata (null, 0,0, lglobal.width, lglobal.height, lbitmapdata.data_canvas); varbitmap = newlbitmap (snowback); backlayer.addchild (bitmap); Poin kuncinya ada di sini. Sekarang saya perlu terus memproses piksel objek snowback. Ini sederhana, kita dapat mengimplementasikannya melalui enter_frame. [JavaScript] Lihat%20PlainCopy backlayer.addeventListener (levent.enter_frame, run); Seperti yang dapat Anda lihat di rendering di atas, saya harus terus -menerus menambahkan partikel putih ke kanvas, sama seperti turun salju. Namun, partikel putih ini tidak dapat ditarik langsung di atas kanvas. Kita perlu menambahkan partikel -partikel ini ke array cache terlebih dahulu, dan kemudian mengoperasikannya dalam batch. Fungsi berikut digunakan untuk menghasilkan partikel, dan parameternya adalah (koordinat x, koordinat y, akselerasi keturunan, kecepatan arah sumbu x, dan kecepatan arah sumbu y). [JavaScript] Lihat%20PlainCopy functionParticle (px, py, ps, pvx, pvy) { if (typeofps == tidak terdefinisi) ps = 1; if (typeofpvx == tidak terdefinisi) pvx = 0; if (typeofpvy == tidak terdefinisi) pvy = 0; _snow.push ({x: px, y: py, s: ps, vx: pvx, vy: pvy}); } Dengan terus -menerus menyebut fungsi ini, kami terus -menerus menambahkan partikel putih ke kanvas. Partikel -partikel yang ditambahkan ke kanvas akan mempercepat gerakan ke bawah yang mirip dengan jatuh bebas. Selama gerakan, kita akan menghadapi hambatan, yaitu, teks yang ditampilkan di layar sebelumnya, ketika partikel menemukan teks, mereka akan tunduk pada ketahanan dan gerakan menjadi lambat. Dengan cara ini, partikel -partikel terus terhalang oleh teks di tempat -tempat dengan teks, dan sejumlah besar partikel putih akan berkumpul dalam teks, membentuk efek partikel di atas. Fungsi berikut digunakan untuk memeriksa apakah koordinat yang ditentukan ada di teks [JavaScript] Lihat%20PlainCopy functionCheckPixel (x, y) { varpixel = bitmapdata.getpixel (x, y); untuk (vari = 0; i <pixel.length; i ++) { if (pixel [i]) returntrue; } returnfalse; } Prinsipnya adalah untuk mendapatkan piksel titik koordinat dan kemudian periksa warna titik piksel. Sekarang Anda tahu mengapa Anda perlu mengubah teks sebelumnya menjadi objek lbitmapdata, hanya untuk mendapatkan nilai piksel dari titik yang ditentukan. Akhirnya, Anda hanya perlu secara konstan menambahkan partikel putih dan kemudian memungkinkan partikel untuk terus mempercepat gerakan ke bawah. [JavaScript] Lihat%20PlainCopy functionRun () { varn = _snow.length, d; snowback.lock (); snowback.setpixels (Rect, 0x000000); while (n-) { varp = _snow [n]; p.vy+= gravitasi*ps; p.y+= p.vy; if (checkpixel (px, py)) { py- = p.vy; p.vy = 0; p.y+= 0,2; } snowback.setpixel (px, py, 0xffffffff); if (py> lglobal.height) { _snow.splice (n, 1); } } snowback.unlock (); n = 10; while (n-) { parsial (math.random ()*lglobal.width, 0, math.random ()+0.5); } } Oke, pekerjaan sudah selesai. Dalam contoh di atas, teks [lufylegend.js] diperbaiki, dan kita dapat lebih lanjut memperluasnya untuk mengatur teks yang akan ditampilkan melalui URL. Fungsi berikut dapat digunakan untuk mendapatkan nilai parameter di URL. [JavaScript] Lihat%20PlainCopy functionGarParameter (key) { varstr = location.search.split (?); if (str.length <2) { kembali; } varparams = str [1] .split (&); untuk (vari = 0; i <params.length; i ++) { varkeyval = params [i] .split (=); if (keyval [0] == key && keyval.length == 2) { returnDecodeuricomponent (keyval [1]); } } kembali; } Kemudian panggil fungsi ini untuk mengatur nilai teks [JavaScript] Lihat%20PlainCopy labeltext.text = getParameter (k); Oke, Anda bisa mengujinya. URL berikut, Anda dapat mengubah teks berikut menjadi karakter apa pun yang Anda sukai http://lufylegend.com/demo/snow_word/index.html?k=hello semuanya Diagram reproduksi
Kode Sumber Bahkan, ada kode sumber dalam paket unduhan mesin Lufylegend, tetapi sedikit berbeda dari artikel ini. Kode sumber dalam artikel ini hanya memiliki satu file HTML. Anda dapat melihat kode sumber lengkap dengan mengklik kanan browser. Oke, selanjutnya, silakan gunakan imajinasi Anda untuk menciptakan efek partikel yang lebih tampan dan menarik, seperti efek partikel yang lebih istimewa di bawah ini.
http://lufylegend.com/demo/particle01/
Situs Resmi Mesin Lufylegend.js http://lufylegend.com/lufylegend
