Delphi制作图像特殊显示效果

Delphi制作实现图像的各种显示效果，比如百叶窗、渐变、淡入淡出、水平交错、雨滴效果等，用鼠标点击“打开图像”按钮，可以选择图像文件导入到窗体中；点击其它各个按钮，可以实现图像显示特效，例如：点击“推拉效果”，图像将从窗体下方缓缓向上升起；点击“垂直交错”，图片将从窗口上下同时出现，直到相互汇合，形成一幅完整的图片；点击“水平交错”，图片将从窗体的左右同时出现，直到相互汇合，形成一幅完整的图片；点击“雨滴效果”，图像将像下雨一样从上部向下滴落，直至形成完整的图片；点击“百叶窗效果”，将产生如下图所示的效果；点击“积木效果”按钮，图像将从上方以堆积的方式落下。

 设计思路：在Delphi 中，实现一幅图像的显示是非常简单的，只要在Form 中定义一个Image 控件，设置其picture 属性，然后选择任何有效的图像文件进行load 即可。但这只是直接将图形显示在窗体中，毫无技巧可言。目前在许多学习软件、游戏光盘中，经常会看到各种图像显示技巧，凭着图像的移动、交错、雨滴状、百叶窗、积木堆叠等显现方式，使画面变得更为生动活泼，更能吸引观众。本文即是介绍如何在Delphi 中实现各种图像显示技巧。

设计步骤：

实现图像显示特效的操作很简单，只需要对图像分成不同的部分，缓存起来，然后逐步对图像进行扫描即可。

1．新建工程

（1）启动Delphi 6.0 程序。选择“文件”菜单下的“新建”命令，从弹出的子菜单中选择Application 选项，则出现新建工程的Form1 窗口。

（2）选择“文件”菜单下的“工程另存为”命令，弹出Save Unitl As 对话框。在“保存在”列表框中选择需要存放该窗口文件所在的目录名；在“文件名”编辑框中填写文件名，这里填写“Unit1”，点击“保存”按钮，保存上面的选项。

（3）执行上一步后，将弹出“工程另存为”对话框。在“保存在”列表框中选择需要存放该工程的目录名，最好和第（2）步选取相同的目录；在“文件名”编辑框中填写保存处理该工程的源代码的文件名，这里填写“Project1”，点击“保存”按钮，保存上面的选项。

2．修改窗口

（1）激活Unit1 窗口，在“属性”面板中设置该窗体的Caption 属性为“图像显示特效”，Name 属性为“Form1”。

（2）选择“标准”页上的Panel 选项，在窗体中添加1 个Panel 控件。在“属性”面板中设置BevelOuter 属性为“bvRaised”，BevelInner 属性为“bvNone”，BevelWidth 为1，Align 属性为“alTop”。
（3）选择“标准”页上的Button 选项，在Panel1 控件上添加8 个Button 控件，在“属性”面板中设置其Caption 属性分别为“打开图像”、“垂直交错”、“推拉效果”、“水平交错”、“雨滴效果”、“百叶窗效果”、“积木效果”和“退出”。

（4）选择“附加”页上的Image 选项，在窗体中添加一个Image 控件，在“属性”面板中设置其Align 属性为“alClient”，用鼠标点击Picture 属性右边的按钮，从弹出的对话框中导入合适的图像文件。

（5）选择“对话框”页上的OpenPictureDialog 选项，在窗体中添加一个“属性”控件，在Object Inspecter 面板中设置其Name 为“OpenPictureDialog1”，Options 属性为“[ofHideReadOnly,ofEnableSizing]”。

用Delphi实现百叶窗、雨滴、交错和渐变显示效果，此文将重点介绍代码的编写过程，向你一步一步分析如何实现该程序。

（1）实现垂直交错效果的原理是：将要显示的图形拆成两部分，奇数条扫描线由上往下搬移，偶数条扫描线的部分则由下往上搬移，而且两者同时进行。从屏幕上便可看到分别由上下两端出现的较淡图形向屏幕中央移动，直到完全清楚为止。代码如下：

