Delphi制作一個圖片浏覽器,風格和功能類似於著名的看圖軟件ACDSee,使用該程序可選擇驅動器任意文件夾中的圖片進行浏覽,如果圖片格式符合文件列表框中的過濾要求,就會在浏覽器底部的面板上顯示圖片縮微圖,一次最多可以顯示8 張。單擊每一張縮略圖,可以將其放大到本來的尺寸。程序運行界面如下圖所示:

基本設計思路:將綜合利用ListBox,FileListBox,DirectoryListBox 和DriveComboBox 等文件對話框,實現對圖像文件的浏覽。本程序的重點是實現圖像的處理,包括如何實現圖像的加載、圖像大小的縮放以及怎樣把同時顯示多幅圖片與文件處理功能結合起來。這幾個步驟的前後銜接需要進行妥善的處理。
具體設計步驟:
首先需要在指定的文件路徑中加載8 幅圖片,然後調整其尺寸以適應縮微圖像面板的大小,並將其在縮微面板上完整顯示出來。當點擊縮微圖像時,還需編寫代碼實現原圖浏覽。
1.新建工程
(1)啟動Delphi 6.0 程序。選擇“文件”菜單下的“新建”命令,從彈出的子菜單中選擇Application 選項,則出現新建工程的Form1 窗口。
(2)選擇“文件”菜單下的“工程另存為”命令,彈出Save Unit1 As 對話框。在“保存在”列表框中選擇需要存放該窗口文件所在的目錄名;在“文件名”編輯框中填寫文件名,這裡填寫“Unit1”,點擊“保存”按鈕,保存上面的選項。
(3)執行上一步後,將彈出“工程另存為”對話框。在“保存在”列表框中選擇需要存放該工程的目錄名,最好和第(2)步選取相同的目錄;在“文件名”編輯框中填寫保存處理該工程的源代碼的文件名,這裡填寫“Project1”,點擊“保存”按鈕,保存上面的選項。
(4)選擇“文件”菜單下的“新建”命令,從彈出的子菜單中選擇Form 選項,則出現Form2 窗口,選擇“文件”菜單下的“另存為”命令,在彈出的對話框中為該Form 命名並將其保存在前幾步相同的目錄下。
2.修改窗口
(1)激活Form1 窗口。在構件選項板上選擇“標准”頁上的MainMenu 選項,將鼠標移到窗口中點擊,生產菜單圖標。雙擊菜單圖標,進入菜單編輯器,本例中菜單設置為“文件-退出”。
(2)選擇構件選項板上的“標准”頁,選擇其中的ListBox 選項,將鼠標移到窗口中點擊,按下鼠標左鍵拖動生成的對話框至合適的大小和位置;再“選擇構件選項板上的Win3.1 頁”分別選擇FileListBox,DirectoryListBox 和DriveComboBox 選項至窗口中。
(3)選擇構件選項板上的“附加”頁中的Bevel 選項,將其放置在窗口的底部,拖動鼠標調整其合適的大小和位置。再選擇“標准”選項卡中的Panel 選項,將其放置在Bevel之上,再放置7 個Panel 面板,將其平均分布在Bevel 之上。
(4)選擇構件選項板上的“附加”頁中的Image 選項,將其放置在Panel 面板之上。繼續為每個Panel 面板添加Image 構件。
(5)激活Form2 窗口,在構件選項板上選擇“附加”頁中的Image 選項,將其放置在Form2 窗口中央。
3.設置各構件屬性,在上面步驟中添加的構件屬性如下設置:
01
//窗口Form1 的屬性
02
Form1:TForm1
03
Height = 395
04
Left = 238
05
Top = 130
06
Width = 450
07
Name1 = Form1
08
Caption = ’圖片浏覽器’
09
Color = clBtnFace
10
Font.Height = -11
11
Font.Name = MS Sans Serif
12
FormStyle = fsNormal
13
//DriveComboBox1 構件的屬性
14
DriveComboBox1:TDriveComboBox1
15
Height = 19
16
Left = 16
17
Top = 8
18
Width = 201
19
Name = DriveComboBox1
20
Color = clWindow
21
//FilterComboBox1 構件的屬性
22
FilterComboBox1:TFilterComboBox1
23
Height = 21
24
Left = 232
25
Top = 8
26
Width = 193
27
Name = FilterComboBox1
28
Color = clWindow
29
Filter = ’Picture Files(*.bmp;*.jpg)|*.bmp;*.jpg |Bmp Files(*.bmp)|*.bmp|Jpeg
30
Files(*.jpg)|*.jpg’
31
//DirectoryListBox1 構件的屬性
32
DirectoryListBox1:TDirectoryListBox1
33
Height = 137
34
Left = 16
35
Top = 40
36
Width = 201
37
Name = DirectoryListBox1
38
Color = clWindow
39
//FileListBox1 構件的屬性
40
FileListBox1:TFileListBox1
41
Height = 137
42
Left = 232
43
Top = 40
44
Width = 193
45
Mask = ’*.bmp;*.jpg’
46
Name = FileListBox1
47
Color = clWindow
48
//Bevel 構件的屬性
49
Bevel:TBevel
50
Height = 153
51
Left = 8
52
Top = 184
53
Width = 433
54
Name = Bevel1
55
//Panel1 構件的屬性
56
Panel1:Tpanel1
57
Height = 65
58
Left = 16
59
Top = 192
60
Width = 81
61
Name = Panel1
62
BevelLnner = bvLowered
63
BevelOuter = bvLowered
64
BevelWidth = 1
65
BorderStyle = bsSingle
66
BorderWidth = 0
67
//Image1 構件的屬性
68
Image1:TImage1
69
Height = 49
70
Left = 8
71
Top = 8
72
Width = 57
73
Name = Image1
74
ShowHint = True
75
Hint = ’點擊可放大圖像’
76
(Panel2-8 以及Image2-8 的屬性在此省略。)
77
//窗口Form2 的屬性
78
Form2:TForm2
79
Height = 349
80
Left = 221
81
Top = 136
82
Width = 483
83
Name = bigForm
84
Caption = bigForm
85
FormStyle fsNormal
86
//Image 構件的屬性
87
Image:TImage
88
Height = 281
89
Left = 16
90
Top = 16
91
Width = 449
92
Name = bigImage
93
ShowHint = True
94
Hint = ’點擊圖片可以將其關閉’
詳細的代碼分析:
(1)在本例中需要編制多個輔助函數來實現圖像的加載、圖像大小的縮放、在面板上顯示多幅圖片、調整圖像尺寸大小以適應顯示面板的大小以及最後使圖像以原尺寸大小顯示。
procedure TForm1.loadpicture procedure TForm1.updateshowbararray procedure TForm1.unVisibleshowbar procedure TForm1.initshowbararray procedure TForm1.Clearshowbarcolor procedure TForm1.setshowbarcolor procedure TForm1.Visibleshowbar procedure TForm1.bigvIEw procedure TForm1.FormCreate procedure TForm1.FormDestroy
各輔助函數的代碼參見具體程序。這些函數通用性很強,可以很方便地移植到別的程序中。在選取文件的操作中,需通過處理文件列表框中的OnClick()事件來完成,該過程的工作流程是這樣的:首先設置圖像不可見,並清理顯示區顏色,然後從當前的文件開始顯示8 個縮略圖(如果已到文件列表的末尾,將只顯示剩下的所有圖像縮略圖)。
Var startshownum,endshownum:integer //設置文件的起始位置 procedure TForm1.unVisibleshowbar //對不可見圖像的處理 procedure TForm1.Clearshowbarcolor //清理顯示區顏色
在編寫縮略圖中需要進行兩個步驟:第一是判斷文件格式並裝載起來;第二是按比例調整圖像寬高和顯示位置。前者利用函數Loadpicture() 完成, 後者利用函數Updateshowbararray()完成。在觀看原尺寸圖像時,需處理每一個圖像的OnClick()事件,利用BigVIEw 函數使圖像恢復本來的大小。
SetShowBarColor(CurrentSelectedNum) //設置選中圖像的顏色 BigView(CurrentSelectedNum) //利用BigVIEw()函數進行大圖觀看
窗體的初始化,需要同時執行InitShowBarArray ()和UnVisibleShowBar()這兩個函數。部分代碼如下:
jpgImage:=tjpegImage.Create;//在程序中加入一個TjpegImage 對象變量 pictureWidth:=80; pictureHeight:=60; initshowbararray; unVisibleshowbar;//初始化設定
(2)當選擇不同的驅動硬盤時,文件夾列表中顯示不同的文件夾。DriveComboBox1的OnChange 事件代碼如下:
procedure TForm1.DriveComboBox1Change(Sender: TObject); begin Form1.DirectoryListBox1.Drive:=Form1.DriveComboBox1.Drive; end;
(3)DirectoryListBox1 的OnChange 事件代碼如下:
procedure TForm1.DirectoryListBox1Change(Sender: TObject); begin Form1.FileListBox1.Directory:=Form1.DirectoryListBox1.Directory; end;
(4)當選擇不同的文件夾路徑時,在FileListBox1 中將顯示該文件夾中所有符合格式的圖像文件。點擊不同的文件,在底部的面板上可以看到該文件以下(含該圖像文件)8個圖像文件的縮略圖。FileListBox1 的OnClick 事件代碼如下:
procedure TForm1.FileListBox1Click(Sender: TObject); var startshownum,endshownum:integer; begin if filelistbox1.Items.count<>0 then begin unVisibleshowbar; Clearshowbarcolor; startshownum:=filelistbox1.ItemIndex; if filelistbox1.ItemIndex+maxshowbmpnum<=filelistbox1.Items.count-1 then endshownum:=filelistbox1.ItemIndex+maxshowbmpnum else endshownum:=filelistbox1.Items.count; currentselectednum:=1; setshowbarcolor(currentselectednum); updateshowbararray(startshownum,endshownum); Visibleshowbar(endshownum-filelistbox1.ItemIndex); end; end;
(5)點擊面板上方的圖像縮略圖,可以以原大小尺寸觀察該圖像,同時在新彈出窗口上方顯示該圖像文件的路徑,Image 構件的OnClick 事件代碼如下(以Image1 為例,其他類似):
procedure TForm1.Image1Click(Sender: TObject); var i:integer; begin i:=1; currentselectednum:=1; while i<=maxshowbmpnum do begin if showbararray[i].showImage=(sender as TImage) then begin currentselectednum:=i; i:=i+maxshowbmpnum; end else i:=i+1; end; Clearshowbarcolor; setshowbarcolor(currentselectednum); bigvIEw(currentselectednum); end;
(6)點擊文件菜單中的退出按鈕,可以退出該圖像浏覽器,點擊該菜單的代碼如下:
procedure TForm1.N2Click(Sender: TObject); begin close; end;
(7)用鼠標點擊Unit2 的圖像,可以關閉該圖像,代碼如下:
procedure TbigForm.bigImageClick(Sender: TObject); begin Close; end;
完整代碼如下:
vIEw source