Low Level GUI อ.วิวัฒน์ ชินนาทศิริกุล

คลาส Canvas การเขียน MIDlet แบบกราฟิก คลาสที่ใช้คำสั่งเกี่ยวกับการวาดรูปหรือกราฟิก ต้องเป็นคลาสที่ขยาย (extends) มาจากคลาส Canvas

Layout of Canvas จุดพิกัด (x,y) บนหน้าจอมือถือ จะเริ่มจากมุมบนซ้าย ที่ตำแหน่ง (0,0) โดยที่ค่า x จะเพิ่มขึ้นจากซ้ายไปขวา ค่า y จะเพิ่มขึ้นจากบนลงล่าง

สามารถทราบขนาดของ Canvas ได้โดยเรียกใช้เมธอด getWidth() และ getHeight() ของคลาส Canvas

Graphics Class การวาดภาพกราฟิกต่างๆ เช่น เส้นตรง รูปสี่เหลี่ยม รูปวงกลม จะใช้ อินสแตนท์ของคลาส Graphic โดยเรียกใช้เมธอด paint() ซึ่งการใช้งานจะไม่เรียกใช้เมธอด paint() โดยตรง แต่เมธอด paint() จะถูกเรียกใช้อัตโนมัติเมื่อ เมธอด setCurrent() ถูกเรียกใช้เมื่อมีการเริ่มต้น Midlet

ตัวอย่าง การวาดเส้น

ผลการรัน

การกำหนดสี ก่อนวาดภาพกราฟิกส์ จะต้องกำหนดสีเสียก่อน โดยใช้เมธอด setColor() ของอ็อบเจกต์ Graphics ในเมธอด setColor() จะมีการระบุสีลงไป ซึ่งสามารถระบุสีที่ต้องการได้ 2 วิธีคือ 1. ระบุสี เป็นตัวเลขฐาน 16 เพียงค่าเดียว เช่น g.setColor(0xFFFFFF) 2. ระบุสี โดยแยกตามค่าแม่สี (Red , Green ,Blue) เช่น g.setColor(255,100,255)

ตัวอย่างค่าสี สี Red Green Blue ฐาน16 ขาว 255 0xFFFFFF ดำ 0x000000 แดง 0x000000 แดง 0xFF0000 เหลือง 0xFFFF00 ม่วง 0xFF00FF

เมธอดที่ใช้วาดเส้นตรง ใช้เมธอด drawLine() ของอ็อบเจกต์ของคลาส Graphics รูปแบบ drawLine(int x1, int y1 , int x2 ,int y2) โดยที่ x1 , y1 เป็นจุดพิกัดเริ่มต้นของเส้นตรง x2 , y2 เป็นจุดพิกัดสุดท้ายของเส้นตรง

ตัวอย่าง โปรแกรมวาดตารางบนหน้าจอ

ตัวอย่าง โปรแกรมวาดตารางบนหน้าจอ (ต่อ)

ผลการรันโปรแกรม

เมธอดที่ใช้วาดรูปสี่เหลี่ยมโปร่ง ใช้เมธอด drawRect() ของอ็อบเจกต์ของคลาส Graphics รูปแบบ drawRect(int x, int y , int width ,int height) โดยที่ x1 , y1 เป็นจุดพิกัดมุมบนซ้ายของรูปสี่เหลี่ยม width เป็นความกว้างของรูปสี่เหลี่ยม height เป็นความยาวของรูปสี่เหลี่ยม เช่น g.drawRect(10,10,20,40);

เมธอดที่ใช้วาดรูปสี่เหลี่ยมโปร่งขอบมน ใช้เมธอด drawRoundRect() ของอ็อบเจกต์ของคลาส Graphics รูปแบบ drawRoundRect(int x, int y , int width ,int height, int acrwidth , int arc height ) โดยที่ x1 , y1 เป็นจุดพิกัดมุมบนซ้ายของรูปสี่เหลี่ยม width เป็นความกว้างของรูปสี่เหลี่ยม height เป็นความยาวของรูปสี่เหลี่ยม arcwidth เป็นความกว้างของส่วนโค้งที่เป็นมุมของสี่เหลี่ยม archeight เป็นความสูงของส่วนโค้งที่เป็นมุมของสี่เหลี่ยม

เมธอดที่ใช้วาดรูปสี่เหลี่ยมทึบ ใช้เมธอด fillRect() ของอ็อบเจกต์ของคลาส Graphics รูปแบบ fillRect(int x, int y , int width ,int height) โดยที่ x1 , y1 เป็นจุดพิกัดมุมบนซ้ายของรูปสี่เหลี่ยม width เป็นความกว้างของรูปสี่เหลี่ยม height เป็นความยาวของรูปสี่เหลี่ยม เช่น g.fillRect(10,10,20,40);

เมธอดที่ใช้วาดรูปสี่เหลี่ยมทึบขอบมน ใช้เมธอด fillRoundRect() ของอ็อบเจกต์ของคลาส Graphics รูปแบบ fillRoundRect(int x, int y , int width ,int height , int width , int height) โดยที่ x1 , y1 เป็นจุดพิกัดมุมบนซ้ายของรูปสี่เหลี่ยม width เป็นความกว้างของรูปสี่เหลี่ยม height เป็นความยาวของรูปสี่เหลี่ยม arcwidth เป็นความกว้างของส่วนโค้งที่เป็นมุมของสี่เหลี่ยม archeight เป็นความสูงของส่วนโค้งที่เป็นมุมของสี่เหลี่ยม

ตัวอย่าง โปรแกรมวาดรูปสี่เหลี่ยมบนหน้าจอ

ตัวอย่าง โปรแกรมวาดรูปสี่เหลี่ยมบนหน้าจอ (ต่อ)

ผลการรันโปรแกรม

เมธอดที่ใช้วาดรูปวงกลมหรือวงรี ใช้เมธอด drawArc() ของอ็อบเจกต์ของคลาส Graphics รูปแบบ drawArc(int x , int y , int width , int height , int startAngle , int arcAngle) โดยที่ x , y เป็นจุดพิกัดที่มุมบนซ้ายของรูปวงกลมหรือวงรี width เป็นความกว้างตามแนวแกน x height ความกว้างตามแนวแกน y startAngle เป็นมุมเริ่มต้น arcAngle จำนวนองศา (นับจากมุมเริ่มต้น)

เมธอดที่ใช้วาดรูปวงกลมหรือวงรีทึบ ใช้เมธอด fillArc() ของอ็อบเจกต์ของคลาส Graphics รูปแบบ fillArc(int x , int y , int width , int height , int startAngle , int arcAngle) โดยที่ x , y เป็นจุดพิกัดที่มุมบนซ้ายของรูปวงกลมหรือวงรี width เป็นความกว้างตามแนวแกน x height ความกว้างตามแนวแกน y startAngle เป็นมุมเริ่มต้น arcAngle จำนวนองศา (นับจากมุมเริ่มต้น)

ตัวอย่าง โปรแกรมวาดรูปวงกลม

ตัวอย่าง โปรแกรมวาดรูปวงกลม (ต่อ)

ผลการรันโปรแกรม

เมธอดที่ใช้พิมพ์ข้อความ ใช้เมธอด drawString() ของอ็อบเจกต์ของคลาส Graphics รูปแบบ drawString(String str, int x , int y ,int anchor)

ตัวอย่าง โปรแกรมพิมพ์ข้อความ

ตัวอย่าง โปรแกรมพิมพ์ข้อความ (ต่อ)

ผลการรันโปรแกรม