Transcript บทที่ 6 Low Level GUI 1 - ผศ.วิวัฒน์ ชินนาทศิริกุล

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
255
255
0xFFFFFF
ดา
0
0
0
0x000000
แดง
255
0
0
0xFF0000
เหลือง
255
255
0
0xFFFF00
ม่วง
255
0
255
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)
ตัวอย่าง โปรแกรมพิมพ์ขอ้ ความ
ตัวอย่าง โปรแกรมพิมพ์ขอ้ ความ (ต่อ)
ผลการรันโปรแกรม