# Image 控件应用方案

## 知识讲解

#### 1．功能

Image 控件可以显示来自位图、图标或元文件的图形，也可以显示增强型元文件、JPEG 或 GIF 文件。Image 控件可以响应 Click 事件，利用该事件可以用 Image 控件替代工具栏中的按钮。

因为 Image 控件使用较少的系统资源，所以重画起来比 PictureBox 控件要快，但是它只支持 PictureBox 控件的一部分属性、事件和方法。虽然可以把 Image 控件放在容器里，但是 Image 控件不能作为容器。

#### 2．属性

Image 控件的常用属性如表 1 所示。

表 1 Image 控件的属性

编号 | 属性 | 描述
1 | BorderStyle | 返回或设置对象的边框样式
2 | DataSource | 返回或设置一个数据源，通过该数据源，数据使用者被绑定到一个数据库
3 | OLEDragMode | 返回或设置是由部件还是由程序员来处理 OLE 拖放操作
4 | Picture | 返回或设置控件中要显示的图片。对于 OLE 容器控件，在设计时不可用在运行时为只读
5 | Stretch | 返回或设置一个值，该值用来指定一个图形是否要调整大小，以适应与 Image 控件的大小

下面对 Image 控件比较重要的属性进行详细介绍。

（1）Stretch 属性

Stretch 属性用于返回或设置一个值，该值用来指定一个图形是否要调整大小以适应 Image 控件的大小。

语法：

object.Stretch [= boolean]

object：对象表达式。

boolean：一个用来指定是否要调整图形的大小的布尔表达式。如果 Stretch 被设置为 True，那么控件大小的调整使得它所包含的图形的大小也要调整。

图 1 所示的是 Image 控件的 Stretch 属性分别设置为 True 和 False 时的不同效果。

图 1 Stretch 属性演示

（2）Picture 属性

Picture 属性返回或设置控件中要显示的图片。

语法：

object.Picture [= picture]

利用下面的代码可以向 Image 控件中添加图片：

Image1.Picture = LoadPicture("d:\资料素材\图片 2\Landscape\scene442.jpg")

l 加载图片

在 Image 控件的“属性”窗口中选择 Picture 属性，然后单击【…】按钮以显示“加载图片”对话框。在“加载图片”对话框中选择图形文件。

加载完 Image 控件的“属性”窗口，如图 2 所示：

图 2 加载完图片的属性窗口

l 清除图片

要在设计阶段删除图片，只要将鼠标选中 Picture 属性栏的“Bitmap”后，按下键盘的〈Delete〉键即可删除，如图 1 所示。

## 应用一：VB 制作图片浏览器

利用文件浏览的 3 个控件和 Image 控件设计实现图片浏览器。运行程序，选择图片的存放路径，单击图片文件，在 Image 控件中就可以显示出该图片文件。

最终效果如图 3 所示。

图 3 图片浏览器

★★★★★ Form1 ★★★★★★

程序代码如下：

'选择文件夹

Private Sub Dir1_Change() '目录更改事件

File1.Pattern = "*.bmp;*.ico;*.wmf;*.emf;*.gif;*.jpg" '指定文件类型

File1.Path = Dir1.Path '指定文件列表路径

End Sub

'选择驱动器

Private Sub Drive1_Change()

Dir1.Path = Drive1.Drive '设置目录所在驱动器

End Sub

'选择文件

Private Sub File1_Click()

p = File1.Path & "\" & File1.FileName '文件路径

Image1.Picture = LoadPicture(p) '加载图片

End Sub

'启动窗体并进行初始化

Private Sub Form_Load()

Image1.BorderStyle = 1 'Image 控件边框样式

Image1.Stretch = True '允许图像适应 Image 大小

End Sub

## 应用二：利用 Image 控件实现图像的放大和缩小

设置 Image 控件的 Stretch 属性为 True，指定图形大小与 Image 控件的大小一致，然后改变 Image 控件的大小，即可实现放大和缩小图片的功能。

最终效果如图 4 所示。

图 4 图片的放大和缩小

程序代码如下：

★★★★★ Form1 ★★★★★★

