สำหรับการประมวลผลพิกเซลใน HTML5 คุณต้องใช้สองฟังก์ชั่น getImagedata และ putimagedata ใช้ครั้งแรก getImagedata เพื่อคัดลอกข้อมูลพิกเซลในผืนผ้าใบผ้าใบจากนั้นประมวลผลข้อมูลพิกเซลที่ได้รับและในที่สุดก็ วางข้อมูลที่ประมวลผลลงในผืนผ้าใบผ่าน Putimagedata เราอาจเรียกกระบวนการประมวลผลพิกเซลในการประมวลผลชุดพิกเซลกลาง เนื่องจากการคัดลอกและวางพิกเซลเป็นกระบวนการที่ใช้เวลานานสองกระบวนการเพื่อประมวลผลพิกเซลได้อย่างมีประสิทธิภาพมากขึ้นเราควรประมวลผลข้อมูลพิกเซลให้ได้มากที่สุดเท่าที่จะทำได้ในกระบวนการแบทช์เพื่อลดการดำเนินการทั้งสองของการคัดลอกและวางพิกเซล
ฟังดูเป็นกระบวนการที่ลำบากมาก เพื่อนบางคนอาจใจร้อนเพียงแค่เห็นประโยคข้างต้น อันที่จริงฉันคิดอย่างนั้นดังนั้นฉันจึงห่อหุ้มกระบวนการที่ลำบากนี้ลงในคลาส Lbitmapdata ในเครื่องยนต์ Lufylegend คุณสามารถจัดการผ้าใบใน HTML5 เช่นพิกเซลในแฟลช เสียงนี้ไม่น่าสนใจมากเหรอ? หากคุณสนใจโปรดติดตามฉันเพื่อดูคุณสมบัติเล็ก ๆ น้อย ๆ ที่สนุกนี้ ก่อนอื่นให้ทำความรู้จักกับ lbitmapdata ซึ่งมักจะใช้เพื่อบันทึกวัตถุภาพ ฉันจะไม่พูดถึงการใช้งานที่เฉพาะเจาะจง คุณสามารถดูเอกสาร API ได้ ที่นี่ฉันจะแนะนำวิธีการใช้กับพิกเซลกระบวนการเป็นชุด
ด้านล่างเป็นสองฟังก์ชั่นใน lbitmapdata
| การทำงาน | การทำงาน |
|---|
| getPixel (x, y, colortype) | ส่งคืนอาร์เรย์ที่แสดงถึงค่าพิกเซล RGB ในวัตถุ bitmapdata ที่จุดเฉพาะ (x, y) ในกรณีที่ colortype เป็นรูปแบบของข้อมูลพิกเซลที่จะดึงและค่าเริ่มต้นคืออาร์เรย์พิกเซล เมื่อตั้งค่าเป็นหมายเลขสตริงจะส่งคืนพิกเซลของประเภทตัวเลข |
| SetPixel (x, y, data) | ตั้งค่าพิกเซลเดียวของวัตถุ LBITMAPDATA โดยที่ข้อมูลคือค่าพิกเซล (รองรับสามรูปแบบ: Pixel Array, #FF0000, 0xff000 ฯลฯ ) |
ฟังก์ชั่นสองฟังก์ชั่นข้างต้นคือการได้รับและตั้งค่าพิกเซลเดียว เมื่อเราต้องการรับหรือตั้งค่าพิกเซลในพื้นที่ในครั้งเดียวฟังก์ชั่นสองฟังก์ชั่นที่สอดคล้องกันมีดังนี้
| การทำงาน | การทำงาน |
|---|
| getPixels (rect) | ส่งคืนอาร์เรย์ที่แสดงถึงค่าพิกเซล RGB ในพื้นที่เฉพาะในวัตถุ bitmapdata โดยที่ rect เป็นวัตถุ lrectangle ซึ่งเป็นสี่เหลี่ยมผืนผ้า |
| SetPixels (rect, data) | แปลงและวางอาร์เรย์ข้อมูลพิกเซลเป็นพื้นที่สี่เหลี่ยมที่ระบุ โดยที่ข้อมูลคือค่าพิกเซล (รองรับสามรูปแบบ: Pixel Array, #FF0000, 0xff000 ฯลฯ ) |
มาเตรียมภาพก่อนเช่นอวตารที่หล่อเหลาของคนของฉันด้านล่างอย่าอาเจียน ...
หากคุณต้องการคัดลอกหน้าหล่อตรงกลางผ่าน getPixels คุณสามารถทำได้เช่นนี้
[javascript] ดู plaincopy
- bitmapdata = newlbitmapdata (imglist [face]);
- bitmapdata.lock ();
- varimg = bitmapdata.getPixels (newLrectangle (75,50,100,100));
บางครั้งเราจำเป็นต้องคัดลอกและวางพิกเซลบน lbitmapdata หลายครั้ง ในเวลานี้เราสามารถใช้ฟังก์ชั่นล็อคซึ่งสามารถแคชอาร์เรย์พิกเซล ในกระบวนการนี้การดำเนินการพิกเซลทั้งหมดที่ทำจะดำเนินการในอาร์เรย์แคชนี้ หลังจากการดำเนินการเสร็จสมบูรณ์ฟังก์ชั่นปลดล็อคที่สอดคล้องกันจะถูกเรียกให้วางข้อมูลการดำเนินการพิกเซลกลับเข้าสู่ lbitmapdata
ตัวอย่างเช่นดังที่แสดงไว้ด้านล่างเราวางส่วนหนึ่งของอาร์เรย์ที่คัดลอกออกเป็นสี่ตำแหน่งที่แตกต่างกันใน LBITMAPDATA อื่นในสี่ครั้ง
[javascript] ดู 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 ();
รหัสข้างต้นแรกสร้างวัตถุ LBITRMAPDATA ที่ว่างเปล่า พารามิเตอร์สุดท้ายเป็นคุณสมบัติใหม่ในเวอร์ชัน Lufylegend-1.8.8 การแปลงข้อมูลที่บันทึกไว้ในวัตถุ LBITRMAPDATA เป็นวัตถุ Canvas ซึ่งสามารถปรับปรุงประสิทธิภาพของการดำเนินการพิกเซล
เอฟเฟกต์รหัสดำเนินการมีดังนี้
แน่นอนคุณสามารถทำการประมวลผลบนพิกเซลเหล่านี้ได้เช่นต่อไปนี้
[javascript] ดู plaincopy
bitmapdata2.lock (); VARRECT = NEWLRECTANGLE (50,100,100,100); VARRECT1 = NEWLRECTANGLE (150,100,100,100); สำหรับ (vary = 0; y <rect.height; y ++) { สำหรับ (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]); - - สำหรับ (vary = 0; y <rect1.height; y ++) { สำหรับ (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 (); เอฟเฟกต์มีดังนี้ อย่างที่คุณเห็นเราประสบความสำเร็จในการพลิกรูปภาพโดยการประมวลผลพิกเซล
แน่นอนว่าการพลิกรูปภาพไม่จำเป็นต้องลำบาก ในเครื่องยนต์ lufylegend.js คุณจะต้องตั้งค่าคุณสมบัติของวัตถุเป็น -1 เพื่อให้ได้ภาพพลิกรูปภาพ ที่นี่เราแสดงให้เห็นว่าการประมวลผลพิกเซลมีความยืดหยุ่นมาก
โอเคด้วยการแนะนำข้างต้นเราสามารถใช้ API เหล่านี้เพื่อสร้างเอฟเฟกต์อนุภาคเย็นเอฟเฟกต์มีดังนี้
ก่อนอื่นมาเพิ่มข้อความลงในผืนผ้าใบกันเถอะ
[javascript] ดู 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 (จริง, h); labeltext.x = (lglobal.width-w)*0.5; labeltext.y = (lglobal.height-h)*0.5; backlayer = newLsprite (); addchild (backlayer); backlayer.addchild (labeltext); เอฟเฟกต์มีดังนี้ สิ่งเดียวที่ต้องอธิบายข้างต้นคือบรรทัดต่อไปนี้
[javascript] ดู plaincopy varw = labeltext.getWidth ()*1.1; varh = labeltext.size*1.5; labeltext.width = w; labeltext.setwordwrap (จริง, h); ในความเป็นจริงคุณจะต้องใช้ getWidth () และ getheight () เพื่อให้ได้ความสูงและความกว้างของข้อความ อย่างไรก็ตามเนื่องจากไม่มีฟังก์ชั่นที่จะได้รับความสูงของข้อความในผืนผ้าใบเครื่องยนต์จึงใช้วิธีที่ไม่ถูกต้องในการรับ (แน่นอนสิ่งนี้จะได้รับการแก้ไขอย่างสมบูรณ์แบบในการอัปเดตครั้งต่อไปของเครื่องยนต์) ในการพัฒนานี้ความสูงของข้อความและความกว้างที่ใช้จะต้องไม่น้อยกว่าขนาดดั้งเดิมของข้อความดังนั้นฉันจึงรีเซ็ตความสูงและความกว้างที่ใหญ่กว่าเล็กน้อยสำหรับข้อความ ต่อไปเราใช้ฟังก์ชั่นการวาดของวัตถุ LBITMAPDATA เพื่อแปลงข้อความนี้เป็นวัตถุ LBITMAPDATA ทำไมเราต้องแปลงเป็นวัตถุ lbitmapdata? โปรดดูต่อไปและคุณจะรู้ในขณะที่
[javascript] ดู%20plaincopy bitmapdata = newlbitmapdata (#000000,0,0, lglobal.width, lglobal.height, lbitmapdata.data_canvas); bitmapdata.draw (backlayer); การประมวลผลข้างต้นเป็นเรื่องจริงไม่ใช่สำหรับการแสดงผลจริง มาสร้างวัตถุว่างเปล่า lbitmapdata และวาดลงบนผืนผ้าใบผ่าน LBITMAP [javascript] ดู%20plaincopy Snowback = newlbitmapdata (null, 0,0, lglobal.width, lglobal.height, lbitmapdata.data_canvas); varbitMap = newLBITMAP (SnowBack); backlayer.addchild (บิตแมป); ประเด็นสำคัญคือที่นี่ ตอนนี้ฉันต้องประมวลผลพิกเซลของวัตถุหิมะอย่างต่อเนื่อง นี่เป็นเรื่องง่ายเราสามารถนำไปใช้ผ่าน enter_frame [javascript] ดู%20plaincopy backlayer.addeventListener (levent.enter_frame, Run); อย่างที่คุณเห็นในการเรนเดอร์ข้างต้นฉันต้องเพิ่มอนุภาคสีขาวลงในผืนผ้าใบอย่างต่อเนื่องเหมือนหิมะตก อย่างไรก็ตามอนุภาคสีขาวเหล่านี้ไม่สามารถวาดได้โดยตรงบนผืนผ้าใบ เราจำเป็นต้องเพิ่มอนุภาคเหล่านี้ลงในอาร์เรย์แคชก่อนจากนั้นใช้งานเป็นแบทช์ ฟังก์ชั่นต่อไปนี้ใช้ในการสร้างอนุภาคและพารามิเตอร์คือ (พิกัด x, พิกัด y, การเร่งความเร็วเชื้อสาย, ความเร็วทิศทางแกน x และความเร็วทิศทางแกน y) [javascript] ดู%20plaincopy functionParticle (px, py, ps, pvx, pvy) { if (typeofps == undefined) ps = 1; if (typeofpvx == undefined) pvx = 0; if (typeofpvy == undefined) pvy = 0; _snow.push ({x: px, y: py, s: ps, vx: pvx, vy: pvy}); - ด้วยการเรียกฟังก์ชั่นนี้อย่างต่อเนื่องเราจะเพิ่มอนุภาคสีขาวลงในผืนผ้าใบอย่างต่อเนื่อง อนุภาคที่เพิ่มเข้ามาในผืนผ้าใบจะเร่งการเคลื่อนไหวลงคล้ายกับการตกฟรี ในระหว่างการเคลื่อนไหวเราจะพบกับอุปสรรคนั่นคือข้อความที่แสดงบนหน้าจอก่อนหน้านี้เมื่ออนุภาคพบข้อความพวกเขาจะต้องต่อต้านและการเคลื่อนไหวจะช้า ด้วยวิธีนี้อนุภาคจะถูกขัดขวางโดยข้อความในสถานที่ที่มีข้อความและอนุภาคสีขาวจำนวนมากจะรวมตัวกันในข้อความซึ่งเป็นผลกระทบของอนุภาคด้านบน ฟังก์ชั่นต่อไปนี้ใช้เพื่อตรวจสอบว่าพิกัดที่ระบุอยู่ในข้อความ [javascript] ดู%20plaincopy FunctionCheckPixel (x, y) { varpixel = bitmapdata.getPixel (x, y); สำหรับ (vari = 0; i <pixel.length; i ++) { ถ้า (Pixel [i]) returntrue; - returnfalse; - หลักการคือการได้รับพิกเซลของจุดพิกัดจากนั้นตรวจสอบสีของจุดพิกเซล ตอนนี้คุณรู้แล้วว่าทำไมคุณต้องแปลงข้อความก่อนหน้าเป็นวัตถุ lbitmapdata เพียงเพื่อรับค่าพิกเซลของจุดที่ระบุ ในที่สุดคุณจะต้องเพิ่มอนุภาคสีขาวอย่างต่อเนื่องจากนั้นปล่อยให้อนุภาคยังคงเร่งการเคลื่อนไหวลง [javascript] ดู%20plaincopy functionRun () { varn = _snow.length, d; Snowback.lock (); Snowback.setPixels (rect, 0x000000); ในขณะที่ (n-) { varp = _snow [n]; p.vy+= แรงโน้มถ่วง*ps; P.Y+= P.VY; if (pheckpixel (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; ในขณะที่ (n-) { บางส่วน (math.random ()*lglobal.width, 0, math.random ()+0.5); - - ตกลงงานเสร็จแล้ว ในตัวอย่างข้างต้นข้อความ [lufylegend.js] ได้รับการแก้ไขและเราสามารถขยายเพิ่มเติมเพื่อตั้งค่าข้อความที่จะแสดงผ่าน URL ฟังก์ชั่นต่อไปนี้สามารถใช้เพื่อรับค่าของพารามิเตอร์ใน URL [javascript] ดู%20plaincopy functiongetParameter (คีย์) { varstr = location.search.split (?); if (str.length <2) { กลับ; - varparams = str [1] .split (&); สำหรับ (vari = 0; i <params.length; i ++) { varkeyval = params [i] .split (=); if (keyval [0] == key && keyval.length == 2) { returnDecodeuricomponent (keyval [1]); - - กลับ; - จากนั้นเรียกใช้ฟังก์ชันนี้เพื่อตั้งค่าของข้อความ [javascript] ดู%20plaincopy labeltext.text = getParameter (k); โอเคคุณสามารถทดสอบได้ URL ต่อไปนี้คุณสามารถเปลี่ยนข้อความต่อไปนี้เป็นอักขระใด ๆ ที่คุณต้องการ http://lufylegend.com/demo/snow_word/index.html?k=hello ทุกคน แผนผังการสืบพันธุ์
รหัสต้นฉบับ ในความเป็นจริงมีซอร์สโค้ดในแพ็คเกจดาวน์โหลด Engine Lufylegend แต่แตกต่างจากบทความนี้เล็กน้อย ซอร์สโค้ดในบทความนี้มีไฟล์ HTML เพียงไฟล์เดียว คุณสามารถดูซอร์สโค้ดที่สมบูรณ์โดยคลิกขวาที่เบราว์เซอร์ โอเคถัดไปโปรดใช้จินตนาการของคุณเพื่อสร้างเอฟเฟกต์ที่หล่อและน่าสนใจยิ่งขึ้น เช่นเอฟเฟกต์อนุภาคพิเศษด้านล่าง
http://lufylegend.com/demo/particle01/
lufylegend.js engine ทางการอย่างเป็นทางการ http://lufylegend.com/lufylegend
