第五章 基础控件的增强功能（二）

5-1 image 控件功能：提供程序显示图像，这个图片可以是位图、图标（ .bmp .jpg .gif ) 等文件格式图形。

• 其关键性接口成员： 类别 名称 说明 属性 picture 用于设置装载的图形 stretch 可伸缩性

• 装载图形可以在属性窗口中设置，也可以在运行时用程序代码加载。

• 用程序代码对 image 控件装载图片的方法： image 名 .picture=loadpicture( 文件标识符 )

• 当装入某张图片到 image 控件中时， image 默认的模式是让图像框的大小随着装入的图像来改变。

• 如果事先将其 stretch 属性设置为 true ，那么被装入的图像将按照图像框的大小做等比例的缩放。例：编写一个显示图片程序，能按照用户要求可以将图像调整成 跟image 框相等大小或者以图像原来大小来显示。（ ch05\ 练习 1.vbp)

5-2 picturebox 控件功能： picture 控件除了可以显示图像之外，还可以用来描绘图形。

• Picturebox 被装入图片时， picturebox 的大小并不会随着图象的大小来改变，这样的好处是：除了显示图片，还保留某些空间来绘图。

• 当确实需要将 picturebox 控件大小调整到和图像大小相同，此时只需要将 picturebox 中 autosize 属性设置为 true 。例：利用 picturebox 控件显示西瓜图片，并在右侧画上一个矩形和椭园形。（ ch05\ 练习 2.vbp)

例：写一个可供用户画直线、弧、园、椭园及输入文字的程序。（ ch05\ 画板 .vbp)

1 ）在窗体上放置一个框架，在内放置一个 option 控件数组。2 ）再放置一个框架，在内放置一个 label 控件数组。3 ）在窗体上放置一个 picturebox 控件。

• 在窗体通用处定义模块全局变量dim x0, y0 as single

dim x1, y1 as single

dim ang1, ang2 as single

dim k,r as single

dim switch as integer

• 无论选择哪一种画图，都会触发 option1_click(index as integer) 事件在该事件中必须用一个全局变量记住用户选择了哪种画图（用 switch) 有些画图要求给初始值，则这些初始值在这里给出。Private sub option1_click(index as integer)

switch=index

if swich=3 then

pi=3,14159

ang1=pi*val(inpuitbox(“ 输入起始角：” ))/180

ang2=pi*val(inpuitbox(“ 输入终止角：” ))/180

endif

if switch=4 then

k=val(inputbox(“ 输入椭园比率：” ))

end if

if switch=5 then

picture1.mousepointer=3

end if

if switch=6 then

picrure1.cls

x0=empty

x1=empty

endif

end sub

• 无论选择哪一种画图方式，都是按下鼠标、移动鼠标、放开鼠标。即是一定触发 mousedown 、 mousemove 、 mouseup 事件，在每一个事件中利用 switch 判断用户选择哪种画图。写下这个画图的代码。

• 在 mousedown 事件中获得画图的起始点。Private sub picture1_mousedown(button as integer,shift as integer, x as single, y as single)

x0=x

y0=y

if switch<>5 the

picture1.mousepointer=2

endif

end sub

• 在 mousemove 事件中，根据用户选择画图方式，写下代码：

private sub picture1_mousemove(button as intger, shift as integer, x as single, y as single)

select case switch

case 0

写下画直线代码case 1

写下画矩形代码case 2

写下画园代码case 3

写下画弧代码case 4

写下画椭圆代码 end select

end sub

• 在 mouseup 事件中，根据用户选择画图方式，写下代码：private sub picture1_mouseup(button as intger, shift as integer, x as single, y as single)

select case switch

case 0

写下画直线代码case 1

写下画矩形代码case 2

写下画园代码case 3

写下画弧代码case 4

写下画椭圆代码case 5

写下在 picturebox 中输入文字的代码 end select

end sub

• 无论用户单击哪一种颜色，都会触发 privte sub label1_click(index as integer) ， index 就是控件数组的下标。Private sub label1_click(index as integer)

