项目五图形控件与绘图操作.ppt

《项目五图形控件与绘图操作.ppt》由会员分享，可在线阅读，更多相关《项目五图形控件与绘图操作.ppt（52页珍藏版）》请在三一文库上搜索。

1、项目五 图形控件与绘图操作,项目五 图形控件与绘图操作,学习目的： 掌握绘图操作必需的图形基础知识及坐标系统的作用和定义。 掌握常用图形控件（PictureBox、Image、Line、Shape）的使用方法、控件的常用属性和事件。 掌握图形操作的常用方法（PSet、Line、Circle）与技巧。,活动一 认识VB坐标系统,一、VB坐标系统 VB坐标系统是一个二维坐标系统，是由坐标原点、坐标度量单位、坐标X轴和坐标Y轴组成。 在VB中，有两种坐标系统：一种是VB提供的标准坐标系统，另一种是用户自定义坐标系统。 1、标准坐标系统 在标准坐标系统中，均以容器的左上角为该坐标系统的坐标原点（0，0

2、），坐标轴的默认单位都是缇。 ScaleMode属性 每个容器都有一个坐标系，坐标度量单位由容器对象的ScaleMode属性决定，ScaleMode属性设置如表1所示。,表1 ScaleMode属性设置,属性值 单 位 说 明 0 用户定义 User 1 缇 Twip缺省值 2 磅 Point 3 像素 Pixel 4 字符 Charecter缺省为高12磅，宽20磅 5 英寸 Inch 6 毫米 Millimeter 7 厘米 Centimeter,自定义坐标,一、VB坐标系统,2、自定义坐标系统 在VB的窗体对象中也可以使用自定义的坐标系统。在自定义坐标系统中，可以任意规定坐标轴的方向，使

3、用任意的长度单位。 对于窗体来说，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)，

