1、可视化编程应用VisualBasic6.0,第 8 讲,第8章 图形处理,掌握图片框和图像框两种控件的常用属性 了解图片框和图像框之间的区别 掌握简单的图像处理的技巧 掌握建立自定义坐标系的方法 掌握线条类型、线条宽度、绘图模式、填充样式、填充颜色的设置方法 掌握常用绘图方法 掌握直线控件和形状控件的常用属性 掌握简单动画效果的实现技巧,目标要求,第8章 图形处理,图形控件 坐标系的设置 绘图属性的设置 基本图形的绘制 绘图专用控件 动画处理,讲课提纲,第8章 图形处理,图片框控件（PictureBox） 显示图片； 添加控 件； 绘图或显示文字 图像框控件（ImageBox） 显示图片 8.
2、1.1 图片框控件 功能 显示各种不同格式的 图片 作为其他控件的容器 绘图或显示文字 常用属性 AutoSize属性：决定着图片框是否自动调整尺寸 说明：它有两个取值：True或False，当为True时，图片框自动调整尺寸以便将图形完整的显示出来；当为False时，图片框的尺寸是固定不变、不可调整的，当所显示的图像的尺寸比图片框的尺寸大时，便只能显示图像的一部分，其余部分将会被剪掉。AutoSize属性的默认值为False，但为了将整幅图片显示在图片框中，一般将AutoSize属性设为True,8.1 图形控件,Picture属性：返回或设置图片框中要显示的图片 加载图片的方法：单击Pic
3、ture属性栏，这时在Picture属性栏的右端会出现按钮，单击此按钮打开如图8-2所示的【加载图片】对话框，从对话框的文件列表中选中要打开的图形文件，单击【打开】按钮，便向图片框加载了图片 删除图片的方法：单击Picture属性栏，让光标停在Picture属性栏，然后按Delete键便可删除图片框中的图片 注意：如果在程序中设置Picture属性，可以使用LoadPicture函数直接加载 常用事件： Click事件、MouseMove事件、MouseDown事件等 常用方法 PaintPicture方法：为图片框控件提供一个具有编辑功能的命令，使用该方法可以对位图进行水平或垂直翻转，以及对
4、图形进行拉伸、压缩等操作 绘图方法：这将在以后详细介绍 【例8-1】用图片框来显示一幅图片，并对图片实现简单的翻转、移动、放大、缩小等操作,第8章 图形处理,8.1 图形控件,第8章 图形处理,PaintPicture方法的语法结构 对象名.PaintPicture picture，x1，y1，width1，height1，x2，y2， width2，height2，opcode 常用参数的说明 对象名：使用PaintPicture方法的控件名称。在例8.1中，对象名为图片框控件的名称“picCat” Picture：必需参数。要加载到控件上的图形。对于图片框控件，必须是Picture属性。在
5、例8.1中，该参数为图片框的Picture属性 x1，y1：必需参数。指定目标图片起点的横坐标和纵坐标。图片被编辑后，图片必定有一个新的样式，编辑后的图片通常称为目标图片。在【例8-1】中，图片的移动图片便是通过改变x1,y1的值来实现的 width1，height1：可选参数。指定目标图片的宽度和高度。在例6.1中，便是通过改变目标图片的宽度和高度来实现图片的拉伸和缩放 注意：如果将width1，height1参数的值设为负值，可以将图片翻转，在【例8-1】中，width1，height1参数都为负值，从而实现图片的翻转,8.1 图形控件,第8章 图形处理,8.1.2 图像框 功能：主要用来
6、显示各种不同格式的图片，但图像框控件不支持绘图的方法和显示文字, 而且还不能向图像框中添加任何控件 常用属性 Picture属性：同图片框，加载删除图片的方法也和图片框一样 Stretch属性：功能同图片框的AutoSize属性，返回或设置图像框中的图片是否要调整尺寸以适应图像框的尺寸，它有两个取值：True或False。其值为True时，图片自动调整尺寸以适应图像框的尺寸；其值为False时，图片按原始尺寸显示，系统自动调整图像框的尺寸来适应图片的尺寸，默认值为False 提示：图片框控件使用起来占的系统资源比图片框控件小，重画起来也比图片框控件要快，因此如果只是简单的显示图片的话，一般最好
7、使用图片框控件,8.1 图形控件,第8章 图形处理,坐标系：默认坐标系和用户自定义坐标系，用于控件的定位和图形的定位 8.2.1 默认坐标系 默认值坐标系：只有容器类控件和窗体才能设置坐标系 窗体默认坐标系：坐标原点为窗体的左上角，含有水平和垂直两个坐标轴，水平方向为X轴，垂直方向为Y轴，向右为X轴的正方向，向下为Y轴的正方向。图8-7中红色的坐标系 容器类控件默认坐标系：坐标原点控件的左上角，水平方向为X轴，垂直方向为Y轴，向右为 X轴的正方向，向下为Y轴的正方向。如图8-7中蓝色坐标系,8.2 设置坐标系,第8章 图形处理,默认坐标系的功能：窗体的默认坐标系用于窗体上的控件的定位（Left
8、、Top属性值） ； 容器类控件（如图片框）的默认坐标系用于容器类上的控件的定位（Left、Top属性值）。在图8-7中两命令按钮的Left、Top属性值相同，但位置却不一样，说明两者的定位坐标系不一样 注意：向图片框添加控件时，必须先在工具箱中选中控件，然后按住鼠标左键，在图片框上拖动一下，便向图片框中添加了该控件 坐标系单位：默认单位为缇（twip），1440缇等于1英寸。除了使用默认单位之外，用户还可以通过设置窗体、图片框的ScaleMode属性来设定单位。ScaleMode常用属性值将表8-3 注意：如果直接设置了ScaleWidth、ScaleHeight、ScaleTop、Scal
9、eLeft属性4个属性中的任何一个，则ScaleMode属性会自动设为0,8.2 设置坐标系,第8章 图形处理,8.2.2 自定义坐标系 自定义坐标系：用户自己建立的坐标系，如图8-8所示。坐标原点、X轴、Y轴的正方向根据需要用户自己选择。在默认坐标系下，横坐标最大值为窗体或图片框的宽度，纵坐标最大值为窗体或图片框的高度，而在自定义的坐标系下，横坐标最大值可以超过窗体或图片框的宽度，纵坐标最大值也可以超过窗体或图片框的高度 【例8-3】在一图片框上建立满足以下条件的坐标系：图片框的左上角的坐标设置为（200，200）；X轴的正方向为向右，最大值为1200；Y轴的正方向为向上，最大值为750,8
10、.2 设置坐标系,第8章 图形处理,建立自定义坐标系的方法 使用ScaleWidth、ScaleHeight、ScaleTop、ScaleLeft属性 ScaleTop、ScaleLeft属性：返回或设置窗一个对象左上角的坐标，其中ScaleLeft用于设置横坐标， ScaleTop用于设置纵坐标。通过设置ScaleTop、ScaleLeft属性来定义坐标系原点的位置 ScaleWidth、ScaleHeight属性：用于设置X轴长度和Y轴长度，ScaleWidth用于设置X轴的长度，ScaleHeight用于设置Y轴的长度 。 设置自定义坐标系方向： ScaleWidth，ScaleHeig
11、ht属性设为负值； ScaleWidth为负，则表示X轴的正方向为向左；ScaleHeight属性为负值，则表示Y轴的正方向为向上 Scale方法 Scale方法的语法结构如下 对象名.Scale(x1,y1)-(x2,y2) 说明：其中对象名一般为窗体或图片框的名称，如Picture1，x1相当于ScaleLeft属性，y1相当于ScaleTop属性，x2-x1相当于ScaleWidth属性，y2-y1相当于ScaleHeight属性,8.2 设置坐标系,第8章 图形处理,绘图属性的设置：线条类型、线条的宽度、绘图模式等属性。另外如果所绘的图是封闭的，比如说，矩形或者圆，这时还要设置填充样式
12、和填充颜色 8.3.1 线型与线宽 线型的选择：设置DrawStyle属性，DrawStyle的常用属性值见表8-4。DrawStyle属性的默认值为1，即实线 设置线型的语法结构： 对象名.DrawStyle属性值 其中对象名可为窗体的名称或图片框的名称，属性值可取表8-4中的“属性值”或常量 线宽的选择：只有实线才能设置线宽（即DrawStyle属性为0）而言，线宽的设置是通过 DrawWidth属性来设置，并以像素为单位 设置线宽的语法结构 对象名.DrawWidth属性值 其中“对象名”为窗体或图片框的名称，“属性值”为大于1的任意数，包括整数和小数 注意：只有实线有粗细之分，对于其他
13、类型的线条而言， DrawWidth属性只能取1。如果DrawWidth为大于1的数时，则DrawStyle属性会自动的设为0，即此时线条只能是实线,8.3 设置绘图属性,第8章 图形处理,8.3.2 绘图模式 绘图模式:图形颜色与绘图区底色之间或图形颜色之间的逻辑关系 绘图模式的选择：设置DrawMode属性，DrawMode常用属性见表 8-5。图形显示的效果，不仅与图形的颜色有关，而且还与DrawMode属性的有关。通过设置DrawMode属性来控制图形显示的效果 设置绘图模式的语法结构 对象名.DrawMode=属性值 其中“对象名”为窗体或图片框 的名称，“属性值”为表8-5中 的“
14、属性值” 或“常量值”,8.3 设置绘图属性,第8章 图形处理,8.3.3 填充样式和填充颜色 填充样式的选择：图形必须是封闭的，填充样式的选择是通过FillStyle属性来设置的，FillStyle常用属性值见表8-6 设置填充样式的语法结构 对象名.FillStyle属性值 其中“对象名”为窗体或图片框的名称， “属性值”为表8-6中的“属性值”或“常数” 填充图案颜色的选择： 设置FillColor属性 设置填充图案颜色的语法结构 对象名.FillColorvalue 其中value值可以是Visual Basic6.0中的一些常量颜色值， 如vbRed（红色），vbBlue（蓝色），v
15、bGreen（绿色），vbBlack（黑色）， vbWhite（白色）等，还可以通过RGB函数来选择颜色。RGB函数的语法结构如下RGB(red,green, blue) 其中“red”，”blue”，”green”都为整型数值，取值范围都为0255，通过这3个参数 不同的搭配可以配置出任何的颜色。如，RGB(255,0,0)为深红，RGB(0,0,255)为蓝 色，RGB(0，255，0)为绿色,8.3 设置绘图属性,第8章 图形处理,与绘图有关的常用方法有：Pset方法、Line方法、Circle方法、Cls方法 8.4.1 Pset方法 功能：用来画任意位置的点，同时还可以给所画的点加上
16、颜色 语法结构对象名.PsetStep(x,y),color 其中“对象名”为窗体名或图片框名,可选参数，如果不特别说明，与绘图 有关的所有方法的对象名都为窗体名或图片框名；x,y为单精度变量，为 画点的坐标值，用来指定所画点的位置，必选参数；color为点的颜色， 可选参数，如果不指定color参数，则以对象的ForeColor属性值来设置点 的颜色 【例8-4】在窗体上产生霓虹灯闪烁的效果 说明：使用Pset方法来画点时，点的坐标都是相对于坐标系的原点 而言的，但如果在（x1，y1）前面加上了Step，这时x1，y1的值不再 是相对于坐标系原点而言的，而是相对上一次所画点的位置而言的,8.
17、4 绘图方法,第8章 图形处理,8.4.2 Line方法 功能：画任意两点间的连线 语法结构对象名.Line Step(x1,y1)-Step(x2,y2),color,BF 其中(x1,y1)为第一点的坐标，即直线起点的坐标，可选参数，如果省(x1,y1)，则以 上一次画线的终点作为本次画点的起点；(x2,y2)为第二点坐标，即直线终点的坐标，必选参数；color为直线的颜色，可选参数，如果省略color参数，则线条颜色为上 一次画线条的颜色 【例8-5】 在图片框中绘制不同类型的直线 线条的颜色：不仅仅取决于Line方法的color属性，它还取决画图模式的选择 例如：在【例8-5】中，我们
18、画线时，将所有线条的颜色都设为了绿色（vbGreen）， 但显示出来的线条却没有一条时绿色，并且线条的颜色还有所不一样，这主要是由于它们的绘图模式不一样的而造成的 DrawMode属性的使用：实线拖动画线的效果 【例8-6】 在图片框上实现拖动画线，即在图片框上单击鼠标左键，然后按住鼠标左键不放，在图片框上移动，便在图片框上拉出一条直线，并且拉出的直线随着鼠标的移动而移动，松开鼠标，便结束画线,8.4 绘图方法,第8章 图形处理,用Line方法画矩形和正方形 用Line方法画4条首尾相连的直线 例如：下面这段代码便可以在窗体上画一个长为1000，宽为800的矩形Form1.Line(400,5
19、00)-Step(1000,0)Form1.Line-Step(0,800)Form1.Line-Step(-1000,0) Form1.Line-Step(0,-800)同Pset方法一样，在坐标前面加上Step表示该点的坐标是相对于前 一点的坐标而言的。以上代码实现画矩形的过程如图8-14所示。 在Line方法的color参数后面加上一个“B”例如：以上代码所画的矩形也可以通过下面的代码来实现：Form1.Line(400,500)-Step(1000,800),B参数(x1,y1)，(x2,y2)两点的坐标分别代表是矩形的左上角和右下角 的坐标。 矩形和正方形的填充：设置FillStyl
20、e和FillColor两个属性,8.4 绘图方法,第8章 图形处理,8.4.3 Circle方法 功能：画与弧线有关的图形，包括圆、椭圆以及圆弧 完整的语法结构如下 对象名.Circle Step(x,y),radiu,color,star,end,aspect 画圆 语法结构对象名.CircleStep(x,y),radiu,color其中(x,y)为圆心的坐标，radiu为圆的半径，color为圆的颜色，如果省略color属性，则用前景颜色来画圆。(x,y)前面加上Step表示圆心的坐标是相对于上一次画点的坐标 填充圆：设置FillStyle和FillColor两个属性,8.4 绘图方法,
21、第8章 图形处理,画圆弧 语法结构对象名.Circle Step(x,y),radiu,color,star,end其中参数star用于指定圆弧的起始角，单位为弧度，取值范围为 ，默认值为0；end用于指定圆弧的终止角，单位为弧度，取值范围为 ，默认值为 参数star，end的说明：参数star，end的值表示与X轴正方向的夹角，并且逆时针方向为角度增大的方向，顺时针方向为角度减小的方向。虽都可以取负值，但其意义和数学上的负角意义不一样，此时的负号表示圆弧要带边界线。如果star为负，则圆弧要带起始边界线；如果end为负，则圆弧要带终止边界线；如果star，end都为负，则圆弧既要带起始边界线
22、，还要带终止边界线；如果star，end都为正，则不带任何边界线，4种不同样式的圆弧如图8-17所示 【例8-8】 以下代码，便可以在窗体上画出如图8-17所示的4种不同样式的圆弧,8.4 绘图方法,第8章 图形处理,画椭圆 语法结构 对象名.Circle Step(x,y),radiu,color,aspect参数aspect，用来将一个标准的圆拉伸成一个椭圆。aspect的值表示的是垂直方向或垂直方向拉伸的比例，如果为1，表示水平和垂直方向都不拉伸，即为一个标准的圆；如果大于1，表示沿垂直方向拉伸，为垂直式椭圆，如图8-18左边的椭圆；如果小于1，表示沿水平方向拉伸，为水平式椭圆，如图8-
23、18右边的椭圆 【例8-9】在一图片框中，先画出一个圆，然后将此圆拉伸为两种样式的椭圆 参数aspect的说明 如果aspect参数小于1，则椭圆的水平轴 的长度为常数2radium，而垂直轴的长 度为2aspectradium，随着aspect值 的改变而改变；如果aspect参数大于1， 则椭圆的垂直轴的长度为常数2radium， 而水平轴的长度随着为2aspectradium ， 随着aspect值的改变而改变,8.4 绘图方法,第8章 图形处理,8.4.4 Cls方法 功能：清除图片框或窗体上的所有图形，以方便用户重新绘图 语法结构对象名.Cls其中“对象名”为窗体名或图片框名,8.4
24、 绘图方法,第8章 图形处理,8.5.1 直线控件 功能：用来画直线的专用控件 【例8-10】 用直线控件在窗体上画出如图8-22所示的直线 “BorderStyle”属性：相当于DrawStyle属性，用于线型的选择 “BorderWidth”属性：相当于DrawWidth属性，用于线宽的选择 注意：与DrawWidth属性一样，如果直线控件的BorderWidth属性值大于1，则BorderStyle属性会自动设为1Solid “BorderColor”属性：用于线条颜色的选择 “DrawMode”属性：用于绘图模式的选择 X1、Y1、X2、Y2属性：用于确定直线的起始位置及中止位置。直线
25、的起始位置由X1、 Y1的值来指定，中止的位置由X2、Y2的值来设定,8.5 常用绘图控件,第8章 图形处理,8.5.2 形状控件 功能：形状控件 用于在窗体或图片框中显示各种形状的图形，这些图形包括矩形、正方形、椭圆、圆、圆角矩形、圆角正方形等，如图8-25所示 常用属性 BorderStyle、BorderColor、BorderWidth、DrawMode等属性：分别用于线条类型、线条颜色、线条宽度、线条显示效果的选择 Left、Top、Width、Height属性:用于确定图形的位置以及大小；位置由Left、Top属性来给定，大小由Width、Height属性来控制的 Shape属性：
26、用于图形的选择，其常用属性值见表8-9 FillStyle和FillColor属性:用于填充图案及图案颜色的选择,8.5 常用绘图控件,第8章 图形处理,动画实现的方法 ：使用定时器控件 动画绘图：使用定时器定时的在图片框（窗体）上画图形，便可以让所画图形“动起来”，并且还可以通过改变定时器的Interval属性来改变图形“动”的速度。例如，在例8.4中，我们便是通过定时器来实现点闪烁的效果，并且我们还可以通过改变定时器的Interval属性值来让闪烁的速度加快或减慢 动画显示图片：使用定时器控件定时的移动图片框或图像框，同时更新图片框或图像框中所显示的图片 【例8-11】 用图片框和图像框来
27、实现“豹子”奔跑的效果,8.6 动画处理,第8章 图形处理,例【8-11】所实现动画的说明 在【例8-11】中，我们实现豹子奔跑的效果，并不是让图片框中的豹子跑起来，而只是让图片框定时的移动，并且图片框移动到一个新的位置，图片框中所显示的图片便更换一次，整个奔跑过程的实现就相当于按图8-30所示的顺序，将豹子奔跑的8个动作图片定时的在窗体不同的位置上显示出来。为了让整个奔跑的过程是连续的，图片显示的位置之间不能相隔太远，并且整个显示过程是循环进行的，直到程序终止或程序暂停。豹子奔跑速度的快慢是通过控制图片框移动的速度来控制的，即定时器的Interval属性值。Interval属性值越大，图片框
28、移动的速度越慢，豹子跑得也就越慢；Interval属性值越小，图片框移动的速度越快，豹子跑得也就越快 注意：在为图像框加载图片，所加载的图片的顺序必须和图8-30所示的顺序一致,8.6 动画处理,第8章 图形处理,强大的图形处理能力是Visual Basic6.0精髓之一，用 Visual Basic6.0来绘图简单而且又容易，另外使用Visual Basic6.0还能够进行简单的图像处理和实现简单的动画效果。通过本章的学习，我们要掌握以下内容： 图片框和图像框两种控件的常用属性及其它们之间的区别 简单的图像处理，包括图像的放大、缩小、移动、翻转 建立自定义坐标系的方法 线条类型、线条宽度、绘图模式、填充样式、填充颜色的设置方法，其中绘图模式的理解是本章的难点 使用绘图方法绘制常用的基本图形，包括点、直线、矩形、圆、圆弧、椭圆 使用直线控件和形状控件这两种专用绘图控件来绘制基本图形 简单动画效果的实现,8.7 本章小结,第8章 图形处理,填空题 选择题 问答题 程序设计题,课后作业,第8章 图形处理,设计一个简单的图片编辑器 让画图板实现画图的功能 设计一个简单的石英钟 设计一个豹子在窗体上奔跑的动画程序,上机实验,
