มาถึงตอนที่ 6 แล้วนะครับ คราวนี้เรามาสนุกกับ Graphics ใน PocketC# กันครับ ก่อนอื่นต้องขอโทษเพื่อนสมาชิกที่ในการอธิบายโปรแกรมจะมีประโยคภาษาอังกฤษเพิ่มเข้ามามากขึ้น ทั้งนี้เพราะผมได้รับ e-mail จากชาวอิตาเลียนส่งมาจากอิตาลีโน่น บอกว่าเขาติดตามเวป pdamobiz และสนใจการเขียนโปรแกรมด้วย PocketC# หากผมสามารถเพิ่มคำอธิบายภาษาอังกฤษอีกสักหน่อยก็จะทำให้ชาวต่างชาติที่สนใจได้ประโยชน์มากขึ้น แม้ว่าในตอนที่ผ่านมาเขาจะไม่เข้าใจคำอธิบายภาษาไทย แต่จากภาพประกอบและทดลองเขียนโปรแกรมดูก็พอจะเข้าใจได้ อย่างไรก็ดีหากโปรแกรมมีความซับซ้อนมากขึ้น คำอธิบายเป็นภาษาอังกฤษก็จะช่วยได้มาก ซึ่งผมก็ไม่ขัดข้องครับ และหากมีเวลาผมอาจจะย้อนไปเพิ่มคำอธิบายภาษาอังกฤษในตอนที่ผ่านมาด้วย ผมก็เพิ่งรู้ว่าเวป pdamobiz นี่โด่งดังไปถึงอีกซีกโลกหนึ่งเชียวนะเนี่ย แจ๋วจริง ๆ

มาเข้าเรื่องกันเลยครับ คราวนี้ขอให้เพื่อน ๆ เริ่ม project ใหม่ ตามวิธีการของตอนที่ 1 ด้วยการสร้าง project graphic.csant ขึ้นมาครับ สำหรับ source file เราจะตั้งชื่อว่า graphic.cs

Create new project called graphic.csant

ในการสร้างพื้นที่สำหรับ graphic นั้น เริ่มแรกเราก็สร้าง form ตามโครงสร้างปกติของเรานั่นเอง คือประกอบด้วย class grx : Form และ Main() พร้อมด้วย method grx()ของ Form โดยเขียนโปรแกรมสร้าง Form แล้วเราก็สร้าง object ของ Graphics ขึ้นมาโดยตั้งชื่อว่า gr หรือชื่ออื่น ๆ ตามต้องการใน ส่วนของ declaration ด้วยคำสั่ง Graphics gr; จากนั้นเราต้องประกาศว่าเราจะสร้างพื้นที่วาดรูปใน Form ของเรา ด้วยคำสั่ง gr=CreateGraphics(); ใน method grx()ของ Form เพียงเท่านี้เราก็พร้อมที่จะวาดรูปลงบนฟอร์มของเราแล้วครับ

In graphic.cs , write codes to create Form.Create object declaration for Graphics in class. use gr=CreateGraphics() in method grx() so you are ready for Drawing in Form.

ใน PocketC# ได้กำหนดคำสั่งต่าง ๆ ในการวาดรูปไว้หลายอย่าง เช่น การวาดเส้นตรง วงกลม สี่เหลี่ยม ตามที่เราต้องการ ซึ่งการจะใช้คำสั่งต่าง ๆ จะต้องอ้างถึง object ของ Graphics ที่เราประกาศไว้ในตอนต้น คือ gr ก่อนเสมอ โดยรูปแบบคำสั่งก็เช่น

วาดเส้นตรง gr.DrawLine(new Pen(Color.Red),x,y,width,height);

วาดวงกลม gr.DrawEllipse(new Pen(Color.Blue),x,y,width,height);

วาดสี่เหลี่ยม gr.DrawRectangle(new Pen(Color.Yellow),x,y,width,height);

วาดวงกลมทึบ gr.FillEllipse(new SolidBrush(Color.Green),x,y,width,height);

วาดสี่เหลี่ยมทึบ gr.FillRectangle(new SolidBrush(Color.Black),x,y,width,height);

คราวนี้เรามาลองสั่งให้วาดรูปวงกลมทึบหนึ่งวง ทุกครั้งที่เราลากปากกาลงบนจอภาพครับ ซึ่งจะส่งผลให้เกิดเส้นลากตามปากกาของเรา ซึ่งผมใช้หลักการนี้ในการสร้างโปรแกรมวาดรูป Freehand นั่นเองครับ วิธีการคือเราจะใช้ method OnMouseMove(MouseEventArgs e) เพื่อรับข้อมูลการลากปากกาบนหน้าจอ จากนั้นก็สร้างคำสั่งวาดรูปวงกลมทึบในตำแหน่ง x,y ของปากกาที่แตะบนหน้าจอนั้น ด้วยการอ้างถึงจุดแตะด้วย e.X,e.Y แค่นี้เองครับ จากนั้นลอง build และ run ดู เพื่อน ๆ ก็ได้โปรแกรมจดโน้ตบนหน้าจอแล้ว ง่ายจัง

