流程控制应用-动画课件.ppt

1、Ch07 流程控制應用-動畫視窗程式設計PictureBox 圖片控制項 要加入圖片，可用 PictureBox 圖片控制項載入指定圖片檔。圖片控制項允許使用的圖形檔格式有：點陣圖(.bmp)、GIF格式圖檔(包括Gif動畫及背景透空的靜態圖)、jpeg圖形檔、中繼檔(.wmf)、可攜式網路圖檔(.png)或圖示格式(.ico)的圖形。PictureBox 圖片控制項中的圖片可在設計階段先載入或在程式執行時才讀取檔案。2022/12/32圖片控制項的常用屬性 1.Image屬性：是圖片控制項最重要屬性，用來設定要顯示的圖檔。2.SizeMode屬性(預設值Normal)設定圖片在圖片控制項中顯

2、示方式，有五個屬性值：Normal圖片以正常大小顯示在圖片方塊的左上角。StretchImage圖片自動調整成和圖片控制項一樣大小。AutoSize圖片控制項自動調整成和圖片一樣大小。CenterImage圖片以正常大小顯示在圖片控制項的中央。Zoom-圖片維持等比例依圖片控制項大小自動調整。在程式執行階段設定 SizeMode 屬性值的語法如下：PictureBox1.SizeMode=PictureBoxSizeMode.Normal2022/12/33圖片控制項的常用屬性 3.BorderStyle屬性：設定圖片控制項的外框樣式，屬性值：None-沒有框線（預設值）FixedSingle

3、-單線固定 Fixed3D-立體固定4.Location.X、Location.Y屬性：設定圖片控制項左上角相對於容器(通常為表單)的位置。Location.X 和 Location.Y 兩屬性，分別設定圖片控制項的水平距離 和 垂直距離。2022/12/34圖片控制項的常用屬性 5.Left、Top屬性Left 屬性相當於 Location.X 屬性Top 屬性相當於 Location.Y 屬性Left 和 Top 屬性只能在程式執行階段使用。6.Size.Width、Size.Height屬性設定圖片控制項的大小。Size.Width 和 Size.Height 兩個屬性，分別設定圖片控制

4、項寬度(可縮寫為Width)和高度(可縮寫為Height)。2022/12/356圖片的載入及清除 1.設計階段載入圖片2.設計階段清除圖片設計階段清除圖片選取選取 Image 屬性欄後按屬性欄後按 鍵，或直接在屬性視窗的鍵，或直接在屬性視窗的Image 屬性值上按右鍵，選取屬性值上按右鍵，選取 即可。即可。2022/12/373.在執行階段載入圖片 使用 Image 類別的 FromFile 方法設定 Image 屬性。語法：PictureBox1.Image=Image.FromFile(包含路徑的圖檔名稱)將 D:ch05飛碟.gif 圖形檔載入 pic1 圖片控制項中：pic1.Ima

5、ge=Image.FromFile(d:ch05飛碟.gif)也可用 New 建立 Bitmap 物件來載入圖檔：pic1.Image=New Bitmap(d:ch05飛碟.gif)4.執行階段清除圖片 PictureBox.Image=Nothing2022/12/38圖片位置和尺寸的調整 程式執行階段調整圖片控制項位置和尺寸，可產生動畫效果。1.Point 物件 改變圖片控制項的 Location 屬性可用 Point 物件，語法：Object.Location=New Point(X,Y)例 將 pic1 圖片控制項移動到 X 座標 66、Y 座標 88 位置。pic1.Locatio

6、n=New Point(66,88)不用 Point 物件，也可直接改變 Left（=Location.X）和Top（=Location.Y）屬性，寫法：pic1.Left=66 pic1.Top=882022/12/392.Size物件 程式執行階段，可用 Size 物件來設定圖片大小。SizeMode屬性設為 StretchImage 或 Zoom（等比例）圖片自動調整成和圖片控制項一樣大小。使用 Size 物件語法：PictureBox.Size=New Size(Width,Height)例 將 pic1 圖片控制項的寬度和高度各縮小一半。pic1.Size=New Size(pic1

7、.Width/2,pic1.Height/2)如不用 Size 物件，也可直接改變 Size 的 Width 和 Height 屬性值，寫法：pic1.Width=pic1.Width/2 pic1.Height=pic1.Height/22022/12/3102022/12/311Step1 建立輸出入介面建立輸出入介面2022/12/312FileName:poker.sln01 Dim num1,num2 As Integer02 Private Sub Form1_Load(ByVal sender )Handles MyBase.Load03 pic1.Enabled=False04