select case index

case 0

picture1.forecolor=vbred

case 1

picture1.forecolor=vbyellow

case 2

picture1.forecolor=vbgreen

case 3

picture1.forecolor=vbblue

case 4

picture1.forecolor=vbblack

end select

end sub

• Picture 属性与 image 属性有何区别除了 image 和 picturebox 控件之外，许多控件及对象都有 picture属性，但是对于 picturebox 及 from 来说，除了 picture 属性之外，还含有 image 属性， image 属性与 picture 属性有何区别？1 ）从可读写的角度来看

image 属生并不是“设计阶段”可以使用的属性，所以在属生窗口中看不到这个属性，另一方面进入“运行阶段”之后，picture 属性可读可写，而 image 属性是只读的。2 ）背景与图像

如果将 form 和 picture 看作一面墙，那么 picture 属生就像油漆所涂上去的背景图，而 image 属性则像是使用粉笔画上去的图形或文字 。例：运行 ch05\picimg.vbp

• 发现属于 image 的图像会消失，如何恢复其原来图像，可以使用autodraw 属性或者 paint 事件。

• 为什么一旦将 autoredraw 属性设置为 true ， picturebox 、 form 就具有重新绘图形能力。

原因：一旦将 autoredraw 属性设为 true ，那么所有绘图的操作和内容都会记录在 image 属性中，当 picturebox 和 form重新回到屏幕时，所有绘图操作就会重新被运行一次，使得 picturebox 及 form恢复原样。

• 如何保存 picturebox 或 form 上面图像方法：调用 savepicture语句，其格式：保存背景图：

savepicture 对象名 .picture, 图像文件名保存对象的整个图像：

savepicture 对象名 .image, 图像文件名例：保存 picturebox 或 form 上面图像。（ ch05\ 练习 4.vbp)

例：在上面程序中，加上一个命令按钮，其作用在 picture1 上画上一个矩形及园形，然后按“ image“ 方式 保存该图形，观察是否保存了矩形及园形，如果没有，进行修改再保存。（ ch05\ 练习 5.vbp)

练习：打开练习 3.vbp工程，修改程序，使得该程序具有将画的图形保存下来。

5-3 滚动条控件有水平滚动条 (hscrollbar) 和垂直滚动条 (vscrollbar) ，它们除了方向不同外，两者的用法和接口成员是完全相同，下表是滚动条的关键性接口成员： 类别 名称 说明 属性 min 滚动条的最小值

max 滚动条的最大值smallchage 单击滚动条上升按钮或下降按钮变动值largechange 单击滚动条空白处的变动值value 滚动条的当前值

事件 change 当 value 属性值改变时发生这个事件

例：在窗体上放置一个滚动条要控件，要求将滚动条的值显示在文本框（ ch05\ 练习 7.vbp)

在 vscrollbar1 对象的属性值设置如下：min 0

max 100

smallchange 1

largechange 10

例：设计一个调色板应用程序 (ch05\ 练习 8.vbp)

提示：要使用到一个 RGB函数格式： RGB(red, green, blue)

其中： red 、 green 、 blue 数值： 0～ 255

功能：返回一个 RGB 颜色值

5-4 计时器控件计时器控件是一种按一定时间间隔触发事件的控件，在应用程序中用于在一定时间间隔执行某些操作。

• 关键性接口成员：类别 名称 说明属性 name 对象名称

enable 决定对象是否有interval 触发计时器两个事件之间毫秒数。

单位为毫秒（ 1/1000秒）

取值范围： 0～ 64767

事件 timer 在间隔了一个 interval 设定时间后触 发该事件。

• 过程： VB 中有两类过程1 ）一类是系统提供的内部函数过程和事件过程。2 ）另一类是用户根据自已需要定义，供事件过程多次调用的过程。

使用过程的好处是使程序简练，便于调试和维护。在 VB 中自定义过程分以下几种：

