利用VB設計圖像的顯示效果

　　圖像顯示是程序設計中必不可少的內容。我們可使用VB中的圖片框控制或圖像控制進行圖像顯示的操作,但它的顯示屬於直接顯示,不像一些多媒體制作系統(如Authorware)那樣對圖像的顯示提供多種效果。具有一定效果的圖像顯示能給用戶以新穎、難忘的感覺。 如何利用VB設計圖像的顯示效果是本文討論的內容。

　　首先我們來了解一下圖像的顯示效果:一幅圖像可以以這樣或那樣的方式顯示在屏幕上的某一指定區域,如:可以從左到右逐漸顯示出來,也可以從中間向兩邊(即開門方式)逐漸顯示,還可以像百葉窗那樣顯示等等,這些都是顯示效果。采用這樣的顯示效果可給圖像的顯示增加動感,從而增強界面的可觀性？

一、分析

　　要使圖像顯示具有一定的效果,需先將圖像分割成若干塊,然後按照所需效果利用程序控制圖像塊的顯示次序及時間間隔。例如:要設計從左到右的顯示效果,可把圖像分割成若干列塊,然後在程序中先顯示最左邊的一塊,之後,第二塊、第三塊……,直到最後一塊。為了分割圖像,可使用VB中的圖片剪裁控制,它可將圖像分割成若干行(Col)、列(Row)。為使圖像塊與塊之間的顯示具有一定的時間間隔,以達到動態效果,可使用VB中的計時器。另外, 要顯示圖像塊,需要在界面上有相應的控制來放置它們,VB中的圖片框和圖像控制可用來顯示圖像,但它們只能顯示出某一塊,也就是在裝入下一個圖像塊時,當前顯示的圖像塊被覆蓋。為了能依次顯示出所有的塊,可使用VB中的網格控制,把網格設計成同樣的行數和列數 ,把網格單元(Cell)的大小設計成同圖像塊一樣,在對應的網格單元中裝入相應的圖像塊即可。

二、設計步驟

1、確定圖像大小及要分割的行、列數

　　利用圖像控制工具在窗體上創建一個Image,用鼠標雙擊其屬性窗口中的Picture項以裝入要顯示的圖像文件。然後記住其寬度和高度,其單位默認為Twips(1twip=1/15Pixel),之後刪除此Image。再用圖片剪裁控制工具在窗體上建立一個PictureClip,雙擊其屬性窗口中的Picture項可裝入要分割的圖像,然後將其屬性Rows和Cols設置為對應的要分割的行、列數。在確定要分割的行、列數時應注意:要使行、列數能被圖像的高度、寬度對應整除,否則會在圖像塊與塊之間顯示縫隙。商數不小於15(即一個Pixel大小),因為網格的最小單位為1個 el。　

2、設置網格大小及行、列數

　　利用網格控制工具在窗體適當位置建立一個Grid,將其屬性窗口中的Width和Height屬性設置為對應的圖像寬度和高度,Rows和Cols屬性設置為對應的行、列數,並將其FixedCols、FixedRows、ScrollBars屬性設置為0,Enabled、Gridlines、HighLight屬性設置為False。　

3、設置計時器時間間隔

　　利用計時器控制工具在窗體上建立一個Timer,將其Interval(間隔)屬性設置為適當的值, 其單位為毫秒。　

4、編程設置網格單元大小;編制圖像塊的顯示程序

　　在程序中,利用屬性設置語句把網格單元的大小設置為圖像塊大小,即網格單元寬度=圖像寬度/列數,網格單元高度=圖像高度/行數。

　　在計時器過程中編寫圖像塊的顯示程序。　

三、實例

　　假設一個圖像寬度為5280Twips,高度為3600Twips。

1、從左到右方式

　　窗體及其中各控制的屬性設置:

　　

Begin Form Display 
Caption="圖像顯示" 
Height=4530 
Left=1845 
Top=975 
Width=6120 
Begin PictureClip pict 
Cols=88 
Rows=1 
End 
Begin Grid Grid1 
BorderStyle=1 
Cols=88 
Enabed=False 
FixedCols=0 
FixedRows=0 
GridLines=False 
Height=3600 
HighLight=False 
Left=240 
Rows=1 
ScrollBars=0 
Top=240 
Width=5280 
End 
Begin Timer Timer1 
Enabled=False 
Interval=30 
End 
End 

　　窗體的通用聲明部分:

　　

Dim bc As Integer 圖像塊控制變量過程代碼: 
Sub Form__Load() 
Dim i As Integer 
bc=0 
Gridl.RowHeight(0)=3600 網格單元的高度 
For i=0 To 87 
Grid1.ColWidth(i)=5280/88 網格單元的寬度 
Next i 
Timerl.Enabled=True 啟動計時器 
End Sub 
Sub Timer1_timer() 
If bc=88 Then 
Timer1.Enabled=False 停止計時 
Else 
Grid1.Col=bc 
Grid1.Picture=Pict.GraphicCell(bc) 

　　在網格單元中裝入對應的圖像塊

　　

bc=bc+1 
End If 
End Sub 

2、開門方式

　　窗體及其中各控制的屬性設置:同1。

　　窗體的通用聲明部分:同1。

　　過程代碼:

　　

Sub Form__Load() 
Dim i As Integer 
bc=43 
Grid1.RowHeight(0)=3600 
For i=0 To 87 
Grid1.Co1Width(i)=5280/88 
Next i 
Timer1.Enabled=True 
End Sub 
Sub Timerl_Timer() 
Grid1.Col=bc 
Grid1.Picture=Pict.GraphicCell(bc) 
Grid1.Col=87-bc 
Grid1.Picture=Pict.GraphicCell(87-bc) 
bc=bc-1 
if bc＜ 0 Then Timerl.Enabled=False 
End Sub 

3、水平百葉窗方式

　　窗體及其中各控制的屬性設置:同1。

　　窗體的通用聲明部分:同1。

　　過程代碼:

　　

Sub Form__Load() 
Dim i As Integer 
bc=0 
Grid1.RowHeight(0)=3600 
For i=0 To 87 
Grid1.Co1Width(i)=5280/88 
Next i 
Timer1.Enabled=True 
End Sub 
Sub Timer1__Timer() 
Dim i As Integer 
For i =0 to 10 
Grid1.Col=8 * i+bc 
Grid1.Picture=Pict.GraphicCe11(8 * i+bc) 
Next i 
bc=bc+1 
If bc=8 Then Timer1.Enabled=False 
End Sub 

　　以上介紹了圖像的三種顯示效果。類似地,還可設計出其它一些顯示效果,如:從右到左、從上到下、從下到上、關門方式、垂直百葉窗方式、相機光圈收縮方式、相機光圈開放方式等。

　　以上程序在中文Windows3.2、Visual Basic 3.0專業版上調試通過。