8、 pic2.Enabled=False05 pic1.SizeMode=PictureBoxSizeMode.AutoSize06 pic2.SizeMode=PictureBoxSizeMode.AutoSize07 pic1.Image=New Bitmap(c:/vb2008/ch05/image/Pokerbk.jpg)08 pic2.Image=New Bitmap(c:/vb2008/ch05/image/Pokerbk.jpg)09 lblMsg.Text=按洗牌鈕遊戲開始.10 End Sub2022/12/31301 Private Sub btnShuffle_Click(

9、ByVal sender )Handles btnShuffle.Click02 pic1.Enabled=True03 pic2.Enabled=True04 btnShuffle.Enabled=False05 pic1.Image=New Bitmap(c:/vb2008/ch05/image/Pokerbk.jpg)06 pic2.Image=New Bitmap(c:/vb2008/ch05/image/Pokerbk.jpg)07 Randomize()08 num1=Int(Rnd()*13)+109 num2=Int(Rnd()*13)+110 lblMsg.Text=請在撲克

10、牌上按一下選取.11 End Sub2022/12/31401 Private Sub pic1_Click(ByVal sender)Handles pic1.Click02 pic1.Image=New Bitmap(c:/vb2008/ch05/image/Poker&num1&.jpg)03 pic2.Image=New Bitmap(c:/vb2008/ch05/image/Poker&num2&.jpg)04 If num1 num2 Then05 lblMsg.Text=你贏了!按洗牌鈕 重玩.06 Else07 If num1=num2 Then08 lblMsg.Text=平