以“ sub” 保留字开始的子过程以“ function” 保留字开始的函数过程以“ property” 保留字开头的属性过程以“ event” 保留字开始的事件过程1 ）过程的定义自定义过程和函数方法：

在窗体 / 标准模式块的代码窗口中把插入点放在所有过程之外，输入子过程名或 function函数过程名即可。自定义过程形式：[static][public][private]sub 子过程名 [ （参数列表） ]

局部变量或常量定义语句[ exit sub]

语句end sub

自定义函数：[static][public][private] function 函数过程名 ( [参数列表 ] ) [as 类型 ]

局部变量或常量定义语句函数名 =返回值[exit funtion]

语句函数名 =返回值

end function

参数列表：[byval] 变量名 [as 类型 ] [,byval ] 变量名 [as 类型 ]

有形参和哑元（ byval 变量名是形参），形参是按值传递，哑元是按地址传递，（亦称引用传递），亦可以无参数，但在函数过程中无参数时亦要加“（）”

• 在定义函数过程中，缺省 [ as 类型 ] 则函数值是变体类型

例：设计一个倒计时应用程序（ ch05/ 练习 9.vbp)

分析：

1 ）单击“设置倒计时按钮时，输入倒计时分钟数，显示格式： mm:ss

2 ）单击“开始倒计时”按钮后，每隔一秒钟，必须重新向 label 框 caption 赋值所剩分钟数，显示格式： mm:ss

3 ）在窗体中添加一个计时器： timer1

timer1.interval=1000

当 timer1.enable=true

则每隔一秒触发 timer1_timer 事件，在该事件中向 label 框的 caption赋以所剩的时间，显示格式： mm:ss

ss<1（秒）T F

mm<1（分）T F

时间到

timer1.enable=false

退出程序

mm=mm-1

ss=59

ss=ss-1

显示时间

label1.caption=timestring(mm,ss)

4 ）由于输入的倒计时数是数值，且程序中 mm,ss亦是数值型变量，所以必须编写一个函数将这些时间转换为指定格式： mm:ss

Dim mm, ss As Integer 'mm表示分， ss表示秒，都是全局变量Function timestring(ByVal m As Integer, ByVal s As Integer)

Dim mstr, sstr As String

If m < 10 Then

mstr = "0" + Trim(Str(m)) 'm表示分， s表示秒Else

mstr = Trim(Str(m))

End If

If s < 10 Then

sstr = "0" + Trim(Str(s))

Else

sstr = Trim(Str(s))

End If

timestring = mstr + " ： " + sstr

End Function

• 利用图片框和计时器设计简单动画 我们常希望在屏幕上出现动画效果，比如汽车向前行驶、地球绕太阳旋转等。

其实简单的动画无非是使用一个图像连续地在屏幕上移动位置而已。复杂一些动画除了将一个图像整体移动外，还可以改变图像的形状和尺寸。

• 在 VB 中实现动画有如下几种方法：1 ）使用 move 方法移动控件或图片2 ）改变图像的位置和尺寸，达到动画效果3 ）在不同位置显示不同的图片

不论是用何种方法，都有可以用计时器定时触发有关动画的事件过程，用计时器的 inetrval 属性控制图像移动速度。

• Move 方法：对象名 .move left , top [, width, length ]

left ：表示对象左边框离窗体边框距离top ：表示对象顶部与窗体顶部之间距离width ：表示对象新宽度length ：表示对象新高度

例：以蓝天白云为背景，显示地球围绕太阳旋转的画面。（ ch05\练习 9a.vbp)

分析：

1 ）放置一个 picturebox 在窗体上与窗体大小相同，放置背景图 clouder.bmp

2 ）在 picture1 上放置两个 image1,image2 。

在 form_load 事件中：将 image1.stretch=true image2.stretch=true

将 image1 移到屏幕中心并装入图片 sum.ico ，在 image2 中装入 earth.ico

3 ）地球绕着太阳作园周运动（园周半径 r=1500)

即是说： image2 控件的左上角坐标（ x, y) 是不断变化。

width / 2

i

r(x, y)

