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

งานนำเสนอเรื่อง: "Low Level GUI อ.วิวัฒน์ ชินนาทศิริกุล."— ใบสำเนางานนำเสนอ:

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

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

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

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

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

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

7 ผลการรัน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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