Transcript 项目五

项目五 图形控件与绘图操作
项目五 图形控件与绘图操作
 学习目的：
掌握绘图操作必需的图形基础知识及坐标系统的
作用和定义。
掌握常用图形控件（PictureBox、Image、Line、
Shape）的使用方法、控件的常用属性和事件。
掌握图形操作的常用方法（PSet、Line、Circle）
与技巧。
活动一
认识VB坐标系统
一、VB坐标系统
 VB坐标系统是一个二维坐标系统，是由坐标原点、坐标度量
单位、坐标X轴和坐标Y轴组成。
 在VB中，有两种坐标系统：一种是VB提供的标准坐标系统，
另一种是用户自定义坐标系统。
 1、标准坐标系统
 在标准坐标系统中，均以容器的左上角为该坐标系统的坐标
原点（0，0），坐标轴的默认单位都是缇。
 ScaleMode属性
每个容器都有一个坐标系，坐标度量单位由容器对象
的ScaleMode属性决定，ScaleMode属性设置如表1所
示。
表1
 属性值
0
1
2
3
4
5
6
7
ScaleMode属性设置
单
位
用户定义
缇
磅
像素
字符
英寸
毫米
厘米
说 明
User
Twip缺省值
Point
Pixel
Charecter缺省为高12磅，宽20磅
Inch
Millimeter
Centimeter
y
2000
x
(0,0)
自定义坐标
(-1000,750)
(0,0)
x
1500
y
(1000,-750)
一、VB坐标系统
 2、自定义坐标系统
在VB的窗体对象中也可以使用自定义的坐标系统。
在自定义坐标系统中，可以任意规定坐标轴的方
向，使用任意的长度单位。
对于窗体来说，Left、Top、Width和Height属性
的单位永远是缇。其中Left、Top分别是窗体的
外边框到屏幕左边、上边的距离；Width和
Height分别是包括窗体的边框和标题栏在内的宽
度和高度。
一、VB坐标系统



方法1：通过Scale方法设置坐标系统。
格式：[对象.]Scale(x1,y1)-(x2,y2)
说明：
 （1）对象可以是窗体、图片框或打印机。
 （2）参数(x1,y1)和(x2,y2)分别指定对象的左上角和右
下角的新坐标。
 例：Form1.Scale(100,100)-(500,500)
 表示窗体Form1的坐标系统为：左上角坐标(100,100)，右下角坐标
(500,500)。
 ScaleWidth=x2-x1
 ScaleHeight=y2-y1

执行无参数的Scale方法，则会取消用户自定义坐标系统。
恢复为标准坐标系统（以缇为单位，以(0,0)点为原点）。

【ScaleWidth】，【ScaleHeight】属性

功能：设置或返回X轴长度和Y轴长度。

说明：【ScaleWidth】，【ScaleHeight】属性可以设为负
值，但此时的负值并不表示X轴的长度、Y轴的长度为负值，
而是用来规定X轴、Y轴的正方向。如果【ScaleWidth】属
性为负，则表示X轴的正方向为向左；如果【ScaleHeight】
属性为负值，则表示Y轴的正方向为向上。
一、VB坐标系统

方法2：通过对象的ScaleLeft、ScaleTop、ScaleWidth、
ScaleHeight属性来实现。
 标准坐标系统中，ScaleLeft和ScaleTop属性总是0；
ScaleWidth和ScaleHeight属性则是根据坐标系统的长度单位
计算的对象内部区域的实际宽度和高度。
 当改变ScaleTop或ScaleLeft的值后，坐标系的X轴或Y轴按此
值平移形成新的坐标原点。右下角坐标值为
(ScaleLeft+ScaleWidth,ScaleTop+ScaleHeight)。X轴与Y轴
的度量单位为分别为1／ScaleWidth和1／ScaleHeight。
 例：Scale(x1,y1)-(x2,y2)
 等同于设置以下四个属性：
 ScaleLeft=x1