11、 手!按洗牌鈕 重玩.09 Else10 lblMsg.Text=你輸了!按洗牌鈕 重玩.11 End If12 End If13 pic1.Enabled=False14 pic2.Enabled=False15 btnShuffle.Enabled=True16 End Sub2022/12/31501 Private Sub pic2_Click(ByVal sender )Handles pic2.Click02 pic1.Image=New Bitmap(c:/vb2008/ch05/image/Poker&num1&.jpg)03 pic2.Image=New Bitmap(c:/

12、vb2008/ch05/image/Poker&num2&.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(ByVa

13、l sender)Handles btnQuit.Click19 End20 End Sub2022/12/316Image List 影像列示控制項 ImageList 影像列示控制項屬幕後執行控制項，程式執行時表單上看不到，編輯階段顯示在表單正下方。無法直接在表單上顯示圖形，可同時載入多張圖片，以方便在表單使用影像列示清單控制項來共用圖片。如按鈕、選項鈕、核取方塊、標籤等控制項，都具 ImageList 屬性，只要將該屬性值設定為影像列示控制項，就可顯示圖片。圖片控制項物件的 Image 屬性值，也可指定等於影像列示控制項的 Images 屬性值。只要傳圖片的索引值（索引值由0開始）就改變

14、圖片，可將不同圖片檔名置入影像列示控制項，存取時透過索引值，程式碼可更簡化。2022/12/317 PictureBox1 圖片控制項的 Image 屬性由影像列示控制項圖片的 Index 索引值取得圖片的語法如下：PictureBox1.Image=ImageList1.Images(Index)如 Button1 按鈕控制項上面要顯示影像列示控制項ImageList1 的第 2 張圖片，寫法：Button1.ImageList=ImageList1 Button1.ImageIndex=12022/12/31819影像列示控制項的常用屬性 1.Images屬性物件中圖示或圖片的集合。2.C

15、olorDepth屬性（預設值 Depth8Bit）影像色彩的位元數，屬性值：Depth4Bit、Depth8Bit、Depth16Bit、Depth32Bit。3.ImageSize屬性-影像集合中影像的大小，最大值為（256,256）。-影像列示控制項物件適用圖形格式和圖片控制項相同。-因圖片載入到影像列示控制項後，大小會調整成一樣 的大小（同ImageSize屬性值）-圖片最好大小一致，比例要相似以免秀圖時變形。20Timer 計時器控制項 Timer 計時器控制項是 VB 所提供一個計時器，可在指定時間間隔時執行特定的動作。Tick 事件是 Timer 控制項預設事件，只要設定的間隔時

16、間一到，就會觸動Tick事件，只要將執行的程式碼寫在該事件中即可。Tick 事件就像是一個隱形 DoLoop 迴圈，當間隔時間一到就執行事件一次，若要離開迴圈只要設定 Enabled 屬性為 False。事件導向程式設計，迴圈可用 Timer 控制項來取代。一般用來做計時、動畫製作等。Timer 控制項和 ImageList 控制項一樣，都屬幕後執行控制項，執行時在表單上沒有實體物件。21Timer常用屬性和事件 1.Enabled屬性(預設值 False)用來設定是否開始啟動Timer控制項計時器。若設為True 表計時器開始計時，以 Interval 屬性值當作週期每週期一到便觸動(執行)

17、Tick 事件一次。若設為 False就停止計時。2.Interval屬性(預設值 100)用來設定計時器時間間隔(即週期)，以毫秒(千分之一秒)為單位，100 即 0.1秒。若設定Interval=1000，即代表1000毫秒=1秒。Interval 屬性值最大值到64,767，即64.7秒。3.Tick事件（預設事件）當 Enabled 屬性值為True時，Timer 控制項的計時器啟動，每隔一週期(即Interval屬性值)就會觸動 Tick 事件一次。22Step1 建立輸出入介面建立輸出入介面 2022/12/323FileName:dogRun.sln03 Dim start_ti

18、me As Double04 Dim flag As Boolean0506 Private Sub Form1_Load(ByVal sender .)Handles MyBase.Load07 picDog.SizeMode=PictureBoxSizeMode.StretchImage08 picDog.Image=imgDog.Images(0)09 Timer1.Interval=20010 flag=True11 End Sub1213 Private Sub btnStart_Click(ByVal sender )Handles btnStart.Click14 Timer1.

19、Enabled=True15 start_time=Microsoft.VisualBasic.Timer16 End Sub172022/12/32418 Private Sub Timer1_Tick(ByVal sender )Handles Timer1.Tick19 If flag=True Then20 picDog.Image=imgDog.Images(0)21 flag=False22 Else23 picDog.Image=imgDog.Images(1)24 flag=True25 End If26 End Sub2728 Private Sub btnStop_Clic

20、k(ByVal sender _)Handles btnStop.Click29 Timer1.Enabled=False30 MsgBox(總共花費&Microsoft.VisualBasic.Timer-start_time&秒)31 End Sub32 33 End Class2022/12/32526看答案看答案按對答按對答按出題按出題開始開始2022/12/327FileName:memoryTest.sln 01 Public Class Form102 Dim count,ans,ok As Integer03 Private Sub Form1_Load(ByVal sende

21、r)Handles MyBase.Load04 count=0:ok=005 lblTest.Text=06 lblMsg.Text=請按出題鈕開始，題目會在1秒後消失07 btnTest.Enabled=True08 btnCheck.Enabled=False09 btnQuit.Enabled=True10 txtAnswer.Enabled=False11 tmrTest.Enabled=False12 tmrTest.Interval=100013 End Sub2022/12/32815 Private Sub btnTest_Click(ByVal sender )Handles

22、 btnTest.Click16 Dim rnd As New Random17 ans=rnd.Next(100000,1000000)18 count+=1 19 lblTest.Text=ans20 txtAnswer.Text=21 tmrTest.Enabled=True22 btnTest.Enabled=False23 btnCheck.Enabled=True24 btnQuit.Enabled=True25 End Sub2022/12/32927 Private Sub tmrTest_Tick(ByVal sender )Handles tmrTest.Tick28 tm

23、rTest.Enabled=False 關閉計時器29 lblTest.Visible=False 隱藏題目30 lblMsg.Text=請輸入答案31 txtAnswer.Enabled=True 可以輸入32 txtAnswer.Focus()設為作用中物件供使用者輸入答案33 End Sub3435 Private Sub btnCheck_Click(ByVal sender)Handles btnCheck.Click36 lblTest.Visible=True 顯示題目37 If Val(txtAnswer.Text)=ans Then ok+=138 lblMsg.Text=出

24、&count&題,答對&ok&題!按出題鈕進入下一題39 btnTest.Enabled=True40 btnCheck.Enabled=False41 End Sub2022/12/33031Step1 建立輸出入介面建立輸出入介面2022/12/332FileName:卡拉ok字幕機.sln0203 Dim flag As Integer=1 04 Private Sub Form1_Load(ByVal sender)Handles MyBase.Load05 Timer1.Interval=3006 Timer1.Enabled=False 07 pic2.Location=pic1.

25、Location08 pic1.Width=0 09 End Sub1011 Private Sub btnPlay_Click(ByVal sender)Handles btnPlay.Click12 Timer1.Enabled=True13 End Sub142022/12/33315 Private Sub Timer1_Tick(ByVal sender)Handles Timer1.Tick16 If flag=1 Then 17 pic1.Image=New Bitmap(fish1.bmp)18 pic2.Image=New Bitmap(fish2.bmp)19 Else20

26、 pic1.Image=Image.FromFile(fish3.bmp)21 pic2.Image=Image.FromFile(fish4.bmp)22 End If23 If pic1.Width (pic2.Width)Then 24 pic1.Width=pic1.Width+2 s25 Else26 pic2.Location=pic1.Location 27 pic1.Width=0 28 flag=-flag 29 End If30 End Sub3132 Private Sub btnStop_Click(ByVal sender)Handles btnStop.Click33 Timer1.Enabled=False34 End Sub2022/12/334