protected override void OnMouseMove(MouseEventArgs e)

{

gr.FillEllipse(new SolidBrush(Color.Red),e.X,e.Y,10,10);

}

use OnMouseMove(MouseEventArgs e) to detect stylus moving position on screen and use FillEllipse(..) to draw a solid circle at that position. Build and Run, So you have the easiest graphic notepad program.

คราวนี้เราจะลบหน้าจออย่างไร ง่ายมากครับ ใน PocketC# มีคำสั่งลบหน้าจอมาให้เสร็จครับ ด้วยการใช้คำสั่ง gr.Clear(Color.White); ซึ่งจะล้างหน้าจอให้เป็นพื้นสีขาว หรือเปลี่ยนสีพื้นได้ตามชอบใจ เราก็ใช้ method OnKeyDown(KeyEventArgs e) เพื่อรับข้อมูลหากมีการกดปุ่ม ก็จะไปสู่คำสั่งล้างหน้าจอของเรานั่นเอง

protected override void OnKeyDown(KeyEventArgs e)

{

gr.Clear(Color.White);

}

use OnKeyDown(KeyEventArgs e) to detect key press and use gr.Clear(Color.White); to clear Background. You can change color in Clear(..) to change Background color.

ก็เป็นตัวอย่างสนุก ๆ ในการใช้ Graphics นะครับ คราวนี้ถ้าเราต้องการให้แสดงภาพวงกลม สี่เหลี่ยม ฯลฯ ที่เราทำคำสั่งวาดไว้ ให้แสดงขึ้นมาทันทีที่เปิดโปรแกรมเราจะทำอย่างไร ก็ไม่ยากอีกเช่นกันครับ เราใช้ method OnPaint(PaintEventArgs e) แล้วใส่คำสั่งวาดรูปต่าง ๆ ลงใน method นี้ เมื่อมีการเรียกโปรแกรมขึ้นมา Form จะส่งข้อมูลเรียก OnPaint(..) ทุกครั้งที่มีการเปลี่ยนแปลงหน้าจอครับ ดังนั้น คำสั่งต่าง ๆ ที่อยู่ใน OnPaint(..) จึงถูกเรียกให้ทำงานทุกครั้งเช่นกัน ลองเพิ่มคำสั่งนี้ดูครับ

protected override void OnPaint(PaintEventArgs e)

{

gr.FillRectangle(new SolidBrush(Color.Cyan),30,30,50,70);

gr.DrawLine(new Pen(Color.Green),0,0,240,240);

}

If you want to show your graphics when program start, use OnPaint(PaintEventArgs e)method to detect screen update and write your graphic codes in this method.

จะเห็นว่าเมื่อโปรแกรมเริ่มทำงาน มันก็จะแสดงภาพที่เราสั่งให้วาดไว้ใน OnPaint(..) แต่ถ้าเรากดปุ่มเพื่อล้างภาพหน้าจอ ก็ปรากฏว่าภาพที่เราเขียนไว้ใน OnPaint(..) ก็หายไปด้วย เราสามารถบังคับให้ OnPaint(..) ทำงานตามที่เราต้องการได้ ด้วยการใช้คำสั่ง Invalidate(); ครับ ลองใช้ // ละคำสั่ง gr.Clear(..) แล้วเพิ่มคำสั่ง Invalidate(); ลงไปแทนจะเห็นว่าเมื่อเรากดปุ่มล้างหน้าจอ ก็จะเป็นการสั่งให้ OnPaint(..) ทำงานอีกครั้งครับ

You can force OnPaint(..) to work by using Invalidate() .Please try this code.

protected override void OnKeyDown(KeyEventArgs e)

{

//gr.Clear(Color.White);

Invalidate();

}

You can use picture files that have jpg, bmp, gif, png extension in your graphic by using gr.DrawImage(new Bitmap(“\\directory\\filename.extension”),x,y);. Unlike PictureBox() ,this method can not stretch or reduce image size to fit screen. It just show image at position x,y.

หวังว่าเพื่อน ๆ คงสนุกสนานกับการใช้ graphics ของ PocketC# นะครับ ความจริงเรายังสามารถใช้คำสั่ง DrawString(..) เพื่อเขียนตัวอักษรลงบนหน้าจอ graphic ของเราได้ด้วย แต่ผมไม่อธิบายตรงนี้ครับ จะทิ้งไว้ให้เพื่อน ๆ ที่สนใจไปค้นคว้าเพิ่มเติมแล้วลองเล่นดูเองครับ อิ อิ ตอนต่อไปเราจะมาสนุกกับการสร้างเสียงประกอบหรือ Sound effect ใน PocketC# ครับ ซึ่งจะใช้เทคนิคขั้นสูงเชียวนะครับ เพราะใน C# ไม่มีคำสั่งสร้างเสียงโดยตรงครับ จะต้องอ้างคำสั่งใน ROM ของ PocketPC ทีเดียวเชียว

Next time, I will write about sound programming. Today is Thailand’s Mother Day ..Have fun !

ขอให้สนุกในวันแม่ครับ

12 สิงหาคม 2550