ScaleTop=y1
 ScaleWidth=x2-x1
ScaleHeight=y2-y1
一、VB坐标系统
 【例1】在窗体的单击事件中，用属性定义图
片框的坐标系。
 【例2】在窗体中单击命令按钮，用Scale方
法定义图片框的坐标系。
二、直线控件（Line）




直线控件(Line)用来在窗体和其他容器控件中创建简单的线
段，它没有自己的特殊方法，也不产生任何事件。设计和运
行时可以通过它的属性来改变它的位置、粗细和颜色等。
1. 常用属性
 (1)BorderColor属性：设置直线的颜色。
 (2)BorderWidth属性：设置直线的粗细。
 (3)BorderStyle属性：设置直线样式。0～6种类型,1—
实线,6—内实线。
2. 特有属性
 x1,x2,y1,y2属性：指定起点和终点的x坐标及y坐标。可
以通过改变x1,x2,y1,y2的值,来改变线的位置和长度。
说明：
 直线控件没有Left、Top、Width和Height属性，运行时
也不能用Move方法决定直线的位置和长短。
三、Pset方法



格式:［对象名.］PSet(x,y)［,颜色］
功能:在窗体或图片框上画出一个点。对象缺省时,为窗体。
说明:
 (1)(x,y)为要画点的坐标。
 (2)颜色:是指要画点的颜色。缺省时,PSet用“前景色”
画点,如想删除一个点，则用“背景色”画点。
 例如:
Picture1.PSet(1500,1000),RGB(255,0,0)
在图片框Picture1中(1500,1000)处画一个红色的点。
四、AutoRedraw属性

AutoRedraw属性是窗体和图片框的属性。
 当使用Line、Circle、Pset、Point、Print等方法创建的
图形和文字在屏幕中暂消失，窗体复原后，这些图形或
文字无法自动恢复。当设置AutoRedraw属性值为True
后，则可以自动恢复，否则要由Paint事件过程完成。
例：在图片框上随机画100个闪烁的彩色圆点。
活动一实例
活动二 图形控件的运用
 图形控件有直线控件(Line)、形状控件
(Shape)、图像框(Image)、图片框
(PictureBox)，本节分别介绍其程序设计方
法。
一、形状控件
 使用形状控件(Shape)可在窗体或其他控件容
器中画出矩形、正方形、圆、椭圆、圆角矩
形或圆角正方形。形状控件的Shape属性决定
了它的图形样式，这个属性的所有可能取值
都有对应的形状样式。
1.形状控件的常用属性





(1)Left、Top、Width和Height属性决定形状控件的位置和
大小，也可以用Move方法改变它的大小和位置。
(2)BorderWidth属性设置图形边界宽度。它的值是以像素为
单位的边线宽度。
(3)BorderColor属性设置图形边界颜色。
(4)BorderStyle属性设置边界线的类型。
(5)FillColor属性设置图形的前景颜色。
 如果要为图形填充颜色(背景)时,首先应该将属性
FillStyle(填充方式)设置成1(透明),否则FillColor(前
景色)的颜色会遮盖了背景色,达不到预期的目的。
 例如,将图形的FillStyle属性的值设为0(实心,不透
明),FillColor(填充颜色)为蓝色,此时,不论BackColor
为何种颜色,都被蓝色所遮盖,如果将FillStyle改为1(透
明),则图形内显示背景色。
2.形状控件的特有属性

(1)Shape属性
 该属性用来设置图形的形状。

0——Rectangle
矩形

1——Square
正方形

2——Oval
椭圆形

3——Circle
圆形

4——Rounded Rectangle 圆角矩形

5——Rounded Square
圆角正方形
Shape属性的缺省值为0(矩形)。若选择3,则用Shape
控件画出的矩形中画出一个圆(圆的直径是矩形的短
边)。
2.形状控件的特有属性


(2)BackStyle属性
 该属性用来设置图形背景的风格

