วิชาคอมพิวเตอร์กราฟิก intro_vb_net_06 การสร้างกราฟเส้นตรงด้วย VB.NET

งานนำเสนอเรื่อง: "วิชาคอมพิวเตอร์กราฟิก intro_vb_net_06 การสร้างกราฟเส้นตรงด้วย VB.NET"— ใบสำเนางานนำเสนอ:

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

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

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

4 กราฟเส้นตรง 4

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

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

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

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

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

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

11 กำหนดคุณสมบัติของ PictureBox ดังนี้
Name : PBGraph BackColor : สีขาว Size : 600, 400 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 : ChkXLabel Text : X Label Name : ChkYLabel Text : Y Label 14

15 กำหนดคุณสมบัติของ CheckBox ดังนี้
Name : ChkShowGrid Text : Show Grid Name : ChkXLabel Text : X Label Name : ChkYLabel Text : Y Label 15

16 นำ Button มาวาง ดังรูป และกำหนดคุณสมบัติดังนี้
Name : BtnPlotGraph Text : Plot Graph Name : BtnClear Text : Clear Name : BtnColor Text : Chose Color Name : BtnExit Text : Exit 16

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

18 Double click ที่ปุ่ม Plot Graph
นำเข้า Namespace ที่เกี่ยวข้องกับ graphics Imports System.Drawing ประกาศตัวแปรที่เกี่ยวข้องดังรูป 20

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

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

21 สร้าง Grid 23

22 กด F5 ดูผลลัพธ์ 31

23 สร้างแกน X พิมพ์ต่อจาก end if ก่อนหน้านี้ 24

24 กด F5 ดูผลจากการสร้างแกน X
32

25 สร้างแกน Y 25

26 สร้างช่วงของข้อมูลในแกน X
26

27 สร้างช่วงของข้อมูลในแกน Y
27

28 สร้าง Label ในแกน X และแกน Y
'--- สร้างคำอธิบายแกน X Dim f As Font f = New Font("ms-sans serif", 10, FontStyle.Bold) G.DrawString("0,0", f, Brushes.BlueViolet, 45, PbGraph.Height - 40) '--- สร้าง Label G.DrawString("แกน Y", f, Brushes.BlueViolet, 40, 20) G.DrawString("แกน X", f, Brushes.BlueViolet, PbGraph.Width - 45, PbGraph.Height - 55)

29 สร้าง Label ในแกน X และแกน Y
28

30 ตัวอย่างคำสั่งในการสร้างเส้นกราฟ
G.DrawLine(p4, 55, PbGraph.Height - 50, 100, PbGraph.Height - 100) G.DrawLine(p4, 100, PbGraph.Height - 100, 150, PbGraph.Height - 200) ส่วนที่เหลือให้ นศ. เขียนเองให้ครบ

31 ในปุ่ม Cancel 37

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

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