วันสองวันนี้เริ่มปรับโครงสร้าง + ทำของในแล็ปหลายอย่างเริ่มใช้งานได้ เลยเอามาเล่าในบล็อกแล้วกัน ขี้เกียจโพสในเฟสเพราะมันจัดรูปแบบไม่ได้ - เริ่มจากงานปรับปรุงตีมบล็อกในส่วนของภาพกันต่อ ตอนนี้แก้ปัญหารูปพาบล็อกแหกได้สำเร็จแต่ก็กระทบต่อภาพที่ใช้คลาส EpCover ด้วย เพราะดันใช้ Width = 100% เลยทำให้ภาพยืด แต่ก็ไม่มีปัญหามากนักถือว่าใช้ได้ทีเดียว - อันนี้เป็นงานแล็ปที่ทำซัก 2 - 3 วัน เป็นการเขียน Event Handler ขึ้นมาให้กับ Javascript

// Object ทดสอบ ประกอบด้วย Ev และ En มีค่าเป็น null (ว่างปล่าว) var Ort = { Ev:null, En:null }; // Handlers เป็นคลาสที่ทำขึ้นมา Manage Handle ทั้งหลาย // ทำการเรียกฟังค์ชั่น Handle ออกมาเพื่อทำการ Handle Event ซึ่งค่าที่ส่งไปก็มี Object ชื่อEvent และ ฟังค์ชั่นหรือกลุ่มฟังค์ชั่นครับ // ฟังค์ชั่นทดสอบ โดยให้สร้างป๊อปอัพบอกว่า Ok 3 ตามด้วยบอกว่ามาจากอีเวนท์อะไร และป๊อบอัพ Ok 4 เช่นเดียวกับ Ok 3 Handlers.Handle(Ort, "Ev", [function (Add){ alert("Ok 3 from " + Add); }, function (Add){ alert("Ok 4 from " + Add); }]); // ฟังค์ชั่นทดสอบ Ok5 ก็เช่นเดียวกับ 3 และ 4 เพียงแต่ให้ Call5 เป็นตัวอ้างอิงค์ var Call5 = function (Add){ alert("Ok 5 from " + Add); } // ทดสอบการเพิ่ม Handler ฟังค์ชั่น Call5 ให้กับ Object Ort, Event Ev ครับ Handlers.Add(Ort, "Ev", Call5); // สามารถเพิ่มทีละเยอะก็ได้เพี่งแค่ยัดลง Array ส่งเข้าไปแทน เช่น Handlers.Add(Ort, "Ev", [Call5, Call6, Call7]); // ทดสอบการ Remove Handler โดยที่ 1 ก็คือ Handler Index ของ Event Ev ซึ่งคือ Ok 4 นั่นเอง ส่วน Call5 ก็อ้างอิงจากข้างบน Handlers.Del(Ort, "Ev", 1); Handlers.Del(Ort, "Ev", Call5); // จริงๆสามารถเรียนรวมกันแบบนี้ก็ได้ Handlers.Del(Ort, "Ev", [1, Call5]); แต่เดียวคนทดสอบจะงงเองซะก่อน หุหุ Handlers.Handle(Ort, "En", function (Add){ alert("Ok 6 from " + Add); }); // Cls เป็นคำสั่ง Clear Handlers ที่ทำการ Handle อีเวนท์นั้นๆนั่นเองครับ Handlers.Cls(Ort, "En"); //ทดสอบการเรียกอีเว้นพร้อมส่งค่า ซึ่งก็เหลือเพียง Ok 3 นอกนั้นโดนเก็บเรียบหมดแล้ว ฮาๆ Ort.Ev("Ev"); Ort.En("En"); // ฟังค์ชั่นใน Handlers ที่ไม่ได้อยู่ในการทดสอบนี้ได้แก่ // Get เป็นคำสั่งเรียก Handler ที่ทำการ Handle อีเวนท์นั้นๆทั้งหมดออกมา // Rid เป็นคำสั่งถอดการ Handle ออกจากอีเวนท์นั้นๆไปเลย ส่งผลให้อีเวนท์นั้นมีค่าเป็น null (อารมณ์เหมือนการ Dispose)

- สุดท้ายก็เป็นงานแล็ปที่พึงทำ เป็นการทดสอบการ Render ภาพใน Canvas (Element ตัวใหม่ใน Html 5 ) ภาพด้านล่างนี้เป็นการสร้าง Canvas ขนาด 300x100 px แล้วทำการ Render แยกเป็น 3 ส่วน จากนั้นแปลงเป็น Jpeg ฐาน64 ส่งเข้า Img โดยฐานสีเดิมมาจาก สีแดง Opacity 100% ถูกวางซ้อนด้วยสีฟ้า Opacity 50% ณ ขนาด 2/3 ซ้อน 1/3 แต่ว่าต้องแปลงเป็น Png ซึ่งขนาดใหญ่เลยแก้ดังที่กล่าวไปข้างบนแหละครับ

Comment

Comment:

Tweet

Richter View my profile