'单击放大按钮放大图片

Private Sub Command1_Click() '放大

With Image1

.Width = .Width + 40: .Height = .Height + 40

.Left = .Left: .Top = .Top

End With

End Sub

'单击缩小按钮缩小图片

Private Sub Command2_Click() '缩小

With Image1

.Width = .Width - 40: .Height = .Height - 40

.Left = .Left: .Top = .Top

End With

End Sub

'单击退出按钮退出程序

Private Sub Command3_Click() '退出

End

End Sub

## 应用三：公交线路模拟

### 实例说明

在开发有关地理定位的软件时，我们可以用鼠标拖曳的方法实现动态地理定位。本实例就是一个用鼠标拖曳的方法实现的动态改变公交路线的例子。运行程序，将鼠标移到汽车站点图标上，按住鼠标左键进行拖曳，鼠标移动的同时，汽车站点图标和线路也随着移动；单击站点名称后，可对站点名称进行修改，如图 5 所示。

图 5 公交线路模拟

### 思路与技术

主要利用 Image 控件数组在地图上标识站点来实现本实例，当用鼠标拖动 Image 控件时，利用其 Left 和 Top 属性来定位 Image 控件。

Image 控件用来显示图形。Image 控件可以显示来自位图、图标或原文件的图形，也可以显示增强的元文件、JPEG 或 GIF 文件。

因为 Image 控件使用较少的系统资源，所以重画起来比 PictureBox 控件要快，但是它只支持 PictureBox 控件的一部分属性、事件和方法。用 Stretch 属性确定是否缩放图形来适应控件大小，反之亦然。虽然可以把 Image 控件放在容器里，但是 Image 控件不能作为容器。

下面介绍一下本实例中用到的相关属性。

#### （1）Left 和 Top 属性。

Left：返回或设置对象内部的左边与它的容器的左边之间的距离。

Top：返回或设置对象的内顶部和它的容器的顶边之间的距离。

其语法形式如下：

object.Left [= value]

object.Top [= value]

参数说明：

l object 对象表达式。

l value 数值表达式，用于指定距离。

#### （2）Height 和 Width 属性：分别返回或设置控件的高度和宽度。

其语法形式如下：

object.Height [= number]

object.Width [= number]

参数说明：

l object 对象表达式。

l number 数值表达式，指定对象的维数。

### 开发步骤

（1）新建一个标准工程，创建一个新窗体，默认的“名称”属性为 Form1。

（2）在 Form1 窗体上添加一个 Image 控件数组（Image1(0)～Image1(5)），设置其 Picture 属性。

（3）在 Image 控件数组的下面添加一个 Label 控件数组（Label1(0)～Label1(5)），并设置其 Caption 属性为“乐群街”、“民丰街”、“东盛路”、“八道街”、“一面街”和“长春站”作为站点的名称。

（4）添加一个 Line 控件数组（Line1(0)～Line1(4)），设置其 BorderColor 属性为&H00C00000&，BorderWidth 属性值为 2。

（5）在 Form1 窗体上添加两个 Label 控件，设置其 Caption 属性分别为“X 路车线路图”和“请用鼠标拖动图标的方法修改线路，单击站点名修改站点名称”；添加一个 Frame 控件，设置其 Caption 属性为“请输入该站点的名称”。

（6）在 Frame1 控件上添加一个 TextBox 控件。

Form1 窗体中控件部分属性设置如表 2 所示。

表 2 Form1 窗体中控件部分属性设置

控件名 | 属性 | 值
Frame | Name Caption | Frame1 请输入该站点的名称
Image | Name | Image1(0)
Image | Name | Image1(1)
Image | Name | Image1(2)
Image | Name | Image1(3)
Image | Name | Image1(4)
Image | Name | Image1(5)
Label | Name Caption | Label1(0) 乐群街
Label | Name Caption | Label1(1) 民丰街
Label | Name Caption | Label1(2) 东盛路
Label | Name Caption | Label1(3) 八道街
Label | Name Caption | Label1(4) 一面街
Label | Name Caption | Label1(5) 长春站
Label | Name Caption | Label2 X 路车线路图
Label | Name Caption | Label3 请用鼠标托动图标的方法修改线路，单击站点名修改站点名称
Line | Name BorderColor | Line1(0) &H00C00000&
Line | Name BorderColor | Line1(1) &H00C00000&
Line | Name BorderColor | Line1(2) &H00C00000&
Line | Name BorderColor | Line1(3) &H00C00000&
Line | Name BorderColor | Line1(4) &H00C00000&
TextBox | Name | Text1

