วิชาคอมพิวเตอร์กราฟิก

งานนำเสนอเรื่อง: "วิชาคอมพิวเตอร์กราฟิก"— ใบสำเนางานนำเสนอ:

1 วิชาคอมพิวเตอร์กราฟิก
intro_vb_net_07_Bar_Chart การสร้างกราฟเส้นแท่งด้วย VB.NET โดย อ. นัฐพงศ์ ส่งเนียม 1

2 บทนำ จากที่ผ่านมาเราได้ทำการศึกษาความรู้พื้นฐานเกี่ยวกับคอมพิวเตอร์กราฟฟิกส์มาบ้างแล้วและความรู้เกี่ยวกับการพัฒนาโปรแกรมด้วยภาษา VB.NET2005 ขั้นพื้นฐาน จากนี้ไปจะเน้นไปที่การเขียนโปรแกรมเชิงกราฟิก เช่น การสร้างเส้นตรง รูปเหลี่ยมต่างๆ วงกลม วงรี ทรงกลม และอื่นๆ ให้มากขึ้น ต่อไป โดยในบทนี้จะเป็นการประยุกต์ใช้เส้นตรง รูปสี่เหลี่ยม เพื่อใช้ในการสร้างกราฟ แบบต่างๆ เช่น กราฟเส้นตรง กราฟแท่ง เป็นต้น 2

3 กราฟแบบต่างๆ ใน MS-Excel
3

4 การสร้างกราฟแท่ง 4

5 สร้าง Project ใหม่ ไปที่เมนู File เลือก New เลือก Project 5

6 ตั้งชื่อ VB_07_Create_Bar_Chart
กำหนด Location :: C:\CG_Example กด OK 6

7 กำหนดคุณสมบัติ Form Name : Frm_Create_Bar_Charts BackColor :
BackgroundImage : Size : 1024, 500 Text : โปรแกรมสร้างกราฟแท่ง Bar Chart 7

8 นำ GroupBox มาวางดังรูป
8

9 กำหนดคุณสมบัติ GroupBox ทั้งสาม
Name : GB1-GB3 Text : GB1 Size : 847, 350 GB3 GB2 9

10 นำ PictureBox มาวางใน GB3 ดังรูป
Size : 847, 350 10

11 กำหนดคุณสมบัติของ PictureBox ดังนี้
Name : PB1 BackColor : สีเทา Size : 847, 350 11

12 นำ RadioButton มาวางใน GB1 ดังรูป
12

13 กำหนดคุณสมบัติของ RadioButton ดังนี้
Name : R_Line Text : Line Name : R_Bar Text : Bar Name : R_Circle Text : Circle 13

14 นำ CheckBox มาวางใน GB2 ดังรูป
Name : ChkShowGrid Text : Show Grid Name : ChkXYaxis Text : X Y axis Name : ChkVolume Text : Show Data Volume Name : ChkShowYear Text : Show Year 14

15 นำ Button มาวาง ดังรูป และกำหนดคุณสมบัติดังนี้
Name : BtnOK Text : ตกลง Name : BtnCancel Text : ยกเลิก Name : BtnExit Text : Exit 15

16 Double click ที่ปุ่ม BtnOK
แล้วเขียนคำสั่ง บรรทัดแรกสุด เท่านั้น 16

17 Double click ที่ปุ่ม ตกลง
นำเข้า Namespace ที่เกี่ยวข้องกับ graphics Imports System.Drawing 17

18 ประกาศตัวแปร แบบ Global
ตัวแปรนี้จะสามารถใช้งานได้ทุกส่วนของฟอร์มนี้ 18

19 ดับเบิ้ลคลิกที่ฟอร์ม เพื่อเข้าไปที่เหตุการณ์ form_load
แล้วพิมพ์คำสั่งดังนี้ 19

20 20

21 21

22 เริ่มต้นด้วยการสร้าง grid ก่อน
22

23 สร้าง Grid สร้าง โปรแกรมย่อย Private Sub Plot_grid() 23

24 แทรกคำสั่งเพื่อสร้าง หัวแปรงพู่กัน ทั้ง 2 แบบ
24

25 แทรกคำสั่งเพื่อสร้าง หัวแปรงพู่กัน ทั้ง 2 แบบ
พิมพ์ต่อ 25

26 คำสั่งในปุ่ม OK บางส่วน
26

27 สร้างแกน X และ Y พิมพ์ต่อจาก ก่อนหน้านี้ 27

28 กด F5 เพื่อดูผลลัพธ์คำสั่งในแกน
28

29 ผลลัพธ์ในการสร้าง Bar
29

30 สร้างโปรแกรมย่อยในการแสดงปี
30

31 สร้างแท่งกราฟทั้ง 4 แท่ง
อันนี้พิมพ์ ทดสอบ 2 แท่งแรกก่อน 31

32 สร้างแท่งกราฟ อีกสองแท่งที่เหลือ
32

33 กด F5 รันดูผลลัพธ์ 33

34 คำสั่งในการปุ่ม OK ที่สมบูรณ์
34

35 ในปุ่ม Cancel 35

36 ดับเบิ้ลคลิกที่ปุ่ม Exit แล้วเขียนคำสั่งดังนี้
36

37 ให้นักศึกษากลับไปเขียนคำสั่งส่วนที่ขาดให้ครบ เสร็จสมบูรณ์
แบบฝึกหัด ให้นักศึกษากลับไปเขียนคำสั่งส่วนที่ขาดให้ครบ เสร็จสมบูรณ์ 37