4、右下角坐标(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轴的正方向为向上

5、。,一、VB坐标系统,方法2：通过对象的ScaleLeft、ScaleTop、ScaleWidth、ScaleHeight属性来实现。 标准坐标系统中，ScaleLeft和ScaleTop属性总是0；ScaleWidth和ScaleHeight属性则是根据坐标系统的长度单位计算的对象内部区域的实际宽度和高度。 当改变ScaleTop或ScaleLeft的值后，坐标系的X轴或Y轴按此值平移形成新的坐标原点。右下角坐标值为(ScaleLeft+ScaleWidth,ScaleTop+ScaleHeight)。X轴与Y轴的度量单位为分别为1ScaleWidth和1ScaleHeight。 例：Sca

6、le(x1,y1)-(x2,y2) 等同于设置以下四个属性： ScaleLeft=x1 ScaleTop=y1 ScaleWidth=x2-x1 ScaleHeight=y2-y1,一、VB坐标系统,【例1】在窗体的单击事件中，用属性定义图片框的坐标系。 【例2】在窗体中单击命令按钮，用Scale方法定义图片框的坐标系。,二、直线控件（Line）,直线控件(Line)用来在窗体和其他容器控件中创建简单的线段，它没有自己的特殊方法，也不产生任何事件。设计和运行时可以通过它的属性来改变它的位置、粗细和颜色等。 1. 常用属性 (1)BorderColor属性：设置直线的颜色。 (2)BorderW

7、idth属性：设置直线的粗细。 (3)BorderStyle属性：设置直线样式。06种类型,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用“前景色”画点,如想删除一

8、个点，则用“背景色”画点。 例如: Picture1.PSet(1500,1000),RGB(255,0,0) 在图片框Picture1中(1500,1000)处画一个红色的点。,四、AutoRedraw属性,AutoRedraw属性是窗体和图片框的属性。 当使用Line、Circle、Pset、Point、Print等方法创建的图形和文字在屏幕中暂消失，窗体复原后，这些图形或文字无法自动恢复。当设置AutoRedraw属性值为True后，则可以自动恢复，否则要由Paint事件过程完成。,活动一实例,例：在图片框上随机画100个闪烁的彩色圆点。,活动二 图形控件的运用,图形控件有直线控件(Li

9、ne)、形状控件(Shape)、图像框(Image)、图片框(PictureBox)，本节分别介绍其程序设计方法。,一、形状控件,使用形状控件(Shape)可在窗体或其他控件容器中画出矩形、正方形、圆、椭圆、圆角矩形或圆角正方形。形状控件的Shape属性决定了它的图形样式，这个属性的所有可能取值都有对应的形状样式。,1.形状控件的常用属性,(1)Left、Top、Width和Height属性决定形状控件的位置和大小，也可以用Move方法改变它的大小和位置。 (2)BorderWidth属性设置图形边界宽度。它的值是以像素为单位的边线宽度。 (3)BorderColor属性设置图形边界颜色。 (

10、4)BorderStyle属性设置边界线的类型。 (5)FillColor属性设置图形的前景颜色。 如果要为图形填充颜色(背景)时,首先应该将属性FillStyle(填充方式)设置成1(透明),否则FillColor(前景色)的颜色会遮盖了背景色,达不到预期的目的。 例如,将图形的FillStyle属性的值设为0(实心,不透明),FillColor(填充颜色)为蓝色,此时,不论BackColor为何种颜色,都被蓝色所遮盖,如果将FillStyle改为1(透明),则图形内显示背景色。,2.形状控件的特有属性,(1)Shape属性 该属性用来设置图形的形状。 0Rectangle 矩形 1Squa

11、re 正方形 2Oval 椭圆形 3Circle 圆形 4Rounded Rectangle 圆角矩形 5Rounded Square 圆角正方形 Shape属性的缺省值为0(矩形)。若选择3,则用Shape控件画出的矩形中画出一个圆(圆的直径是矩形的短边)。,(2)BackStyle属性 该属性用来设置图形背景的风格 0Transparent(透明) 1Opaque(不透明) 缺省值为0。如果着色,显然要将BackStyle属性设置为“不透明”。 (3)FillStyle属性 该属性用来设置图形填充的线形(风格或样式)。 【例1】用Shape属性显示形状控件的6种形状。 【例2】将形状控件显

12、示不同的形状、设置不同的颜色，填充不同的图案。,2.形状控件的特有属性,二、图片框,图片框(PictureBox)控件的主要作用是为用户显示图片，也可作为其他控件的容器。实际显示的图片是由Picture属性决定的。 1.特有属性 (1)Picture属性 Picture属性用于窗体、图片框和图像框。它可通过属性窗口进行设置，也可在程序中进行设置，即使用LoadPicture()函数，装入图片文件。在窗体、图片框和图像框中显示的图形以文件形式存放在磁盘上，VB6.0支持以下格式的图形文件。 位图文件(Bitmap) 图标文件(Icon) 图元文件(Metafile) 压缩位图文件(JPEG) 压

13、缩位图文件(GIF),二、图片框,(2)AutoSize属性 图片框控件不能伸缩图像使图像适应它的大小。如果把图片框控件的AutoSize属性设置为True，那么图片框控件就会自动调整自身的大小以容纳整个图像。 2.图片框控件的特点 图片框控件的最大特点是，它的表现更像一个窗体对象，它具有许多与窗体对象相似的属性和方法。窗体的所有显示文本和图像的方法、作图方法以及与之相关的属性在图片框控件中都有同名的方法和属性。图片框控件有自己的坐标系统，也可以重新定义坐标系统。,二、图片框,3.图形文件的装入 图形文件的装入有两种方法：一种是在设计阶段装入，另一种是在运行期间装入。 （1）在设计阶段装入图形

14、文件 在设计阶段装入图形文件用两种方法： (1)用属性窗口中的Picture属性装入 (2)利用剪切板装入 （2）在运行期间装入图形文件 Picture属性可以设置被显示的图片文件名(包括可选路径名)。在程序运行时，可以使用LoadPicture()函数，在图片框中装入图形。,二、图片框,LoadPicture()函数 格式：对象.Picture=LoadPicture(“图形文件名“) 功能：在对象中装入一个图形。 说明： (1)对象可以是图片框或图像框，也可以是窗体，如果是窗体，对象名可以省略。 (2)如果删除一个图形，可以使用LoadPicture()函数，将一个空白图形装入对象的Pic

15、ture属性。 格式：对象.Picture=LoadPicture() 例：在图片框装入图形：Picture1.Picture=LoadPicture(“d:a1.jpg”) 删除图形： Picture1.Picture=LoadPicture(),二、图片框,装入图片框中的图形，可以拷贝到另一个图片框中。假设在窗体中已建立了两个图片框：Picture1与Picture2，则用： Picture1.Picture=LoadPicture(“C：GraphicsIconsArrowsarw06up.ico“) Picture2.Picture=Picture1.Picture 可以把图片框Pic

16、ture1中的图形拷贝到图片框Picture2中。 4.常用事件 图像框可以响应Click和DblClick事件。 5.常用方法 在图片框中使用Cls方法和Print方法。,【例】在窗体上交换两个图片框中的图形。,二、图片框,PaintPicture方法 格式：对象.PaintPicture Source,x1,y1,Width1,Height1,x2,y2,Width2,Height2,OpCode 说明：为图片框控件提供一个具有编辑功能的命令，使用该方法可以对位图进行水平或垂直翻转，以及对图形进行拉伸、压缩等操作。 source：被放置的源图像，必须在窗体或图片框的Picture属性中设置

17、。 X1,y1：图像左上角在目的对象中的位置。通过改变x1,y1的值来实现图片的移动。 Width1,Height：图像在目的对象中的位置。通过改变目标图片的宽度和高度来实现图片的拉伸和缩放。将width1，height1参数的值设为负值，可以将图片翻转。 X2,y2：源对象中开始复制图像的位置，缺省时为0，即从源对象的左上角开始复制图像。 Width2,Height：要复制的区域的宽度和高度，缺省时为整个图像。,二、图片框,【例】设计图片编辑器，能实现对图片进行简单的水平翻转、垂直翻转、放大、缩小等操作。,二、图片框,例：编程实现三个图片框中图片的轮换，并使得一个图片框中可以显示整个图片。

18、（1）界面设计 在窗体上添加如图1所示三个图片框控件Picture1、Picture2、Picture3。将Picture3的AutoSize属性设置为True。其他属性值为默认值。,（a）设计时界面 （b）运行时界面 （c）响应事件,图1 图片框,二、图片框,（2）编写事件代码 在Form_Load()事件中加入如下代码： Private Sub Form_Load() Picture1.Picture = LoadPicture(“c:steamship.gif“) Picture2.Picture = LoadPicture(“c:bus.gif“) Picture3.Picture =

19、 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属性 该属性的功能与

20、图片框的相同。 在图像框控件装入图片文件的方法和使用图片的文件格式也与图片框相同。 (2)Stretch属性该属性用来自动调整图像框中图形内容的大小，既可通过属性窗口设置，也可以通过程序代码设置。该属性值为True或False。 其属性值为False时，图像框可以自动改变大小以适应其中的图形。 其属性值为True时，加载到图像框中的图形，可以自动调整尺寸以适应图像框的大小。,三、图像框,2.常用事件 图像框可以响应Click和DblClick事件。 3.图片框与图像框的区别 （1）图片框是容器控件，可以作为父控件，而图像框不能作为父控件。 （2）图片框可以通过Print方法接收文本，而图像框不

21、能接收用Print方法输入的信息，也不能用绘图方法在图像框上绘制图形。 （3）图像框比图片框占用内存少，显示速度快。,【例】编写程序，模拟交通信号灯的切换。,活动二实例,活动三 图形方法,图形方法有Pset、Line、Circle，本节通过使用作图方法，进行画点、画直线、画矩形、画圆、画椭圆、画圆弧等。,一、Line方法,格式:对象.Line (x1,y1)-(x2,y2),颜色，BF 功能:在窗体或图片框上画出一条直线或一个矩形。对象缺省时,为窗体。 说明: (1)x1,y1：画线起始点的坐标，缺省时从对象的当前位置开始画。 (2)x2,y2：画线结束点的坐标。 (3)颜色：线条的颜色，缺省

22、时使用对象的前景色。 (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)红、绿、蓝三种基本色使用0255之间的整

23、数。 (2)从理论上来说，三种基本色混合可产生256256256种颜色，但是实际使用时受到显示硬件的限制，普通显示卡只能显示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,25

24、5) 紫红色 RGB(255,255,0) 黄色 RGB(255,255,255) 白色,2.QBColor函数,QBColor函数采用QuickBasic所使用的16种颜色。 格式：QBColor(颜色码) 说明： (1)颜色码使用015之间的整数，每个颜色码代表一种颜色。 (2)RGB函数与QBColor函数实际上都返回一个6位的16进制的长整数，这个数从左到右，每两位一组代表一种基色，他们的顺序是蓝绿红。因此，也可以直接用6位的16进制颜色代码表示。在色彩的属性框中，可以看这些代码。表3列出了QBColor颜色函数。QBColor(2)代表绿色,QBColor(4)代表红色。,表3 QB