（7）为 form1 窗体添加如下代码。

Dim Sign As Boolean '声明布尔类型变量

'声明获取鼠标坐标的 API

Private Declare Function GetCursorPos Lib "user32" (lpPoint As POINTAPI) As Long

Dim x1 As Long

Dim y1 As Long

Dim j As Integer

Private Type POINTAPI'定义鼠标坐标结构

X As Long

Y As Long

End Type

Private Sub Form_Load() '窗体的启动

Frame1.Visible = False '框架隐藏

End Sub

Private Sub Image1_MouseDown(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)

j = Index '记录索引值

End Sub

Private Sub Image1_MouseUp(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)

Dim n As POINTAPI'声明结构变量

GetCursorPos n '获取鼠标指针坐标结构

If j > 0 And j < 5 Then '当记录的索引值大于 0 并且小于 5 时

Image1(j).Left = n.X * 15 - Me.Left: Image1(j).Top = n.Y * 15 - Me.Top

Line1(j - 1).x1 = Image1(j - 1).Left + Image1(j - 1).Width

Line1(j - 1).y1 = Image1(j - 1).Top + Image1(j - 1).Height / 2

Line1(j - 1).X2 = Image1(j).Left

Line1(j - 1).Y2 = Image1(j).Top + Image1(j).Height / 2

Line1(j).x1 = Image1(j).Left + Image1(j).Width

Line1(j).y1 = Image1(j).Top + Image1(j).Height / 2

Line1(j).X2 = Image1(j + 1).Left

Line1(j).Y2 = Image1(j + 1).Top + Image1(j + 1).Height / 2

Label1(j).Top = Image1(j).Top + Image1(j).Height + 100

Label1(j).Left = Image1(j).Left + Image1(j).Width / 2

End If

End Sub

Private Sub Command1_Click() '结束程序

End

End Sub

Private Sub Label1_Click(Index As Integer)

If Sign = True Then

MsgBox "不能同时修改两个站点！", , "信息提示"

For i = 0 To Label1.UBound

Label1(i).ForeColor = RGB(0, 0, 0) '设置文字颜色

Next i

Frame1.Visible = False '隐藏框架 Frame1

Sign = False

Exit Sub '退出过程

End If

Select Case Index

Case 0

Label1(0).ForeColor = RGB(255, 0, 0) '设置文字颜色为红色

Frame1.Visible = True '显示框架

Text1.SetFocus '文本框获取焦点

Sign = True

Case 1

Label1(1).ForeColor = RGB(255, 0, 0)

Frame1.Visible = True

Text1.SetFocus

Sign = True

Case 2

Label1(2).ForeColor = RGB(255, 0, 0)

Frame1.Visible = True

Text1.SetFocus

Sign = True

Case 3

Label1(3).ForeColor = RGB(255, 0, 0)

Frame1.Visible = True

Text1.SetFocus

Sign = True

Case 4

Label1(4).ForeColor = RGB(255, 0, 0)

Frame1.Visible = True

Text1.SetFocus

Sign = True

Case 5

Label1(5).ForeColor = RGB(255, 0, 0)

Frame1.Visible = True

Text1.SetFocus

Sign = True

End Select

End Sub

Private Sub Text1_KeyPress(KeyAscii As Integer)

If KeyAscii = 13 Then '按回车键时

For i = 0 To Label1.UBound '变量控件数组元素

If Label1(i).ForeColor = RGB(255, 0, 0) Then

Label1(i).Caption = Text1.Text

Label1(i).ForeColor = RGB(0, 0, 0) '设置为黑色

Frame1.Visible = False '隐藏框架

Sign = False

End If

Next i

End If

End Sub