ch07 流程控制應用 - 動畫

Ch07 流程控制應用 - 動畫

視窗程式設計

PictureBox 圖片控制項 • 要加入圖片，可用 PictureBox 圖片控制項載入指定

圖片檔。• 圖片控制項允許使用的圖形檔格式有：

點陣圖 (.bmp)、 GIF 格式圖檔 ( 包括 Gif 動畫及背景透空的靜態圖 )、 jpeg 圖形檔、中繼檔 (.wmf) 、可攜式網路圖檔 (.png) 或圖示格式 (.ico) 的圖形。

• PictureBox 圖片控制項中的圖片可在設計階段先載入或在程式執行時才讀取檔案。

112/04/19 2

圖片控制項的常用屬性

1. Image 屬性：是圖片控制項最重要屬性，用來設定要顯示的圖檔。

2. SizeMode 屬性 ( 預設值 Normal) 設定圖片在圖片控制項中顯示方式，有五個屬性值： Normal －圖片以正常大小顯示在圖片方塊的左上角。 StretchImage －圖片自動調整成和圖片控制項一樣大小。 AutoSize －圖片控制項自動調整成和圖片一樣大小。 CenterImage －圖片以正常大小顯示在圖片控制項的中央。 Zoom - 圖片維持等比例依圖片控制項大小自動調整。

• 在程式執行階段設定 SizeMode 屬性值的語法如下： PictureBox1.SizeMode = PictureBoxSizeMode.Normal

112/04/19 3


3. BorderStyle 屬性：設定圖片控制項的外框樣式，屬性值： None - 沒有框線（預設值） FixedSingle - 單線固定 Fixed3D- 立體固定

4. Location.X、 Location.Y 屬性：設定圖片控制項左上角相對於容器 ( 通常為表單 ) 的位置。Location.X 和 Location.Y 兩屬性，分別設定圖片控制項的水平距離和垂直距離。

112/04/19 4


5. Left、 Top屬性Left 屬性相當於 Location.X 屬性Top 屬性相當於 Location.Y 屬性Left 和 Top 屬性只能在程式執行階段使用。

6. Size.Width、 Size.Height屬性設定圖片控制項的大小。Size.Width 和 Size.Height 兩個屬性，分別設定圖片控制項寬度 ( 可縮寫為 Width) 和高度 ( 可縮寫為 Height) 。

112/04/19 5

6

圖片的載入及清除 1. 設計階段載入圖片

2. 設計階段清除圖片選取 Image 屬性欄後按鍵，或直接在屬性視窗的 Image 屬性值上按右鍵，選取即可。

112/04/19 7

3. 在執行階段載入圖片• 使用 Image 類別的 FromFile 方法設定 Image 屬性。語法： PictureBox1.Image = Image.FromFile( 包含路徑的圖檔名稱 )

• 將 D :\ch05\ 飛碟 .gif 圖形檔載入 pic1 圖片控制項中： pic1.Image = Image.FromFile("d:\ch05\ 飛碟 .gif")

• 也可用 New 建立 Bitmap 物件來載入圖檔： pic1.Image = New Bitmap("d:\ch05\ 飛碟 .gif")

4. 執行階段清除圖片 PictureBox.Image = Nothing

112/04/19 8

圖片位置和尺寸的調整

• 程式執行階段調整圖片控制項位置和尺寸，可產生動畫效果。

1. Point 物件改變圖片控制項的 Location 屬性可用 Point 物件，語法： Object.Location = New Point(X,Y)

例將 pic1 圖片控制項移動到 X 座標 66、Y 座標 88 位置。 pic1.Location = New Point(66,88)

不用 Point 物件，也可直接改變 Left（ =Location.X ）和 Top（ = Location.Y ）屬性，寫法：

　　　　 pic1.Left = 66

　　　　 pic1.Top = 88

112/04/19 9

2. Size 物件• 程式執行階段，可用 Size 物件來設定圖片大小。

• SizeMode 屬性設為 StretchImage 或 Zoom （等比例）圖片自動調整成和圖片控制項一樣大小。

• 使用 Size 物件語法：

PictureBox.Size = New Size(Width,Height)

例將 pic1 圖片控制項的寬度和高度各縮小一半。 pic1.Size = New Size(pic1.Width/2,pic1.Height/2)

• 如不用 Size 物件，也可直接改變 Size 的 Width 和 Height 屬性值，寫法：

　　　　 pic1.Width = pic1.Width / 2 　　　　 pic1.Height = pic1.Height / 2112/04/19 10

112/04/19 11

Step1 建立輸出入介面

112/04/19 12

FileName: poker.sln

01 Dim num1, num2 As Integer

02 Private Sub Form1_Load(ByVal sender …) Handles MyBase.Load

03 pic1.Enabled = False


05 pic1.SizeMode = PictureBoxSizeMode.AutoSize

06 pic2.SizeMode = PictureBoxSizeMode.AutoSize