procedure TForm1.Button2Click(Sender: TObject);
var
newbmp:Tbitmap;
i,j,bmpHeight,bmpWidth:integer;
begin
Image1.Visible:=False;//设置Image1 和Scrollbox1 的可见性
scrollbox1.Visible:=False;
panel1.Align:=albottom;//设置Panel1 的位置
newbmp:= Tbitmap.Create;//创建一个图像对象
//设置图像的各项属性
newbmp.Width:=Image1.Width;
newbmp.Height:=Image1.Height;
bmpHeight:=Image1.Height;
bmpWidth:=Image1.Width;
i:=0;
while i<=bmpHeight do
begin
j:=i;
while j >0 do
//将一个画布的矩形区域拷贝到另一个画布的矩形区域
begin
newbmp.Canvas.copyrect(rect(0,j-1,bmpWidth,j),
Image1.Canvas,rect(0,bmpHeight-i+j-1,bmpWidth,bmpHeight-i+j));
newbmp.Canvas.copyrect(rect(0,bmpHeight-j,bmpWidth,bmpHeight-j+1),Image1.Canvas,
rect(0,i-j,bmpWidth,i-j+1));
j:=j-2;
end;
Form1.Canvas.draw(0,0,newbmp);//窗体重绘
i:=i+2;
end;
newbmp.free;//释放图像对象
end;

 

（2）推拉效果将要显示的图形是由上、下、左、右方向拉进屏幕内显示地，同时将屏幕上原来的旧图覆盖，此种效果可分为四种，上拉、下拉、左拉、右拉，但原理都差不多，以上拉效果为例。原理：首先将放在暂存图形的第一条水平线，搬移至要显示位图的最后一条水平线，接着再将暂存图形的前两条水平线，依序搬移至要显示位图的最后两条水平线，然后搬移前三条、前四条⋯⋯直到全部图形数据搬完为止。在搬移的过程中即可看到显示的位图由下而上浮起，而达到上拉的效果：

//推拉效果
procedure TForm1.Button3Click(Sender: TObject);
var
newbmp: Tbitmap;
i,bmpHeight,bmpWidth:integer;
begin
Image1.Visible:=False;//设置Image1 和Scrollbox1 的可见性
scrollbox1.Visible:=False;
panel1.Align:=albottom;//设置Panel1 的位置
newbmp:= Tbitmap.Create;//创建一个图像对象
//设置图像的各项属性
newbmp.Width:=Image1.Width;
newbmp.Height:=Image1.Height;
bmpHeight:=Image1.Height;
bmpWidth:=Image1.Width;
for i:=0 to bmpHeight do
//将一个画布的矩形区域拷贝到另一个画布的矩形区域
begin ewbmp.Canvas.copyrect(rect(0,bmpHeight-i,bmpWidth,bmpHeight),Image1.
Canvas,rect(0,0,bmpWidth,i));
Form1.Canvas.draw(0,0,newbmp);//窗体重绘
end;
newbmp.free;//释放图像对象
end;

 

（3）水平交错效果的原理同垂直交错效果的原理一样，只是将分成两组后的图形分别由左右两端移进屏幕。代码如下：

//水平交错效果
procedure TForm1.Button4Click(Sender: TObject);
var
newbmp:Tbitmap;
i,j,bmpHeight,bmpWidth:integer;
begin
Image1.Visible:=False;//设置Image1 和Scrollbox1 的可见性
scrollbox1.Visible:=False;
panel1.Align:=albottom;//设置Panel1 的位置
newbmp:= Tbitmap.Create;//创建一个图像对象
//设置图像的各项属性
newbmp.Width:=Image1.Width;
newbmp.Height:=Image1.Height;
bmpHeight:=Image1.Height;
bmpWidth:=Image1.Width;
i:=0;
while i<=bmpWidth do
begin
j:=i;
while j >0 do
//将一个画布的矩形区域拷贝到另一个画布的矩形区域
begin
Image1.Visible:=False;
scrollbox1.Visible:=False;
panel1.Align:=albottom;
newbmp.Canvas.copyrect(rect(j-1,0,j,bmpHeight),Image1.Canvas,rect(bmpWidth-i+j-1,0,
bmpWidth-i+j,bmpHeight));
newbmp.Canvas.copyrect(rect(bmpWidth-j,0,bmpWidth-j+1,bmpHeight),Image1.Canvas,
rect(i-j,0,i-j+1,bmpHeight));
j:=j-2;
end;
Form1.Canvas.draw(0,0,newbmp);//窗体重绘
i:=i+2;
end;
newbmp.free;//释放图像对象
end;

 

（4）雨滴效果的原理：将暂存图形的最后一条扫描线，依序搬移到显示位图的第一条到最后一条扫描线，让此条扫描线在屏幕上留下它的轨迹。接着再把暂存图形的倒数第二条扫描线，依序搬移到显示位图的第一条到倒数第二条扫描线。其余的扫描线依此类推：