25、Color颜色函数,颜色值 颜色 颜色值 颜色 0 黑色 8 灰色 1 蓝色 9 亮蓝色 2 绿色 10 亮绿色 3 青色 11 亮青色 4 红色 12 亮红色 5 粉红色 13 亮粉红色 6 黄色 14 亮黄色 7 白色 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 此时画出一个内部填充红色的实心矩形。,二、

26、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),5

27、00,QBColor(12),0.5 Picture1.Circle(1000,400),500,QBColor(12),1,3.用Circle方法画圆弧及扇形,格式:对象名.Circle(x,y),半径,颜色,起始角,终止角 功能:在窗体或图片框上画圆弧及扇形。 说明: (1)起始角与终止角:为所画圆或椭圆的起始角度与终止角度,单位为弧度,取值为-22，缺省时,起始角为0,终止角为2。弧度增大方向是逆时针方向。 (2)起始角、终止角均为正时,则只画圆弧;如果两者之一为负值时,不仅画圆弧,而且还会从圆心到负值的点画一条直线。,角度换算成弧度的公式为：弧度=角度 * 3.14/180,活动三实例

28、,绘图属性,1、当前坐标CurrentX和CurrentY属性：给出对象在绘图时的当前坐标。 说明：对象是指窗体、图形框或打印机。 当重新设置窗体的坐标系统时，CurrentX和CurrentY的值也将自动改变，但这两个数为坐标的点的实际位置并不改变。 【例】使用CurrentX和CurrentY属性，在窗体上输出如图所示的立体字效果。,绘图属性,2、线宽 (1)DrawWidth属性 该属性用于设置使用窗体或图片框对象的作图方法画线时以像素为单位的线宽，其取值范围在132 767之间。当DrawWidth属性的值较大时，画出的线就有一定的宽度。 (2)BorderWidth属性 该属性用于使

