[VB] chp08 图片方块与定时器
![[VB] chp08 图片方块与定时器](https://img.wendangku.net/imgb8/05jbgspclphx0uhaaoqx-81.webp)
![[VB] chp08 图片方块与定时器](https://img.wendangku.net/imgb8/05jbgspclphx0uhaaoqx-82.webp)
第八章
图片方块与定时器
「图片方块」(Picture Box) 工具是用来加载图片。如果要使图片能够每隔固定时间移动位置，则可使用VB2005中的定时器(Timer) 工具来控制延迟时间。
8-1 图片方块
「图片方块」(Picture Box) 和「窗体」都可以让我们在其内部绘图、放入控件或加载图片文件。当你在设计较大的系统时，若直接在窗体中使用绘图指令来绘图，则因窗体中还有其它对象，而导致这些对象与绘图的部分混在一起，可能会牵一发动全身，造成维护上的困难。这时可以透过「图片方块」控件，将所有的图形或加载图文件的动作，分别拘限在个别「图片方块」控件中进行，彼此互相独立，如此一来，整个「窗体」不但看起来清爽而且较容易修改，第十章绘图将有详细实例说明。
「窗体」及「图片方块」两者都可以用来放置图档，但是如果直接透过窗体的BackImage属性设定图片，在窗体上只能显示一张图( 当背景图) 而且只能从窗体的左上角放起？( 在第三章有实例说明)，图形固定无法搬移，无法达成在窗体上显示多张图片的需求。因此，若要在窗体放置多个图片时，可以透过「图片方块」工具，在窗体产生多个控件来达成。
8-1-1 图片方块的建立
1. 将指针移至工具箱中图片方块工具上，按一下鼠标左键。
2. 将指针移至窗体中任意位置，指针呈「十」字形，按住鼠标左键并拖曳，拉出适当的
大小后再放开左键，如图8-1所示：
图8-1 图片方块的建立
8-1-2 图片方块常用的属性
BackColor：用来设定图片方块的背景颜色。
BackGroundImage：用来设定图片方块的背景图片。
Image：
按一下左键将出现「选取资源」对话框，如图8-2所示，点选「汇入」将出现「开启」对话框，如图8-3所示，由数据夹中选取所要的图片文件。
图8-2 「选取资源」对话框
图8-3 「开启」对话框
【注】如取消目前Image属性内容设定的图文件，只要在Image属性按右键选取「重设」即可清除。
在程序中图片方块内图片由图片文件加载时其写法如下：
对象名称.Image = Image.FromFile ( 图片文件的路径)
在程序中如须将图片方块内的图片清除其写法如下：
对象名称.Image = Nothing
SizeMode：用来设定加载图片在图片方块的摆设方式，有四种设定方式。
Nomal
放置于图片方块的左上角
StretchImage
图片随图片方块大小伸缩
AutoImage
图片方块随图片大小伸缩
CenterImage
放置于图片方块的中心
在程序中设定图片随着图片方块的大小伸缩其写法如下：
对象名称.SizeMode = PictureBoxSizeMode.StretchImage
Visible
True：让图片方块可见。( 默认值)
False：让图片方块隐藏。
Location：图片方块左上角的水平距离(X轴的坐标)，垂直距离(Y轴的坐标)。
在程序中设定图片方块的新坐标位置其写法如下：
对象名称.Location = New Point ( 水平坐标, 垂直坐标)
Size：图片方块的宽度与高度。
在程序中设定图片方块的大小其写法如下：
对象名称.Size = New Size ( 宽度, 高度)
Left：图片方块左上角的水平距离(X轴的坐标)。
Top：图片方块左上角的垂直距离(Y轴的坐标)。
Width：图片方块的宽度。
Left：图片方块的高度。
设计一程序检查图片方块的垂直与水平坐标，并检查其宽度与高度。
执行结果
图8-4 图片方块的垂直与水平坐标
程序内容
Private Sub Button1_Click(ByVal…) Handles Button1.Click
Dim t, l, h, w As Integer
t = PictureBox1.Top
l = PictureBox1.Left
h = PictureBox1.Height
w = PictureBox1.Width
Label1.Text &= "图片方块的Top 为" & t & vbNewLine
Label1.Text &= "图片方块的Left 为" & l & vbNewLine
Label1.Text &= "图片方块的Height为" & h & vbNewLine
Label1.Text &= "图片方块的Wight 为" & w & vbNewLine
End Sub
Private Sub Button2_Click(ByVal…) Handles Button2.Click
End
End Sub
8-1-3 图片文件格式
常用图片文件的格式如下：
.BMP檔
BMP图片文件，是属于非压缩点矩阵图形(Bitmap)。
.GIF檔
GIF为图片交换格式文件(Graphics Interchange Format file) 是属于压缩过的图形文件，主要用来制作网页图形之用。
.JPG檔
JPG为影像压缩文件(Joint Photographic Experts Group file) 也是属于压缩过的图形文件，主要用来存放实物的图片( 如照片、海报)。
.ICO檔
ICO为图标图形(Icon），为压缩点矩阵图形。
.WMF檔
WMF为Windows向量图形(Windows Meta File)，图形缩放不失真。
设计一程序，利用滑动轴使图片左右移动。
题目说明
1.启动程序时呈现画面如图8-5所示。
图8-5 程序启动时画面
2. 当移动滑动轴移动至最右边时如图8-6所示。
图8-6 图片移动到左边
学习目的
1.了解图片方块位置移动的应用。
2..滑动轴移动处理。
思考逻辑
1.启动程序时鱼在左边，可利用滑动轴移动的方式，使鱼左右移动。
2.为求美观图片方块与窗体的背景颜色均设为白色，同时图片方块应去框。
使用对象与命名
8-7 使用对象与命名
属性说明
程序内容
Private Sub TrackBar1_Scroll(ByVal…) Handles TrackBar1.Scroll
Dim a As Integer
a = TrackBar1.Value
PictureBox1.Location = New Point(a * 15 + 20, PictureBox1.Height) End Sub
设计一程序，利用滑动轴控制图片的大小。
题目说明
1.当启动程序时图片大小如图8-8所示：
2.当滑动轴移动时图片亦随之大小变动如图8-9所示：
图8-8 启动时画面图8-7 滑动轴移动时图片亦随之大小变动
使用对象与命名
1.图片必须依影像控件的大小自动缩放，所以属性SizeMode一定要设Stretch-Image。
图8-9 使用对象与命名使用对象与命名
程序内容
Private Sub TrackBar1_Scrol l(ByVal…) Handles TrackBar1.Scroll
Dim a As Integer
a = TrackBar1.Value * 5 + 80
PictureBox1.Size = New Size(a, a)
End Sub
设计一程序利用上、下、左、右指针与STOP五张图片，控制笑脸的移动，并显示其垂直与水平坐标位置。
题目说明
1.当启动程序时画面，如图8-10所示。
2.当按钮时，是笑脸图片将向左移动，如图8-11所示。
图8-10 启动时画面图8-11 笑脸图片向上移动
学习目的
1.在影像图片上按一下产生的事件。
2.坐标位置的移动。
使用对象与命名
图8-12使用对象与命名使用对象的类别与属性
程序内容
Dim x, y As Integer '设定x y为全域变量
Private Sub Form1_Load(ByVal…) Handles MyBase.Load
x = 120 : y = 100
picface.Location = New Point(x, y) '设定笑脸图片新位置
txtx.Text = x : txty.Text = y '将x y放于垂直与水平文字方块内End Sub
Private Sub picup_Click(ByVal…) Handles picup.Click '按向上图标程序
y = y - 10 '因向上，y(垂直)坐标减少，所以减20
txty.Text = y '将y放于垂直文字方块内
picface.Location = New Point(x, y) '设定笑脸图片新位置
End Sub
Private Sub picdn_Click(ByVal…) Handles picdn.Click '按向下图标程序
y = y + 10 '因向下，y(垂直)坐标增加，所以加20
txty.Text = y '将y放于垂直文字方块内
picface.Location = New Point(x, y) '设定笑脸图片新位置
End Sub
Private Sub piclt_Click(ByVal…) Handles piclt.C lick '按向左图标程序
x = x - 10 '向左，y(水平)坐标减少，所以减20
txtx.Text = x '将xy放于水平文字方块内
picface.Location = New Point(x, y) '设定笑脸图片新位置
End Sub
Private Sub picrt_Click(ByVal…) Handles picrt.Cl ick '按向右图标程序
x = x +10 '向右，y(水平)坐标增加，所以加500
txtx.Text = x '将x放于水平文字方块内
picface.Location = New Point(x, y) '设定笑脸图片新位置
End Sub
Private Sub picstop_Click(ByVal…) Handles picsto p.Click '按结束图标程序
End
End Sub
设计一程序，点选地名按钮即呈现该地区图片如图8-12。
图8-12
【学习目的】
如何将图文件加载图片方块内。
【程序内容】
Private Sub Button1_Click(ByVal…) Handles Button1.Click
PictureBox1.Image = New Bitmap("d:\vbnet2005\chp08\北京.jpg") End Sub
Private Sub Button2_Click(ByVal…) Handles Button2.Click
PictureBox1.Image = New Bitmap("d:\vbnet2005\chp08\巴黎.jpg") End Sub
Private Sub Button3_Click(ByVal…) Handles Button3.Click
PictureBox1.Image = New Bitmap("d:\vbnet2005\chp08\伦敦.jpg") End Sub
Private Sub Button4_Click(ByVal…) Handles Button4.Click
PictureBox1.Image = New Bitmap("d:\vbnet2005\chp08\雪梨.jpg") End Sub
Private Sub Button5_Click(ByVal…) Handles Button5.Click
PictureBox1.Image = New Bitmap("d:\vbnet2005\chp08\西雅图.jpg") End Sub
Private Sub Button6_Click(ByVal…) Handles Button6.Click
PictureBox1.Image = New Bitmap("d:\vbnet2005\chp08\旧金山.jpg") End Sub
Private Sub Button7_Click(ByVal…) Handles Button7.Click
PictureBox1.Image = New Bitmap("d:\vbnet2005\chp08\纽约.jpg") End Sub
Private Sub Button8_Click(ByVal…) Handles Button8.Click
PictureBox1.Image = New Bitmap("d:\vbnet2005\chp08\台北.jpg") End Sub
8-2 定时器(Timer)
当我们在编写程序代码时，如要控制时间的长短或将目前的时间显示出来，或是让一张图片能够每隔固定时间移动位置，VB2005中可使用定时器工具来控制延迟时间以及显示时间。
8-2-1 定时器的建立
1.将指标移至工具箱中定时器工具，按二下鼠标左键。
2.将于窗体的下方出现定时器控件，它不呈现于窗体内，如图8-13所示：
图8-13 建立定时器
8-2-2 定时器的常用属性
Enabled：定时器是否发生作用。
True：发生作用。
False：不发生作用。
Interval：
定时器最常用到的属性，用来设定间隔时间。间隔时间以毫秒(milliseconds) 为单位，若值为1000时表示一秒，而值为0时，表示关闭此定时器功能。( 默认值为0)
8-2-3 定时器的事件程序
定时器的事件程序只有Tick事件程序，Tick事件将依照Interval所设定的时间，定时引
发生Tick事件程序。
设计一程序显示日期时间，每一秒更新一次。
题目说明
1. 当程序启动时画面，如图8-14所示。
图8-14 启动时画面使用对象与命名
图8-15 使用对象
程序内容
Private Sub Timer1_Tick(ByVal…) Handles Timer1.Tick
Label1.Font = New Font("标楷体", 18, FontStyle.Bold) '设卷标字型
Label1.Text = DateTime.Now '在卷标处显示日期时间End Sub
设计一程序，利用滑动轴来控制图片的移动速度。
题目说明
1.当启动程序时，可移动滑动轴控制图片的移动速度，出现如图8-20画面。
图8-16 输入秒数画面
学习目的
此例利用定时器(Timer) 并配合滑动轴来控制图片的移动速度。
使用对象与命名
图8-17 使用对象与命名
使用对象的类别与属性
程序内容
Dim i As Integer = 300
Private Sub Timer1_Tick(ByVal…) Handles Timer1.Tick
Timer1.Interval = TrackBar1.Value '时间的Interval随滑动轴值而定
i = i - 1 '设定水平距离项左移1
If i = 10 Then Timer1.Enabled = False '如水平距离到达10时定时器不发生作用Picture1.Location = New Point(i, Picture1.Height)'设定影像新位置
End Sub
Private Sub Button1_Click(ByVal..) Handles Button1.Click
i = 300 '设定水平距离为300
Picture1.Location = New Point(i, Picture1.Height)
Timer1.Enabled = True
End Sub
设计一「跨年倒数计时」程序，输入一秒数，以倒数计时的方式，当时间到时，就在窗体上显示「新年快乐万事如意」与一张图片。
题目说明
1. 当启动程序时，输入秒数，出现如图8-18画面。
2.按「开始」钮，倒数计时开始，当秒数为0时，出现图片如图8-19画面。
图8-18 输入秒数画面
图8-19 秒数为0时出现图片画面
学习目的
1. 认识定时器(Timer)
2.图片的显示与隐藏
思考逻辑
1.在启动程序时，定时器不发生作用，同时图片隐藏不显示。
2.输入时间秒数，当按「开始」钮，定时器发生作用。
3.定时器启动：当倒数计时为0时，窗体背景颜色变黒色( 让整个画面更有夜晚的感
觉)，显示图片与「新年快乐万事如意」( 字的颜色变黄) 同时定时器不再发生作用。
使用对象与命名
图8-20 使用对象
使用对象的类别与属性