- 如何利用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專業版上調試通過。