29、用控件时定义线的宽度。 【例】在窗体上画一系列宽度递增的直线。,绘图属性,3、线型样式 (1)DrawStyle属性 该属性决定作图方法画线时的线型样式。 0实线(缺省) 1虚线 2点线 3点划线 4双点划线 5透明线(无线) 6内实线 说明：当DrawWidth属性值大于1并且DrawStyle属性值为14时，都能产生实线效果。,绘图属性,(2)BorderStyle属性 该属性用于使用控件时给出画线的样式。 0透明线 1实线(缺省) 2长划线 3点线 4点划线 5点点划线 6内实线,绘图属性,4、填充 封闭图形的填充方式是由FillColor属性与FillStyle属性决定的。 (1)Fi

30、llColor属性 该属性指定填充图案的颜色，缺省颜色与ForeColor相同。 (2)FillStyle属性 该属性决定填充封闭图形的图案样式。 0实心 1透明 2水平线 3垂直线 4向上对角线 5向下对角线 6交叉线 7对角交叉线,【例】用FillStyle属性指定填充的图案，共有8种图案。,活动四 动画的制作,(1)改变图像的位置和尺寸； (2)在不同的位置显示不同的图像； (3)在相同的位置显示不同的图像； (4)使用Move方法移动控件或图像。 不论用何种方法，都必须使用计时器定时触发有关动画的事件过程，用计时器的Interval属性控件控制图像的移动频度。,活动四 动画的制作,1、

31、Move方法 格式：对像名.Move (Left,Top，Width， Height) Left属性：指定对象的左边沿水平坐标。 Top属性：指定对象的上边沿垂直坐标。 Width属性：指定对象的新宽度。 Height属性：指定对象的新高度。 说明: (1)只有Left参数是必须的，其他三个是可选的。 (2)在屏幕上移动窗体，或在窗体中移动控件时，都是相对于原点(0，0)，原点位于左上角。当在容器中移动控件时，使用容器的坐标系。,例：,活动四 动画的制作,2、MouseMove事件 当移动鼠标光标时，在窗体或控件上发生MouseMove事件。 语法：Sub Object_MouseMove(B

32、utton 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还能够进行简单的图像处理和实现简单的动画效果。 通过本章的学习，我们要掌握以下内容。 建立自定义坐标系的方法。 图片框和图像框两种控件的常用属性及其它们之间的区别。 简单的图像处理，包括图像的放大、缩小、移动和翻转。, 线条类型、线条宽度、绘图模式、填充样式和填充颜色的设置方法，其中绘图模式的理解是本章的难点。 使用绘图方法绘制常用的基本图形，包括点、直线、矩形、圆、圆弧和椭圆。 使用直线控件和形状控件这两种专用绘图控件来绘制基本图形。 简单动画效果的实现。,