0——Transparent(透明)

1——Opaque(不透明)
 缺省值为0。如果着色,显然要将BackStyle属性设置为
“不透明”。
(3)FillStyle属性
 该属性用来设置图形填充的线形(风格或样式)。
 【例1】用Shape属性显示形状控件的6种形状。
 【例2】将形状控件显示不同的形状、设置不同的颜色，
填充不同的图案。
二、图片框
图片框(PictureBox)控件的主要作用是为用户显示图片，也
可作为其他控件的容器。实际显示的图片是由Picture属性
决定的。
1.特有属性
 (1)Picture属性
 Picture属性用于窗体、图片框和图像框。它可通过属性
窗口进行设置，也可在程序中进行设置，即使用
LoadPicture()函数，装入图片文件。在窗体、图片框和
图像框中显示的图形以文件形式存放在磁盘上，VB6.0支
持以下格式的图形文件。
①位图文件(Bitmap)
②图标文件(Icon)
③图元文件(Metafile)
④压缩位图文件(JPEG)
⑤压缩位图文件(GIF)

二、图片框
(2)AutoSize属性
 图片框控件不能伸缩图像使图像适应它的大小。如果把
图片框控件的AutoSize属性设置为True，那么图片框控
件就会自动调整自身的大小以容纳整个图像。
2.图片框控件的特点
 图片框控件的最大特点是，它的表现更像一个窗体对象，
它具有许多与窗体对象相似的属性和方法。窗体的所有
显示文本和图像的方法、作图方法以及与之相关的属性
在图片框控件中都有同名的方法和属性。图片框控件有
自己的坐标系统，也可以重新定义坐标系统。

二、图片框
3.图形文件的装入
 图形文件的装入有两种方法：一种是在设计阶段装入，另一
种是在运行期间装入。
 （1）在设计阶段装入图形文件
在设计阶段装入图形文件用两种方法：
(1)用属性窗口中的Picture属性装入
(2)利用剪切板装入
 （2）在运行期间装入图形文件
Picture属性可以设置被显示的图片文件名(包括可选
路径名)。在程序运行时，可以使用LoadPicture()函
数，在图片框中装入图形。
二、图片框






LoadPicture()函数
格式：对象.Picture=LoadPicture("图形文件名")
功能：在对象中装入一个图形。
说明：
 (1)对象可以是图片框或图像框，也可以是窗体，如果是
窗体，对象名可以省略。
 (2)如果删除一个图形，可以使用LoadPicture()函数，
将一个空白图形装入对象的Picture属性。
格式：对象.Picture=LoadPicture()
例：在图片框装入图形：
Picture1.Picture=LoadPicture(“d:\a1.jpg”)
删除图形： Picture1.Picture=LoadPicture()
二、图片框
装入图片框中的图形，可以拷贝到另一个图片框中。假设在
窗体中已建立了两个图片框：Picture1与Picture2，则用：