07 pic1.Image = New Bitmap("c:/vb2008/ch05/image/Pokerbk.jpg")


09 lblMsg.Text = "按洗牌鈕遊戲開始 .."

10 End Sub

112/04/19 13

01 Private Sub btnShuffle_Click(ByVal sender …) Handles btnShuffle.Click

02 pic1.Enabled = True

03 pic2.Enabled = True

04 btnShuffle.Enabled = False



07 Randomize()

08 num1 = Int(Rnd() * 13) + 1

09 num2 = Int(Rnd() * 13) + 1

10 lblMsg.Text = " 請在撲克牌上按一下選取 .."

11 End Sub112/04/19 14

01 Private Sub pic1_Click(ByVal sender …) Handles pic1.Click

02 pic1.Image = New Bitmap("c:/vb2008/ch05/image/Poker" & num1 & ".jpg")


04 If num1 > num2 Then

05 lblMsg.Text = " 你贏了 ! 按洗牌鈕重玩 ...."

06 Else

07 If num1 = num2 Then

08 lblMsg.Text = " 平手 ! 按洗牌鈕重玩 ...."

09 Else

10 lblMsg.Text = " 你輸了 ! 按洗牌鈕重玩 ...."

11 End If

12 End If



15 btnShuffle.Enabled = True

16 End Sub112/04/19 15

01 Private Sub pic2_Click(ByVal sender …) Handles pic2.Click02 pic1.Image = New Bitmap("c:/vb2008/ch05/image/Poker" & num1 & ".jpg")


04 If num2 > num1 Then05 lblMsg.Text = " 你贏了 ! 按洗牌鈕重玩 ...."06 Else07 If num2 = num1 Then08 lblMsg.Text = " 平手 ! 按洗牌鈕重玩 ...."09 Else10 lblMsg.Text = " 你輸了 ! 按洗牌鈕重玩 ...."11 End If12 End If13 pic1.Enabled = False14 pic2.Enabled = False15 btnShuffle.Enabled = True16 End Sub1718 Private Sub btnQuit_Click(ByVal sender …) Handles btnQuit.Click19 End20 End Sub

112/04/19 16

Image List 影像列示控制項• ImageList 影像列示控制項屬幕後執行控制項，程式

執行時表單上看不到，編輯階段顯示在表單正下方。• 無法直接在表單上顯示圖形，可同時載入多張圖片，

以方便在表單使用影像列示清單控制項來共用圖片。• 如按鈕、選項鈕、核取方塊、標籤等控制項，都具

ImageList 屬性，只要將該屬性值設定為影像列示控制項，就可顯示圖片。

• 圖片控制項物件的 Image 屬性值，也可指定等於影像列示控制項的 Images 屬性值。只要傳圖片的索引值（索引值由 0 開始）就改變圖片，可將不同圖片檔名置入影像列示控制項，存取時透過索引值，程式碼可更簡化。112/04/19 17

• PictureBox1 圖片控制項的 Image 屬性由影像列示控制項圖片的 Index 索引值取得圖片的語法如下：

PictureBox1.Image = ImageList1.Images(Index)

• 如 Button1 按鈕控制項上面要顯示影像列示控制項ImageList1 的第 2 張圖片，寫法：

Button1.ImageList = ImageList1

Button1.ImageIndex = 1

112/04/19 18

19

影像列示控制項的常用屬性

1. Images 屬性物件中圖示或圖片的集合。

2. ColorDepth 屬性（預設值 Depth8Bit ）影像色彩的位元數，屬性值：Depth4Bit、 Depth8Bit 、 Depth16Bit、 Depth32Bit 。

3. ImageSize 屬性- 影像集合中影像的大小，最大值為（ 256,256 ）。- 影像列示控制項物件適用圖形格式和圖片控制項相同。- 因圖片載入到影像列示控制項後，大小會調整成一樣的大小（同 ImageSize 屬性值）- 圖片最好大小一致，比例要相似以免秀圖時變形。

20

Timer 計時器控制項

• Timer 計時器控制項是 VB 所提供一個計時器，可在指定時間間隔時執行特定的動作。

• Tick 事件是 Timer 控制項預設事件，只要設定的間隔時間一到，就會觸動 Tick 事件，只要將執行的程式碼寫在該事件中即可。

• Tick 事件就像是一個隱形 Do…Loop 迴圈，當間隔時間一到就執行事件一次，若要離開迴圈只要設定 Enabled 屬性為 False 。

• 事件導向程式設計，迴圈可用 Timer 控制項來取代。一般用來做計時、動畫製作等。

• Timer 控制項和 ImageList 控制項一樣，都屬幕後執行控制項，執行時在表單上沒有實體物件。

21

Timer 常用屬性和事件 1. Enabled 屬性 ( 預設值 False)

用來設定是否開始啟動 Timer 控制項計時器。若設為True 表計時器開始計時，以 Interval 屬性值當作週期每週期一到便觸動 ( 執行 ) Tick 事件一次。若設為 False就停止計時。