x=r*cos(i )+width/2-image2.width/2

y=height/2- r*sin( i ) -image2.height/2

我们想每 0.1秒更换一次 (x, y) 值，则在 timer1.interval=100

在 timer1_timer 事件中写下： Private Sub Timer1_Timer()

Dim x, y As Single

Dim r As Integer

Static i As Single

r = 1500

x = Cos(i) * r + Width / 2 - Image2.Width / 2

y = Height / 2 - r * Sin(i) - Image2.Height / 2

i = i + 0.1

Image2.Move x, y

End Sub

例：在窗体上画一幅明月高挂、群星闪烁的画面。要求在程序开始运行时，将一个月亮的图形装入到图像框中。窗体上有一个计时器，其 interval 属性值为 500 ，因此计时器每隔 0.5秒发生一次timer 事件。在 timer 事件过程中，在随机产生的 500 个（ x, y)坐标处以白色“点亮”该点。因此出现 500 个亮点，然后以 cls 方法清除屏幕。在下一次 timer 事件发生时，又出现另外 500 个点，然后又清除屏幕。如此反复就出现“群星闪烁”的效果。（ ch05\练习 9c.vbp)

5-5 文件夹控件文件夹控件包含：

驱动器列表框： drivelistbox

文件夹列表框： dirlistbox

文件列表框： filelistbox

• 驱动器列表框：当 drivelistbox 放置在窗体之后，它会显示当前驱动器，而拉下右边的下拉按钮，可以列出当前计算机所有的磁盘驱动器，经用户选择后，可改变当前驱动器。

类别 名称 说明属性 drive 读取（修改）当前驱动器号事件 change 当前驱动器有所变动时则发生该事件。

• 文件夹列表框：当 dirlistbox 放置在窗体之后，它会显示当前文件夹，而且用户也可以改变这个文件夹。在程序中，可以通过它的 path 属性读取当前文件夹或改变当前文件夹

类别 名称 说明属性 path 读取（修改）当前文件夹事件 change 当前文件有所变动时则发生该事件。

• 文件列表框：

当 filelistbox 放置在窗体之后，它会显示某个指定文件夹（由 path 属性决定）的某类文件列表（由 pattern 属性决定）。刚放置在窗体上的 filelistbox 控件 pattern 属性值为“ *.* ” ，表示显示所有文件，但是可以利用属性来改变它的值。• 当用户从文件夹列表框中选择了文件，程序可以利用 filename 属性读取这个 文件名。 类别 名称 说明 事件 click 当在文件列表框中选取了文件时发生该事件。 属性 path 当前文件夹

filename 被选定的文件名称pattern 用来筛选 filelistbox 的文件

• Filelistbox 、 dirlistbox 、 drivelistbox 的连动：1 ）使文件夹列表框可以显示驱动器中的文件夹。Private Sub Drive1_Change()

Dir1.Path = Drive1.Drive

End Sub

2 ）使得 filelistbox 得以显示当前文件夹中的文件Private Sub Dir1_Change()

File1.Path = Dir1.Path

End Sub

3 ）读取在文件列表框中选取文件的完整文件标识符赋给字符串变量，并输出到立即窗口。Private Sub File1_Click()

Dim fullpath As String

If Right(File1.Path, 1) <> "\" Then

fullpath = File1.Path + "\" + File1.FileName

Else

fullpath = File1.Path + File1.FileName

End If

Debug.Print fullpath

End Sub

例：编写一个简单图像浏览器程序（ ch05\ 练习 12.vbp ）

5-6 通用对话框• 在工具箱中添加 commondialog 控件

单击“工程 /部件”引用“ microsoft common dialog control6.o”

• commondialog 控件显示方法方法 显示的对话框showopen “打开”或“ open“ 对话框showsave “ 另存”或“ save file as ” 对话框showcolor “ 颜色”或“ color” 对话框showfont “ 字体”或“ fint” 对话框showprinter “打印”或“ printr” 对话框showhelp 调用 windows帮助对话框

