VDO บทที่ 12 - สร้างแอพวาดเขียนรูป

คุณสมบัติของแอพ

ในบทนี้ จะสอนสร้างแอพวาดรูปด้วยการใช้นิ้วแทนพู่กัน โดยใช้คอมโพเนนต์ Canvas และในส่วนของ User Interface ก็จะมีปุ่มต่างๆ สำหรับ

• กำหนดสีของพู่กัน โดยเมื่อคลิ้กปุ่มนี้ แอพก็จะแสดงแถบซึ่งมี slider อีก 3 อันในการผสมสี RGB หรือ แดง เขียว น้ำเงิน เพื่อให้ได้สีที่ตามต้องการ
• ปรับขนาดเส้นของพู่กัน โดยตัวเลขที่อยู่ข้างๆ ปุ่มนั้น คือขนาดของพู่กัน หน่วยเป็นพิกเซล เมื่อคลิ้กปุ่มนี้ ขนาดของพู่กัน ก็จะใหญ่ขึ้น แต่เมื่อถึงขนาด 5 พิกเซล ก็จะกลับมาเป็นขนาด 1 พิกเซล
• ลบรูปที่วาด โดยจะแสดงไดอะล็อก เพื่อยืนยันว่าจะลบหรือไม่
• บันทึกภาพวาดลงในเครื่อง เมื่อคลิ้กปุ่มนี้ ก็จะมีไดอะล็อกปรากฏขึ้นมา เพื่อแจ้งว่า ไฟล์ภาพที่ save ไว้อยู่ที่ไหน ชื่อไฟล์อะไร

ที่สำคัญ บทนี้มีการสอนใช้งาน Procedure เพื่อลดความซ้ำซ้อนของ code และทำให้การเขียน code มีประสิทธิภาพมากขึ้น ซึ่งเป็นวิธีปฎิบัติที่ดีในการเขียน code

คอมโพเนนต์ที่กล่าวถึง

• Canvas เป็นคอมโพเนนต์สำหรับการวาดเส้น และทำภาพเคลื่อนไหว โดยเฉพาะ แต่ในบทนี้ เราจะเน้นไปที่การวาดเส้นก่อน
• Slider ในบทนี้ ใช้ Slider มากำหนดค่าสี RGB เพื่อผสมสีให้ได้ตามต้องการ
• Notifier ใช้แสดงไดอะล็อกแบบต่างๆ เช่น การยืนยันก่อนลบ และแสดงชื่อไฟล์ภาพวาดที่ Save เป็นต้น

Properties ที่สำคัญ

คอมโพเนนต์ Canvas มี properties สำคัญหลายอย่าง แต่ที่กำหนดในหน้า Designer คือ

• LineWidth คือ ขนาดของเส้นที่จะวาด มีหน่วยเป็นพิกเซล
• PaintColor คือ สีที่จะวาด

บล็อกที่สำคัญ

• set Visible ของ Horizontal Arrangement เพื่อแสดงหรือซ่อนแถบนี้ โดยหากกำหนดให้เป็น true ก็จะแสดงแถบ และหากกำหนดให้เป็น false ก็จะซ่อนแถบ
• Canvas Clear ใช้สำหรับลบภาพทั้งหมดที่อยู่บน Canvas
• Canvas DrawLine ใช้วาดเส้นตรงบน Canvas
• Canvas Save ใช้บันทึกภาพที่อยู่บน Canvas เป็นไฟล์ในเครื่อง
• Dragged เป็นอีเวนต์ที่เกิดขึ้นเมื่อผู้ใช้ลากนิ้วไปบน Canvas ซึ่งในอีเวนต์นี้จะให้ค่า co-ordinate X, Y 3 ชุด คือ StartXY, PrevXY และ CurrentXY
• make color เป็นบล็อกสำหรับสร้างสีตามค่าสี RGB ที่กำหนด
• if then else จะให้ค่ากลับมาได้ 2 ค่า จะเป็นค่าไหน ก็ขึ้นกับผลการทดสอบเงื่อนไขว่าเป็น true หรือ false
• ShowChooseDialog แสดงไดอะล็อกที่มี 2 ปุ่มให้ผู้ใช้เลือกว่าจะคลิ้กปุ่มไหน
• Notifier AfterChoosing เป็นอีเวนต์ที่เกิดขึ้นเมื่อผู้ใช้เลือกคลิ้กปุ่มใดปุ่มหนึ่งบน ShowChooseDialog
• Procedure เป็นบล็อกที่ใช้สร้าง procedure เพื่อให้เราสามารถนำ code กลับมาใช้ซ้ำได้ โดยไม่ต้องเขียน code เพิ่ม
• call Procedure เป็นบล็อกสำหรับเรียกใช้ procedure ที่เราสร้างไว้

ความรู้อื่นๆ

• เรียนรู้เกี่ยวกับการใช้ Procedure เพื่อลดความซ้ำซ้อนของ code
• สอนเทคนิคการแสดงหรือซ่อนแถบเครื่องมือ เมื่อมีการคลิ้กปุ่ม (หรือที่เรียกว่า Toggle) โดยใช้บล็อก set Visible และ not เพื่อเปลี่ยนค่า logic ให้เป็นค่าตรงข้าม
• เทคนิคการลากเส้นเพื่อให้เป็นภาพ
• เทคนิคการแสดงตัวเลขบนปุ่ม