//雨滴效果
procedure TForm1.Button5Click(Sender: TObject);
var
newbmp:Tbitmap;
i,j,bmpHeight,bmpWidth:integer;
begin
Image1.Visible:=False;//设置Image1 和Scrollbox1 的可见性
scrollbox1.Visible:=False;
panel1.Align:=albottom;//设置Panel1 的位置
newbmp:= Tbitmap.Create;//创建一个图像对象
//设置图像的各项属性
newbmp.Width:=Image1.Width;
newbmp.Height:=Image1.Height;
bmpHeight:=Image1.Height;
bmpWidth:=Image1.Width;
for i:=bmpHeight downto 1 do
for j:=1 to i do
//将一个画布的矩形区域拷贝到另一个画布的矩形区域
begin
newbmp.Canvas.copyrect(rect(0,j-1,bmpWidth,j),Image1.Canvas,rect(0,i-1,bmpWidth,i));
Form1.Canvas.draw(0,0,newbmp);//窗体重绘
end;
newbmp.free;//释放图像对象
end;

 

（5）积木效果的原理是雨滴效果的一种变化，不同之处在于，积木效果每次搬移的是一块图形，而不只是一根扫描线。代码如下：

//积木效果
procedure TForm1.Button7Click(Sender: TObject);
var
newbmp:Tbitmap;
i,j,bmpHeight,bmpWidth:integer;
begin
Image1.Visible:=False;//设置Image1 和Scrollbox1 的可见性
scrollbox1.Visible:=False;
panel1.Align:=albottom;//设置Panel1 的位置
newbmp:= Tbitmap.Create;//创建一个图像对象
//设置图像的各项属性
newbmp.Width:=Image1.Width;
newbmp.Height:=Image1.Height;
bmpHeight:=Image1.Height;
bmpWidth:=Image1.Width;
i:=bmpHeight;
while i>0 do
begin
for j:=10 to i do
//将一个画布的矩形区域拷贝到另一个画布的矩形区域
begin
newbmp.Canvas.copyrect(rect(0,j-10,bmpWidth,j),Image1.Canvas,rect(0,i-10,bmpWidth,i));
Form1.Canvas.draw(0,0,newbmp);//窗体重绘
end;
i:=i-10;
end;
newbmp.free;//释放图像对象
end;

 

（6）百叶窗效果的原理：将放在暂存图形的数据分成若干组，然后依次从第一组到最后一组搬移，第一次每组各搬移第一条扫描线到显示位图的相应位置，第二次搬移第二条扫描线，接着搬移第三条、第四条扫描线。代码如下：

//百叶窗效果
procedure TForm1.Button6Click(Sender: TObject);
var
newbmp:Tbitmap;
i,j,bmpHeight,bmpWidth:integer;
xgroup,xcount:integer;
begin
Image1.Visible:=False;//设置Image1 和Scrollbox1 的可见性
scrollbox1.Visible:=False;
panel1.Align:=albottom;//设置Panel1 的位置
newbmp:= Tbitmap.Create;//创建一个图像对象
//设置图像的各项属性
newbmp.Width:=Image1.Width;
newbmp.Height:=Image1.Height;
bmpHeight:=Image1.Height;
bmpWidth:=Image1.Width;
xgroup:=16;
xcount:=bmpHeight div xgroup;
for i:=0 to xcount do
for j:=0 to xgroup do
//将一个画布的矩形区域拷贝到另一个画布的矩形区域
begin
newbmp.Canvas.copyrect(rect(0,xcount*j+i-1,bmpWidth,xcount*j+i),Image1.Canvas,
rect(0,xcount*j+i-1,bmpWidth,xcount*j+i));
Form1.Canvas.draw(0,0,newbmp);//窗体重绘
end;
newbmp.free;//释放图像对象
end;

 

（7）点击“打开图像”按钮，可以导入选定的图像文件。代码如下：

procedure TForm1.Button1Click(Sender: TObject);
begin
OpenPictureDialog1.filter:=’Bitmap file(*.bmp)|*.bmp’;//文件格式过滤
Form1.OpenPictureDialog1.Title:=’请选择一个图像文件打开’;//打开对话框标题
Form1.OpenPictureDialog1.InitialDir:=’C:\My Documents\My Pictures’;//导入文件初始路径
if OpenPictureDialog1.Execute then
Image1.Picture.LoadFromFile(openpicturedialog1.FileName);//导入图像文件
Image1.Visible:=true;//设置Image1 和Scrollbox1 的可见性
scrollbox1.Visible:=true;
end;