Picture1.Picture=LoadPicture("C：＼Graphics＼
Icons＼Arrows＼arw06up.ico")
Picture2.Picture=Picture1.Picture
 可以把图片框Picture1中的图形拷贝到图片框Picture2
中。
4.常用事件
 图像框可以响应Click和DblClick事件。
5.常用方法
 在图片框中使用Cls方法和Print方法。

【例】在窗体上交换两个图片框中的图形。
二、图片框



PaintPicture方法
格式：对象.PaintPicture
Source,x1,y1,Width1,Height1,x2,y2,Width2,Height2,OpC
ode
说明：为图片框控件提供一个具有编辑功能的命令，使用该
方法可以对位图进行水平或垂直翻转，以及对图形进行拉伸、
压缩等操作。
 source：被放置的源图像，必须在窗体或图片框的Picture属性中设
置。
 X1,y1：图像左上角在目的对象中的位置。通过改变x1,y1的值来实现
图片的移动。
 Width1,Height：图像在目的对象中的位置。通过改变目标图片的宽
度和高度来实现图片的拉伸和缩放。将width1，height1参数的值设
为负值，可以将图片翻转。
 X2,y2：源对象中开始复制图像的位置，缺省时为0，即从源对象的左
上角开始复制图像。
 Width2,Height：要复制的区域的宽度和高度，缺省时为整个图像。
二、图片框
【例】设计图片编辑器，能实现对图片进行简
单的水平翻转、垂直翻转、放大、缩小等操
作。
二、图片框



例：编程实现三个图片框中图片的轮换，并使得一个图片框
中可以显示整个图片。
（1）界面设计
在窗体上添加如图1所示三个图片框控件Picture1、
Picture2、Picture3。将Picture3的AutoSize属性设置为
True。其他属性值为默认值。
（a）设计时界面
（b）运行时界面
图1 图片框
（c）响应事件
二、图片框













（2）编写事件代码
在Form_Load()事件中加入如下代码：
Private Sub Form_Load()
Picture1.Picture = LoadPicture("c:\steamship.gif")
Picture2.Picture = LoadPicture("c:\bus.gif")
Picture3.Picture = LoadPicture("c:\car.gif")
End Sub
在Picture3_Click()事件中加入如下代码：
Private Sub Picture3_Click()
Form1.Picture = Picture3.Picture
Picture3.Picture = Picture2.Picture
Picture2.Picture = Picture1.Picture
Picture1.Picture = Form1.Picture
Form1.Picture = LoadPicture()
End Sub
三、图像框
1.常用属性
 (1)Picture属性
该属性的功能与图片框的相同。
在图像框控件装入图片文件的方法和使用图片的文件
格式也与图片框相同。
 (2)Stretch属性该属性用来自动调整图像框中图形内容
的大小，既可通过属性窗口设置，也可以通过程序代码
设置。该属性值为True或False。
其属性值为False时，图像框可以自动改变大小以适应
其中的图形。
其属性值为True时，加载到图像框中的图形，可以自
动调整尺寸以适应图像框的大小。
三、图像框
2.常用事件
 图像框可以响应Click和DblClick事件。
3.图片框与图像框的区别
 （1）图片框是容器控件，可以作为父控件，而图像框不
能作为父控件。
 （2）图片框可以通过Print方法接收文本，而图像框不
能接收用Print方法输入的信息，也不能用绘图方法在图
像框上绘制图形。
 （3）图像框比图片框占用内存少，显示速度快。
【例】编写程序，模拟交通信号灯的切换。
活动二实例
活动三 图形方法
 图形方法有Pset、Line、Circle，本节通过
使用作图方法，进行画点、画直线、画矩形、
画圆、画椭圆、画圆弧等。
一、Line方法



格式:［对象.］Line (x1,y1)-(x2,y2)［,颜色］［，
B［F］］
功能:在窗体或图片框上画出一条直线或一个矩形。
对象缺省时,为窗体。
说明:
 (1)x1,y1：画线起始点的坐标，缺省时从对象的当前
位置开始画。
 (2)x2,y2：画线结束点的坐标。
 (3)颜色：线条的颜色，缺省时使用对象的前景色。
 (4)如果没有参数B，则是画一条直线。
 (5)如果有参数B，画一个矩形，指定参数F，表示要画
的是一个实心的矩形。(x1,y1)与(x2,y2)是所画矩形
的左上角和右下角的坐标。
Line(500,300)-(3000,2500),RGB(255，0，0)
在(500,300)与(3000,2500)之间绘制一条红色直线。
颜色函数

1.RGB颜色函数
RGB是一个颜色函数,“R”代表Red(红),“G”代表
Green(绿),“B”代表Blue(蓝),通过红、绿、蓝三
种基本色混合产生某种颜色。
格式：RGB(红，绿，蓝)说明：
(1)红、绿、蓝三种基本色使用0～255之间的整数。
(2)从理论上来说，三种基本色混合可产生
256×256×256种颜色，但是实际使用时受到显示硬件
的限制，普通显示卡只能显示16种颜色。
例如：
 RGB(0,0,0)返回黑色。
 RGB(255,0,0)返回红色。
 RGB(255,0,255)的含义是无绿色的成分,红和
蓝成分相等,效果为紫红色。
 这3个参数的不同值组合,可以产生许许多多
种颜色,表2列出了一些颜色的组合。
表2 RGB颜色函数
RGB函数
RGB(0,0,0)
RGB(255,0,0)
RGB(0,255,0)
RGB(0,0,255)
RGB(0,255,255)
RGB(255,0,255)
RGB(255,255,0)
RGB(255,255,255)
颜 色
黑色
红色
绿色
蓝色
青蓝色
紫红色
黄色
白色
2.QBColor函数
QBColor函数采用QuickBasic所使用的16种颜色。
 格式：QBColor(颜色码)
 说明：

 (1)颜色码使用0～15之间的整数，每个颜色码代表一种
颜色。
 (2)RGB函数与QBColor函数实际上都返回一个6位的16进
制的长整数，这个数从左到右，每两位一组代表一种基
色，他们的顺序是蓝绿红。因此，也可以直接用6位的
16进制颜色代码表示。在色彩的属性框中，可以看这些
代码。表3列出了QBColor颜色函数。QBColor(2)代表绿
色,QBColor(4)代表红色。
表3
颜色值








0
1
2
3
4
5
6
7
QBColor颜色函数
颜色
黑色
蓝色
绿色
青色
红色
粉红色
黄色
白色
颜色值
8
9
10
11
12
13
14
15
颜色
灰色
亮蓝色
亮绿色
亮青色
亮红色
亮粉红色
亮黄色
亮白色
例如:






Line(500,300)-(3000,2500),QBColor(12)
在(500,300)与(3000,2500)之间绘制一条亮红色直线。
Line –(3000,5000)
从当前位置开始到(3000,5000)画一条直线。
Line(500,300)-(3000,2500),QBColor(4),BF
此时画出一个内部填充红色的实心矩形。
二、Circle方法

1.用Circle方法画圆
 格式:［对象名.］Circle(x,y),半径［,颜色］
 功能:在窗体或图片框上画圆。
 说明:x,y：为圆心的坐标位置。
 例如:

Circle(2000,1000),500

Picture1.Circle(1000,400),500,QBColor(12)
2.用Circle方法画椭圆




格式:［对象名.］Circle(x,y),半径,［颜色］,,,纵横比
功能:在窗体或图片框上画椭圆。
说明:纵横比是椭圆垂直半径与水平半径的比率。小于或大于
1画椭圆，1画圆。
例如:
 Circle(2000,1000),500,,,,2
 Picture1.Circle(1000,400),500,QBColor(12),,,0.5
 Picture1.Circle(1000,400),500,QBColor(12),,,1
3.用Circle方法画圆弧及扇形



格式:［对象名.］Circle(x,y),半径［,颜色］［,起始角］
［,终止角］
功能:在窗体或图片框上画圆弧及扇形。
说明:
 (1)起始角与终止角:为所画圆或椭圆的起始角度与终止角
度,单位为弧度,取值为-2π～2π，缺省时,起始角为0,终
止角为2π。弧度增大方向是逆时针方向。
 (2)起始角、终止角均为正时,则只画圆弧;如果两者之一
为负值时,不仅画圆弧,而且还会从圆心到负值的点画一条
直线。
角度换算成弧度的公式为：弧度=角度 * 3.14/180
活动三实例
绘图属性
1、当前坐标CurrentX和CurrentY属性：给出对象在绘图时的
当前坐标。
 说明：对象是指窗体、图形框或打印机。
当重新设置窗体的坐标系统时，CurrentX和CurrentY
的值也将自动改变，但这两个数为坐标的点的实际位
置并不改变。
【例】使用CurrentX和CurrentY属性，在窗体上输出
如图所示的立体字效果。
绘图属性



2、线宽
(1)DrawWidth属性
 该属性用于设置使用窗体或图片框对象的作图方法画线
时以像素为单位的线宽，其取值范围在1~32 767之间。
当DrawWidth属性的值较大时，画出的线就有一定的宽度。
(2)BorderWidth属性
 该属性用于使用控件时定义线的宽度。
 【例】在窗体上画一系列宽度递增的直线。
绘图属性


3、线型样式
(1)DrawStyle属性
 该属性决定作图方法画线时的线型样式。

0——实线(缺省)

1——虚线

2——点线

3——点划线

4——双点划线

5——透明线(无线)

6——内实线
 说明：当DrawWidth属性值大于1并且DrawStyle属性值为
1～4时，都能产生实线效果。
绘图属性
 (2)BorderStyle属性
该属性用于使用控件时给出画线的样式。

0——透明线

1——实线(缺省)

2——长划线

3——点线

4——点划线

5——点点划线

6——内实线
绘图属性


4、填充
封闭图形的填充方式是由FillColor属性与FillStyle属性决
定的。
 (1)FillColor属性
 该属性指定填充图案的颜色，缺省颜色与ForeColor相同。
 (2)FillStyle属性
 该属性决定填充封闭图形的图案样式。

0——实心

1——透明

2——水平线

3——垂直线

4——向上对角线
【例】用FillStyle属性指定填充的图
案，共有8种图案。

5——向下对角线

6——交叉线

7——对角交叉线
活动四 动画的制作
 (1)改变图像的位置和尺寸；
 (2)在不同的位置显示不同的图像；
 (3)在相同的位置显示不同的图像；
 (4)使用Move方法移动控件或图像。
不论用何种方法，都必须使用计时器定时触发有
关动画的事件过程，用计时器的Interval属性控
件控制图像的移动频度。
活动四



动画的制作
1、Move方法
格式：对像名.Move (Left,［Top，Width， Height］)
 Left属性：指定对象的左边沿水平坐标。
 Top属性：指定对象的上边沿垂直坐标。
 Width属性：指定对象的新宽度。
 Height属性：指定对象的新高度。
说明:
 (1)只有Left参数是必须的，其他三个是可选的。
 (2)在屏幕上移动窗体，或在窗体中移动控件时，都是相
对于原点(0，0)，原点位于左上角。当在容器中移动控
件时，使用容器的坐标系。
例：
活动四








动画的制作
2、MouseMove事件
当移动鼠标光标时，在窗体或控件上发生MouseMove事件。
语法：Sub Object_MouseMove(Button As Integer, Shift
As Integer,X As Single, Y As Single)
说明：
（1）Object：指对象。
（2）Button：指鼠标哪个按钮被按下。1为左键，2为右键。
（3）Shift：对应于SHIFT、CTRL、ALT键的状态。1为SHIFT
键，2为CTRL键，4为ALT键。
（4）X，Y：鼠标指针当前位置。
例：
活动四
 实例
动画的制作
项目五小结

强大的图形处理能力是Visual Basic 6.0精髓之一，用
Visual Basic 6.0来绘图既简单而且又容易，另外使用
Visual Basic 6.0还能够进行简单的图像处理和实现简单的
动画效果。

通过本章的学习，我们要掌握以下内容。

 建立自定义坐标系的方法。

 图片框和图像框两种控件的常用属性及其它们之间的区别。

 简单的图像处理，包括图像的放大、缩小、移动和翻转。

 线条类型、线条宽度、绘图模式、填充样式和填充颜色的
设置方法，其中绘图模式的理解是本章的难点。

 使用绘图方法绘制常用的基本图形，包括点、直线、矩形、
圆、圆弧和椭圆。

 使用直线控件和形状控件这两种专用绘图控件来绘制基本
图形。

 简单动画效果的实现。