2. Interval 屬性 ( 預設值 100) 用來設定計時器時間間隔 ( 即週期 ) ，以毫秒 (千分之一秒 ) 為單位， 100 即 0.1秒。若設定 Interval = 1000 ，即代表 1000 毫秒 = 1秒。 Interval 屬性值最大值到 64,767 ，即 64.7秒。

3. Tick 事件（預設事件）當 Enabled 屬性值為 True 時， Timer 控制項的計時器啟動，每隔一週期 (即 Interval 屬性值 ) 就會觸動 Tick 事件一次。


112/04/19 23

FileName: dogRun.sln

03 Dim start_time As Double

04 Dim flag As Boolean

05

06 Private Sub Form1_Load(ByVal sender ….) Handles MyBase.Load

07 picDog.SizeMode = PictureBoxSizeMode.StretchImage

08 picDog.Image = imgDog.Images(0)

09 Timer1.Interval = 200

10 flag = True

11 End Sub

12

13 Private Sub btnStart_Click(ByVal sender …) Handles btnStart.Click

14 Timer1.Enabled = True

15 start_time = Microsoft.VisualBasic.Timer

16 End Sub

17

112/04/19 24

18 Private Sub Timer1_Tick(ByVal sender … ) Handles Timer1.Tick

19 If flag = True Then


21 flag = False

22 Else


24 flag = True

25 End If

26 End Sub

27

28 Private Sub btnStop_Click(ByVal sender _ ) Handles btnStop.Click

29 Timer1.Enabled = False

30 MsgBox("總共花費 " & Microsoft.VisualBasic.Timer - start_time & "秒 ")

31 End Sub

32

33 End Class112/04/19 25

26

看答案按對答按出題開始

112/04/19 27

FileName:memoryTest.sln

01 Public Class Form1

02 Dim count, ans, ok As Integer

03 Private Sub Form1_Load(ByVal sender… ) Handles MyBase.Load

04 count = 0 : ok = 0

05 lblTest.Text = ""

06 lblMsg.Text = "請按出題鈕開始，題目會在 1秒後消失 "

07 btnTest.Enabled = True

08 btnCheck.Enabled = False

09 btnQuit.Enabled = True

10 txtAnswer.Enabled = False

11 tmrTest.Enabled = False

12 tmrTest.Interval = 1000

13 End Sub112/04/19 28

15 Private Sub btnTest_Click(ByVal sender …) Handles btnTest.Click

16 Dim rnd As New Random

17 ans = rnd.Next(100000, 1000000)

18 count += 1

19 lblTest.Text = ans

20 txtAnswer.Text = ""

21 tmrTest.Enabled = True

22 btnTest.Enabled = False

23 btnCheck.Enabled = True

24 btnQuit.Enabled = True

25 End Sub

112/04/19 29

27 Private Sub tmrTest_Tick(ByVal sender …) Handles tmrTest.Tick

28 tmrTest.Enabled = False ' 關閉計時器29 lblTest.Visible = False ' 隱藏題目30 lblMsg.Text = "請輸入答案 "

31 txtAnswer.Enabled = True ' 可以輸入32 txtAnswer.Focus() ' 設為作用中物件供使用者輸入答案33 End Sub

34

35 Private Sub btnCheck_Click(ByVal sender …) Handles btnCheck.Click

36 lblTest.Visible = True ' 顯示題目37 If Val(txtAnswer.Text) = ans Then ok += 1

38 lblMsg.Text = "出 " & count & "題 ,答對 " & ok & "題 !! 按出題鈕進入下一題 "

39 btnTest.Enabled = True

40 btnCheck.Enabled = False

41 End Sub

112/04/19 30


112/04/19 32

FileName:卡拉 ok字幕機 .sln

02

03 Dim flag As Integer = 1

04 Private Sub Form1_Load(ByVal sender …) Handles MyBase.Load

05 Timer1.Interval = 30


07 pic2.Location = pic1.Location

08 pic1.Width = 0

09 End Sub

10

11 Private Sub btnPlay_Click(ByVal sender …) Handles btnPlay.Click

12 Timer1.Enabled = True

13 End Sub

14

112/04/19 33

15 Private Sub Timer1_Tick(ByVal sender …) Handles Timer1.Tick

16 If flag = 1 Then

17 pic1.Image = New Bitmap("fish1.bmp")

18 pic2.Image = New Bitmap("fish2.bmp")

19 Else

20 pic1.Image = Image.FromFile("fish3.bmp")

21 pic2.Image = Image.FromFile("fish4.bmp")

22 End If

23 If pic1.Width < (pic2.Width) Then

24 pic1.Width = pic1.Width + 2 s

25 Else

26 pic2.Location = pic1.Location

27 pic1.Width = 0

28 flag = -flag

29 End If

30 End Sub

31

32 Private Sub btnStop_Click(ByVal sender …) Handles btnStop.Click


34 End Sub

112/04/19 34

ch07 流程控制應用 - 動畫

Documents