لمعالجة البكسل في HTML5 ، تحتاج إلى استخدام وظيفتين getimagedata و putimagedata. استخدم أولاً getImagedata لنسخ بيانات البكسل في قماش القماش ، ثم معالجة بيانات البكسل التي تم الحصول عليها ، وأخيراً الصق البيانات المعالجة في قماش القماش من خلال putimagedata . قد ندعو أيضًا عملية معالجة وحدات البكسل في المعالجة الدفعة في الوسط. نظرًا لأن نسخ وحدات البكسل التي تستغرق وقتًا تستغرق وقتًا طويلاً ، من أجل معالجة وحدات البكسل بشكل أكثر كفاءة ، يجب علينا معالجة أكبر قدر ممكن من بيانات البكسل في عملية الدُفعات لتقليل العمليتين لنسخ وحدات البكسل.
هذا يبدو وكأنه عملية مزعجة للغاية. قد يكون بعض الأصدقاء صبرًا بمجرد رؤية الجمل أعلاه. في الواقع ، أعتقد ذلك ، لذلك قمت بتغليف هذه العملية المزعجة في فئة lbitmapdata في محرك Lufylegend. يمكنك التعامل مع قماش في HTML5 مثل وحدات البكسل في الفلاش. ألا يبدو هذا مثيرًا للاهتمام؟ إذا كنت مهتمًا ، فيرجى متابعتي لإلقاء نظرة على هذه الميزة الصغيرة الممتعة. أولاً ، دعنا نتعرف على lbitmapdata ، والتي تستخدم عادة لحفظ كائنات الصورة. لن أتحدث عن الاستخدام المحدد. يمكنك إلقاء نظرة على وثائق API. هنا سأقدم بشكل أساسي كيفية استخدامه لدعم وحدات البكسل.
فيما يلي وظيفتان في lbitmapdata
| وظيفة | وظيفة |
|---|
| getPixel (x ، y ، colortype) | إرجاع صفيف يمثل قيم Pixel RGB في كائن BitmapData في نقطة محددة (x ، y). حيث يكون Colortype هو تنسيق بيانات البكسل المراد استردادها ، والافتراضي هو صفيف بكسل. عند ضبطه على رقم سلسلة ، فإنه يعيد بكسل من نوع الرقم. |
| setpixel (x ، y ، البيانات) | يضع بكسل واحد من كائن LbitMapdata. عندما تكون البيانات قيمة بكسل (تدعم ثلاثة تنسيقات: صفيف البكسل ، #ff0000 ، 0xFF000 ، إلخ) |
وظيفتان أعلاه هي الحصول على بكسل وتعيين واحد. عندما نحتاج إلى الحصول على بكسل أو تعيينه في منطقة في وقت واحد ، فإن وظيفتين المقابلتين هي كما يلي
| وظيفة | وظيفة |
|---|
| getPixels (Rect) | إرجاع صفيف يمثل قيم Pixel RGB في منطقة معينة في كائن BitmapData. حيث Rect هو كائن lrectangle ، وهو مستطيل. |
| setPixels (Rect ، البيانات) | يحول ومعالجة صفيف بيانات البكسل إلى منطقة المستطيل المحددة. عندما تكون البيانات قيمة بكسل (تدعم ثلاثة تنسيقات: صفيف البكسل ، #ff0000 ، 0xFF000 ، إلخ) |
دعنا نعد صورة أولاً ، مثل الرمزية الوسيم لرجلتي أدناه ، لا تتقيأ ...
إذا كنت ترغب في نسخ الوجه الوسيم في الوسط من خلال getPixels ، يمكنك القيام بذلك مثل هذا
[JavaScript] عرض Claincopy
- bitmapdata = newLbitMapData (imglist [face]) ؛
- bitmapdata.lock () ؛
- varimg = bitmapdata.getPixels (NewLRectangle (75،50،100،100)) ؛
في بعض الأحيان نحتاج إلى نسخ ولصق وحدات البكسل على Lbitmapdata عدة مرات. في هذا الوقت ، يمكننا استخدام وظيفة القفل ، والتي يمكن أن تقوم بتخزين صفيف البكسل. في هذه العملية ، يتم تشغيل جميع عمليات البيكسل التي تم إجراؤها على صفيف ذاكرة التخزين المؤقت هذه. بعد الانتهاء من العملية ، يتم استدعاء وظيفة إلغاء القفل المقابلة لصق بيانات Pixel العملية مرة أخرى في LBITMAPDATA.
على سبيل المثال ، كما هو موضح أدناه ، فإننا نلصق جزءًا من المصفوفة النسخ إلى أربعة مواقع مختلفة في Lbitmapdata أخرى في أربع مرات.
[JavaScript] عرض Claincopy
- 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 إلى كائن قماش ، والذي يمكن أن يحسن كفاءة عمليات البكسل.
تأثير رمز التنفيذ على النحو التالي
بالطبع ، يمكنك أيضًا القيام ببعض المعالجة على هذه وحدات البكسل ، مثل ما يلي
[JavaScript] عرض Claincopy
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 ، تحتاج فقط إلى تعيين Scalex خاصية الكائن على -1 لتحقيق قلب الصورة. هنا نظهر بشكل أساسي أن معالجة البكسل مرنة للغاية.
حسنًا ، مع المقدمة أعلاه ، يمكننا استخدام واجهات برمجة التطبيقات هذه لإنشاء تأثير جسيمات بارد ، والتأثير هو كما يلي.
أولاً ، دعنا نضيف نصًا إلى القماش
[JavaScript] عرض Claincopy 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) ؛ التأثير على النحو التالي الوحيدة التي تحتاج إلى شرح أعلاه هي الأسطر التالية
[JavaScript] عرض Claincopy varw = labeltext.getWidth ()*1.1 ؛ varh = labeltext.size*1.5 ؛ labeltext.width = w ؛ labeltext.setwordwrap (true ، 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 (الثلج) ؛ backlayer.addchild (صورة نقطية) ؛ النقطة الرئيسية هنا. أحتاج الآن إلى معالجة وحدات البكسل الخاصة بكائن الثلج. هذا بسيط ، يمكننا تنفيذه من خلال Enter_Frame. [JavaScript] عرض ٪ 20plaincopy Backlayer.AdDeventListener (levent.enter_frame ، Run) ؛ كما ترون في العروض المذكورة أعلاه ، أحتاج إلى إضافة جزيئات بيضاء باستمرار إلى القماش ، تمامًا مثلما يتساقط. ومع ذلك ، لا يمكن رسم هذه الجسيمات البيضاء مباشرة على القماش. نحتاج إلى إضافة هذه الجسيمات إلى صفيف ذاكرة التخزين المؤقت أولاً ، ثم تشغيلها على دفعات. يتم استخدام الوظيفة التالية لإنشاء جسيم ، والمعلمات هي (إحداثيات X ، إحداثيات Y ، تسارع الهبوط ، سرعة اتجاه المحور السيني ، وسرعة اتجاه المحور ص). [JavaScript] عرض ٪ 20plaincopy جسيمات الدالة (PX ، PY ، PS ، PVX ، PVY) { if (typeofps == غير محددة) 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 ++) { إذا (بكسل [i]) returntrue ؛ } ReturnFalse } المبدأ هو الحصول على وحدات البكسل من نقطة الإحداثيات ثم التحقق من لون نقاط البكسل. أنت تعرف الآن لماذا تحتاج إلى تحويل النص السابق إلى كائن LbitMapData ، فقط للحصول على قيمة البكسل للنقطة المحددة. أخيرًا ، تحتاج فقط إلى إضافة جزيئات بيضاء باستمرار ثم السماح للجزيئات بالاستمرار في تسريع الحركة الهبوطية. [JavaScript] عرض ٪ 20plaincopy FunctionRun () { varn = _snow.length ، d ؛ Snowback.lock () ؛ Snowback.setPixels (Rect ، 0x000000) ؛ بينما (n-) { varp = _snow [n] ؛ P.vy+= Gravity*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 () ؛ ن = 10 ؛ بينما (n-) { partial (Math.Random ()*lglobal.width ، 0 ، Math.Random ()+0.5) ؛ } } حسنًا ، تم تنفيذ الوظيفة. في المثال أعلاه ، تم إصلاح النص [lufylegend.js] ، ويمكننا زيادة توسيعه لتعيين النص ليتم عرضه من خلال عنوان URL. يمكن استخدام الوظيفة التالية للحصول على قيمة المعلمة في عنوان URL. [JavaScript] عرض ٪ 20plaincopy وظيفة paregetParameter (مفتاح) { 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 الجميع رسم تخطيطي للتكاثر
رمز المصدر في الواقع ، هناك رمز مصدر في حزمة تنزيل محرك Lufylegend ، ولكنه يختلف قليلاً عن هذه المقالة. رمز المصدر في هذه المقالة يحتوي فقط على ملف HTML واحد. يمكنك رؤية الكود المصدر الكامل بالنقر بزر الماوس الأيمن على المتصفح. حسنًا ، بعد ذلك ، يرجى استخدام خيالك لإنشاء المزيد من تأثيرات الجسيمات وسيم ومثيرة للاهتمام ، مثل تأثيرات الجسيمات الأكثر خاصة أدناه.
http://lufylegend.com/demo/particle01/
موقع Lufylegend.js المحرك الرسمي http://lufylegend.com/lufylegend