• 设置对话框标题等信息属性名称 说明dialigtitle 对话框标题initdir 起始文件夹filename 文件名称filter 文件类型filterindex 默认的 filter索引flags 标志，参阅后面的说明filter 属性设置格式：filter=“筛选描述 1 |筛选条件 1 | 筛选描述 2 | 筛选条件 2…”

• 读取用户所选取的文件属性名称 说明filetitle 文件名称 , 但不含路径filename 文件名称 , 含完整路径例：修改 ch05\ 练习 12.vbp ，选择图片文件采用 commondialog 对话框。（ ch05\ 练习 14.vbp )

• 例：修改上一题，希望以原图来显示，如果图像比显示区小，那么将图像显示在显示区的中央，如果图像比显示区大，就提供滚动条让用户浏览显示区外的图像。 (ch05\ 练习 15.vbp)

1 ）把 image 设置在 picturebox 中央image1.left=(picture1.scalewidth-image1.width)/2

image1.top=(picture1.scaleheight-image1.height)/2

2 ）显示大图像的技巧如果 picturebox 里的 image （用来显示图像）比 picturebo

x 大，则 image超出 picturebox 的部分就不会被显示出来。

x

y

-x-y

红线：表示 picturebox

虚绿线：表示 image

黑色点划线：表示移动

后 image

（ -x,-y)

要显示右方和下方超出部分，该怎样办？把 image 的左上角坐标（ left, top) 设置成负值 (-x, -y) 后，则垂直坐标小于 Y ，水平坐标小于 X 的部分不会显示出来，而将图像右下方的区域显示出来。即： image1.left=-(image1.width-picture1.scalewidth)

image1.top=-(image1.height-picture1.scaleheigh)

3 ）为了让用户方便浏览全部的图像，还在设置一个水平滚动条和一个垂直滚动条，而滚动条的几个关键属性设置为：vscroll1.min=0

vscroll1.max=image1.height-picture1.height

vscroll1.largechange=10

vscroll1.smallchange=1

hscroll1.mi=0

hscroll1.max=image1.width-picture1.width

hscroll1.largechange=10

hscorll1.smallchange=1

要保证 image 比 picturebox高，才正确

要保证 image 比 picturebox宽，才正确

4 ）图像滚动：当单击水平滚动条时，会触发事件：private sub hscroll1_change()

image1.left=-hscroll1.value

end subx

当单击垂直滚动条时，会触发事件：

private sub vscroll1_change()

image1.top=-vscroll1.value

end sub

• 字体对话框的调用

字体对话框属性使用

color 表示字体颜色

fontname 用户所选字体名称

fontsize 用户所选字体大小min (max) 用于设定用户在字体对话框中所能选择的最小值和 最大值。即用户只能在此范围之内选择字体大小。

Flag 在显示字体对话框之前必须设置 flags 属性 常数 值 说明

cdlcfscreenfonts &H1 显示屏幕字体cdlcfprintfonts &H2 显示打印机字体cdlcfboth &H3 显示打印机字体和屏幕字体cdlcfeffects &H100 在字体对话框显示删除线和下划

线、检查框及颜色组合fontbold 粗体（ true/false)

fontitalic 斜体（ true/false)

fontstrikethru 删除线（ true/false)

fontunderline 下划线（ true/false)

例：设计一个如下介面的程序，当单击字体按钮时能设置文本框字体（ ch05\ 练习 16.vbp)

Private Sub Command1_Click()CommonDialog1.Flags = &H3 Or &H100CommonDialog1.DialogTitle = " 设置文本框中字体 "CommonDialog1.ShowFontText1.FontName = CommonDialog1.FontNameText1.FontSize = CommonDialog1.FontSizeText1.FontBold = CommonDialog1.FontBoldText1.FontItalic = CommonDialog1.FontItalicText1.FontStrikethru = CommonDialog1.FontStrikethruText1.FontUnderline = CommonDialog1.FontUnderlineText1.ForeColor = CommonDialog1.ColorEnd Sub