Visual Basic程序设计 第三版 教学课件 ppt 作者 丁爱萍 第6-11章 项目九

项目九　图形与图像设计项目九　图形与图像设计任务9.1绘制图形任务9.2常用绘图任务9.3显示图片项目九　图形与图像设计任务9.1绘制图形　　任务导入　　使用绘图控件可以直接在窗体上绘制简单的图形，不需要编写代码，使用非常简单。本任务学习使用Shape(形状)控件和Line(直线)控件绘制图形的方法以及与图形和颜色有关的属性。项目九　图形与图像设计　　学习目标　　(1)会使用常用的绘图控件绘制图形。　　(2)了解与图形有关的属性。　　(3)了解颜色属性和颜色函数的使用方法。项目九　图形与图像设计　　任务实施　　1．了解Shape控件　　Shape控件预定义了6种形状的图形，可通过设置Shape属性来显示所需的图形，见表9-1。　　图9.1所示为当Shape属性分别为0、1～5时，用Shape控件画图的效果。可以调整这些形状的大小，也可以设置其颜色、边框样式、边框宽度等。表9-2列出了Shape控件的常用属性。项目九　图形与图像设计项目九　图形与图像设计图9.1用Shape控件画出的图形项目九　图形与图像设计项目九　图形与图像设计　　BorderStyle属性产生的效果取决于BorderWidth属性的设置。如果BorderWidth不是1，并且BorderStyle不是0或6，则将BorderStyle设置为1。图9.2所示为设计时用Shape控件画的图形。也可以在程序运行时修改属性以动态地显示图形。项目九　图形与图像设计图9.2设计时通过设置属性显示不同图形项目九　图形与图像设计　　【课堂演练】　　【实例9-1】编写程序显示Shape控件的6种形状，并设置不同的填充样式。　　【实现步骤】　　(1)在窗体上建立Shape控件数组Shape1(0)～Shape1(5)。　　(2)编写事件代码。项目九　图形与图像设计　　PrivateSubForm_Activate()　　DimiAsInteger　　Print　　Print“012345”　　Shape1(0).Shape=0　　Shape1(0).FillStyle=2项目九　图形与图像设计　　Fori=1To5　Shape1(i).Left=Shape1(i–1).Left+1000‘确定控件位置　Shape1(i).Shape=i’通过Shape属性改变控件形状　Shape1(i).FillStyle=i+2‘通过FillStyle属性改变填充样式　Shape1(i).Visible=True　Nexti　EndSub项目九　图形与图像设计　　(3)运行程序，结果如图9.3所示。图9.3在程序运行中改变Shape控件的属性项目九　图形与图像设计　　2．了解Line控件　　Line控件与Shape控件相似，但仅用于画线。Line控件用于在窗体、图片框或框架中画各种直线段，既可以在设计时通过设置线的端点坐标属性来画出直线，也可以在程序运行时动态地改变直线的各种属性。项目九　图形与图像设计　　在设计时，可以使用Line控件在窗体上可视化地安排直线的位置、长度、颜色、宽度、实虚线等属性。运行时不能使用Move方法移动Line控件，但是可以通过改变X1、X2、Y1和Y2属性来移动它或者调整它的大小。　　BorderStyle属性的效果取决于BorderWidth属性的设置。如果BorderWidth的值不是1，并且BorderStyle的值不是0或6，则将BorderStyle的值自动设置为1。项目九　图形与图像设计　　可以在运行时修改其属性，语句如下：　　Line.BorderWidth=3‘将直线宽度设置为3个像素(Pixel)　　用Line控件画直线时，系统将每一根直线(即一个Line控件)都看成是一个对象，如图9.4所示。项目九　图形与图像设计图9.4设计时用Line控件所画的直线项目九　图形与图像设计　　3.了解与图形有关的属性　　在VB中，窗体、图片框或Printer对象都有一些与图形有关的属性，使用这些属性能够设置颜色、线型和填充样式，可以绘制出丰富多彩的图形。表9-3中列出了这些图形属性。项目九　图形与图像设计项目九　图形与图像设计　　4．了解DrawMode属性　　DrawMode属性用来决定由图形方法或Shape控件及Line控件所绘制线条的真实颜色。在一个黑色或纯白色的背景上，或者在未定义颜色的背景上绘图时，DrawMode属性将不起作用。项目九　图形与图像设计　　用DrawMode属性绘图时，系统将当前的ForeColor、BackColor和DrawMode属性所确定的方式组合起来，其结果为最后绘图的颜色。DrawMode属性的语法为　　[〈对象〉.]DrawMode[=〈值〉]　　其中，〈值〉的范围为1～16，按其复杂程度可分为表9-4所示的四类。项目九　图形与图像设计项目九　图形与图像设计　　在这四种变化中，DrawMode属性不考虑前景色(ForeColor)，只设置像素的当前颜色，具体功能见表9-5。项目九　图形与图像设计　　在这两种变化中，像素颜色只与ForeColor属性有关，而与BackColor属性及当前颜色无关，具体功能见表9-6。项目九　图形与图像设计　　DrawMode属性的这种功能与ForeColor和当前颜色有关。在绘图和动画中，DrawMode=7是一个很有用的设置值，它利用Xor方式，在同一地点绘图两次，从而消除第一次绘画的痕迹，精确地还原出绘图之前的显示内容，从而实现动画效果。　　任何颜色与其自身进行Xor操作将产生黑色，进行NotXor操作将产生白色，见表9-7。项目九　图形与图像设计项目九　图形与图像设计　　由上表可以看出，这些组合的结果是难以预测的。　　使用Mask类操作可以为CopyPen建立图像的阴影，见表9-8。　　在DrawMode的16种设置中，只有值1、6、7、11、13、16的结果是能预测的。项目九　图形与图像设计项目九　图形与图像设计　　5．了解DrawWidth属性和DrawStyle属性　　1) DrawWidth属性　　DrawWidth属性的语法格式为　　[〈对象〉.]DrawWidth[=〈值〉]　　窗体、图片框的DrawWidth属性可以用来设置绘图线的宽度。〈值〉以像素为单位，设置后影响Pset、Line和Circle方法。〈值〉的范围是1～32767，默认值为1，也就是说，画出的线为1个像素宽。项目九　图形与图像设计　　2) DrawStyle属性　　DrawStyle属性的语法格式为　　[〈对象〉.]DrawStyle[=〈值〉]　　DrawStyle属性用于指定用图形方式创建的线是实线还是虚线。〈值〉的取值范围为0～6，用来产生不同间隔的实、虚线，默认值为0(实线)。　　不同设置值的效果如图9.5所示。项目九　图形与图像设计　　6．了解FillColor属性和FillStyle属性　　利用FillColor和FillStyle属性，可以为已绘制好的封闭图形(如正方形、矩形、圆形等)和Shape控件设置填充图案。当需填充图案时，填充的颜色由FillColor属性确定，填充的图案样式由FillStyle属性确定。项目九　图形与图像设计　　1) FillColor属性　　FillColor的语法格式为　　[〈对象〉.]FillColor[=〈值〉]图9.6FillStyle属性不同设置值的效果　　其中，〈值〉为可选的长整型数，为该点指定的RGB颜色。如果省略，则默认值为0。可用RGB函数或QBColor函数指定颜色。项目九　图形与图像设计　　2) FillStyle属性　　FillStyle的语法格式为　　[〈对象〉.]FillStyle[=〈值〉]　　其中，〈值〉的取值范围为0～7共八种选择：纯色、横条纹、竖条纹、正网格、斜网格等。不同设置值的效果如图9.6所示。项目九　图形与图像设计图9.6FillStyle属性不同设置值的效果项目九　图形与图像设计　　7．了解颜色属性　　窗体和图片框都有两个关于颜色的属性BackColor和ForeColor。BackColor属性用于定义绘画区的背景颜色，若BackColor设置为灰色，则清除后整个区域为灰色。ForeColor属性决定对象上绘制的文本或图形的颜色，改变ForeColor属性不影响已创建的文本或图形。项目九　图形与图像设计　　在设计时指定颜色属性的操作比较简单，只要在属性窗口中单击相应的属性就可以直接利用调色板进行颜色的选择了。而在程序运行中要设置颜色就没有这么直观了，程序员可以使用VB预先定义好的颜色常量指定颜色，也可以使用RGB函数生成一个颜色。项目九　图形与图像设计　　VB预先定义好的颜色常量可以用对象浏览器列出，当使用这些内部常数时，无需了解这些常数是如何产生的，也无需声明。例如，无论什么时候想指定红色作为颜色参数或颜色属性的设置值，都可以使用常数vbRed：　　　　BackColor=vbRed而颜色函数则提供了更大的选择余地。项目九　图形与图像设计　　8．了解颜色函数　　1) RGB函数　　在这两个颜色函数中，RGB是最常用的一个，其语法格式为　　RGB(red，green，blue)其中，red、green、blue分别表示颜色的红色成分、绿色成分、蓝色成分，取值的范围都是0～255。RGB函数采用红、绿、蓝三原色原理，返回一个长整型数，用来表示一个RGB颜色值。表9-9中列出了一些常见的颜色，以及这些颜色的红、绿、蓝三原色的成分值。项目九　图形与图像设计项目九　图形与图像设计　　2) QBColor函数　　QBColor函数沿用于早期的BASIC版本QBasic，它返回一个用来表示所对应颜色值的RGB颜色码，其语法格式为　　　QBColor(color)其中，color参数是一个介于0～15的整型值，如表9-10所示。项目九　图形与图像设计项目九　图形与图像设计　　　　　任务9.2常用绘图方法　　任务导入　　前面介绍的绘图控件虽然使用简单，但它提供的绘图样式选择有限，只能实现简单功能。因此，如果我们要实现更高级的绘图功能，就需要使用VB提供的绘图方法。本任务学习使用VB绘图方法来绘制图形。项目九　图形与图像设计　　学习目标　　(1)会使用PSet方法、Line方法、Circle方法绘制点、线、圆等。　　(2)会使用Cls方法清除图形。项目九　图形与图像设计　　任务实施　　1．掌握画点方法(PSet)的用法　　PSet方法可以在对象的指定位置(x,y)，按确定的像素颜色　　画点，其语法格式为　　[〈对象〉.]PSet[Step](x,y),[〈颜色〉]　　【说明】　　(1)〈对象〉为可选的对象表达式，如果省略〈对象〉，则将具有焦点的窗体作为〈对象〉。　　(2) Step为可选的关键字，指定相对于由CurrentX和CurrentY属性提供的当前图形位置的坐标。项目九　图形与图像设计　　(3) (x,y)为必需的一对单精度浮点数，用来设置点的水平和垂直坐标。　　(4)〈颜色〉为可选的长整型数，为该点指定颜色。如果省略，则使用当前的ForeColor属性值。可用RGB函数或QBColor函数指定颜色。项目九　图形与图像设计　　【课堂演练】　　【实例9-2】如图9.7所示，利用Pset方法在窗体上画出“满天星”。　　【实现步骤】　　(1)问题。将窗体的背景色改为白色，直接在窗体上产生“满天星”，以便清晰显示。项目九　图形与图像设计图9.7满天星项目九　图形与图像设计　　(2)编写的事件代码如下：　　PrivateSubForm_load()　　Show　　DrawWidth=3‘控制画出点的大小　　Randomize　　Fori=1To1000　　x=Form1.ScaleWidth*Rnd'随机定位项目九　图形与图像设计　y=Form1.ScaleHeight*Rnd‘随机定位r=Int(255*Rnd)’颜色值为随机数g=Int(255*Rnd)b=Int(255*Rnd)Form1.PSet(x,y),RGB(r,g,b)‘画点Forn=1To50000:Nextn’用空循环实现延时效果NextiEndSub项目九　图形与图像设计　　(3)运行程序，在窗体上随机产生各种颜色的点，结果如图9.8所示。　　【实例9-3】用PSet方法绘制Cos(x)数学函数曲线。　　【实现步骤】　　(1)提示。在VB中运用Cos(x)数学函数时，应将角度转换成弧度。项目九　图形与图像设计　　(2)输入下面的窗体事件代码：　　PrivateSubForm_Paint()　　DimxAsInteger　　Fori=0To10000‘用Pset画直线　　PSet(i,1200),vbRed　　Nexti　　Forx=0To10000’画曲线　　PSet(x,1000*Cos(x*3.1415926/1800)+1200),vbBlue　　Nextx　　EndSub项目九　图形与图像设计　　(3)运行程序，结果如图9.8所示。图9.8用PSet方法绘制的数学曲线项目九　图形与图像设计　　2．掌握画直线、矩形方法(Line)的用法　　Line方法可以在对象上的两点之间画直线或矩形，其语法格式为　　〈对象〉.Line[Step][(x1,y1)]-[Step](x2,y2)[,〈颜色〉][,B[F]]项目九　图形与图像设计　　【说明】　　(1) x1、y1为可选项，是直线或矩形的起点坐标。如果省略，则起点位于由CurrentX和CurrentY属性指定的位置。ScaleMode属性决定了使用的度量单位。　　(2) x2、y2为必需的，是直线或矩形的终点坐标。　　(3)〈颜色〉为可选的长整型数，用来设置直线或矩形的颜色。如果省略，则使用ForeColor属性值。可用RGB函数或QBColor函数指定颜色。项目九　图形与图像设计　　(4) B为可选的，如果选择B，则以(x1,y1)为左上角坐标，(x2,y2)为右下角坐标画出矩形。F选项用来规定矩形以矩形边框的颜色填充。不能不用B而用F。如果不用F仅用B，则矩形用当前的FillColor和FillStyle填充。FillStyle的默认值为Transparent。项目九　图形与图像设计　　(5)画连接的线时，前一条线的终点就是后一条线的起点。线的宽度取决于DrawWidth属性值。在背景上画线和矩形的方法取决于DrawMode和DrawStyle属性值。　　(6)执行Line方法后，CurrentX和CurrentY属性被参数设置为终点。项目九　图形与图像设计　　【课堂演练】　　【实例9-4】下面用Line方法的不同参数画出图形，如图9.9所示。图9.9用Line方法的不同参数画出的图形项目九　图形与图像设计　　【实现步骤】　　窗体事件代码如下：　　PrivateSubForm_Paint()　　Cls　　Scale(0,0)-(13,11) ‘设置用户坐标系统　　Line(1,1)-(4,4),4’画直线　　Line(5,1)-(8,4),4,B ‘画矩形框　　Line(9,1)-(12,4),4,BF’画矩形块　　Fori=1To3 ‘画三个嵌套的方形框　　Line(i,4+i)-(7-i,11-i),,B　　Nexti　　EndSub项目九　图形与图像设计　　【说明】　　在使用PSset和Line方法时，在每个坐标点(x,y)之前可加上Step关键字，用来指出将要画出的点和当前坐标点的相对位置，如上例中的第4、5、6行语句可以用以下语句代替：　　Line(1,1)-Step(3,3),4 ‘画直线　　Line(5,1)-Step(3,3),4,B ’画矩形框　　Line(9,1)-Step(3,3),4,BF '画矩形块项目九　图形与图像设计　　3．掌握画圆方法(Circle)的用法　　Circle方法可以在对象上画圆、椭圆或弧。其语法格式为　　[〈对象〉.]Circle[Step](x,y),〈半径〉,[color,start,end,aspect]项目九　图形与图像设计　　【说明】　　(1) (x,y)指定圆、椭圆或弧的中心坐标。　　(2)〈半径〉指定圆、椭圆或弧的半径。　　(3) color可选，如果被省略，则使用ForeColor属性值。　　(4) start和end指定弧或扇形的起点和终点位置(以弧度为　单位)，其范围为 －2～2。起点的默认值是0，终点的默认值是2。正数画弧，负数画扇形。项目九　图形与图像设计　　(5) aspect为垂直半径与水平半径之比，不能为负数。当aspect>1时，椭圆沿垂直方向拉长；当aspect<1时，椭圆沿水平方向拉长。aspect的默认值为1.0，此时在屏幕上产生一个标准正圆(非椭圆)。　　(6)可以省略语法中间的某个参数，但不能省略分隔参数的逗号。指定的最后一个参数后面的逗号是可以省略的。项目九　图形与图像设计　　【课堂演练】　　【实例9-5】在图片框中画出如图9.10所示的圆弧、扇形。图9.10利用Circle方法绘图项目九　图形与图像设计　　【实现步骤】　　(1)在窗体添加一个图片框控件Picture1和一个命令按钮Command1。　　(2)编写“输出图形”命令按钮的单击事件代码如下：　　PrivateSubCommand1_Click()　　pi=4*Atn(1)　　Picture1.Scale(0,0)-(100,100)　　Picture1.Circle(50,50),10,QBColor(1),0,pi/2　　Picture1.Circle(50,50),20,QBColor(2),pi/3,1.5*pi　　Picture1.Circle(50,50),30,QBColor(3),-pi/2,-pi/6　　Picture1.Circle(50,50),40,QBColor(4),-pi/4,-pi/3　　EndSub项目九　图形与图像设计　　4．掌握清除图形方法(Cls)的用法　　Cls方法可以清除Form或PictureBox控件中由图形和打印语句在运行时所生成的图形和文本，清除后的区域以背景色填充。设计时使用Picture属性设置的背景位图和放置的控件不受Cls方法影响。其语法格式为　　　　[〈对象〉.]Cls　　调用Cls方法之后，〈对象〉的CurrentX和CurrentY属性复位为0。项目九　图形与图像设计　　5.了解绘图语句与Paint事件　　如果在程序代码中有图形方法的绘图语句，则使用Paint事件将很有用。在设计多媒体应用程序时，最有效的方法是将所有的绘图方法(Pset、Line、PaintPicture等)都放在Paint事件中，否则可能会发生一些不希望发生的事情，如图形控件(Label、Line、Shape等)可能会重叠、丢失或以错误的顺序排列。项目九　图形与图像设计　　窗体和PictureBox图片框控件都有Paint事件，通过使用Paint事件过程，可以保证必要的图形都得以重现。例如，窗体最小化后，恢复到正常大小时，窗体内所有图形都得重画。　　当AutoRedraw属性为True时，将自动重画，Paint事件不起作用。　　在Resize事件过程中使用Refresh方法时，可在每次调整窗体大小时强制对所有对象通过Paint事件进行重画。项目九　图形与图像设计　　【课堂演练】　　【实例9-6】本例是一个Paint事件在Resize事件中所起作用的示例。运行时将画出一个与一个窗体各边的中点相交的菱形，当随意调整窗体的大小时，窗体中的菱型也随着自动调整，图9.11(a)为调整窗体前的显示效果，图9.11(b)为调整窗体后的显示效果。项目九　图形与图像设计　　【实现步骤】　　窗体事件代码如下：　　PrivateSubForm_Paint()　　DimHalfX,HalfY‘声明变量　　HalfX=ScaleLeft+ScaleWidth/2’设置到宽度的一半　　HalfY=ScaleTop+ScaleHeight/2‘设置到高度的一半　　'画一个菱形项目九　图形与图像设计　　Line(ScaleLeft,HalfY)-(HalfX,ScaleTop)　　Line-(ScaleWidth+ScaleLeft,HalfY)　　Line-(HalfX,ScaleHeight+ScaleTop)　　Line-(ScaleLeft,HalfY)　　EndSub　　PrivateSubForm_Resize()　　Refresh　　EndSub项目九　图形与图像设计图9.11Paint事件示例　项目九　图形与图像设计　　　　　任务9.3显示图片　　任务导入　　在VB应用程序中，图片可以显示的三个位置是：窗体(Form)上、图像(Image)控件内和图片框(Picture)控件内。项目九　图形与图像设计　　图片可以是任何格式的图形图像文件：位图文件(.bmp,.dib,.cur)、图标文件(.ico)、图元文件(.wmf)、增强型图元文件(.emf)、JPEG或GIF文件等。图片可来自Windows的各种绘图程序，如随同各种版本Windows一同提供的绘图程序、其他图形应用程序或剪贴画库。可以在设计或运行时，采用不同途径把图片添加到窗体、图片框或图像控件中。项目九　图形与图像设计　　学习目标　　(1)会在窗体上加载图片。　　(2)会在图像(Image)控件内显示图形。　　(3)会在图片框(Picture)控件内显示图形。项目九　图形与图像设计　　任务实施　　1.直接加载图片到窗体　　使用窗体的Picture属性，可以很方便地把图片加载到窗体上。　　在运行时要显示或替换图片，可利用LoadPicture函数设置Picture属性。Picture属性包括被显示图片的文件名和可选路径名。项目九　图形与图像设计　　LoadPicture函数的语法格式为　　　　LoadPicture([〈文件名〉])　　其中，〈文件名〉是一个字符串表达式，包括路径和文件的名称。如果省略〈文件名〉，则LoadPicture函数将清除图像。项目九　图形与图像设计　　【课堂演练】　　【实例9-7】在窗体上加载图片。　　【实现步骤】　　(1)选中窗体。　　(2)单击属性窗口中的Picture属性，这时该属性出现“…”，单击之则打开“加载图片”对话框。项目九　图形与图像设计　　(3)从“搜寻”中查找需加载图片的位置，在列表中选中文件名，单击“打开”按钮。如C:\ProgramFiles\MicrosoftVisualStudio\Common\Graphics\Metafile\Business\coins.wmf，加载后的效果如图9.12所示。项目九　图形与图像设计图9.12直接在窗体上加载图片项目九　图形与图像设计　　2.使用图像控件　　图像控件具有Stretch属性，其取值有以下两个：　　(1)Stretch属性设为False(默认值)时，图像控件可根据图片调整大小，如图9.13所示。　　(2)将Stretch属性设为True时，将根据图像控件的大小来调整图片的大小，这可能使图片变形。项目九　图形与图像设计图9.13Stretch属性为False时Image控件根据图片调整大小项目九　图形与图像设计　　3.使用图片框控件　　图片框(PictureBox)控件可以用来显示图片，作为其他控件的容器，显示图形方法输出的图形或Print方法输出的文本。　　图片框控件的主要作用是为用户显示图片，实际显示的图片由Picture属性决定。Picture属性包括了被显示图片的文件名及可选的路径名。项目九　图形与图像设计　　要在运行时显示或替换图片，可利用函数LoadPicture来设置Picture属性。　　图片框控件具有AutoSize属性，当该属性设置为True时，图片框控件能自动调整自身的大小与显示的图片匹配。如果要用AutoSize属性设置为True的图片框控件，设计窗体时就需要特别小心：图片将不考虑窗体上的其他控件而调整大小，这可能导致意想不到的后果，如覆盖其他控件等。设计时应通过加载每一幅图片来检查是否有这种现象发生。项目九　图形与图像设计　　【课堂演练】　　【实例9-9】设计用来浏览图形文件的图片浏览器，如图9.14所示。图9.14图片浏览器项目九　图形与图像设计　　【实现步骤】　　(1)建立应用程序用户界面，并设置对象属性。　　在窗体中增加文件系统控件：一个驱动器列表框Drive1，一个目录列表框Dir1，一个文件列表框File1，再增加一个图片框Picture1，如图9.14所示。　　修改File1的Pattern属性为：“*.ico;*.bmp”。项目九　图形与图像设计　　(2)编写程序代码。　　编写目录列表框Dir1的Change事件代码：　　PrivateSubDir1_Change()　　File1.Path=Dir1.Path　　EndSub项目九　图形与图像设计　　编写驱动器列表框Drive1的Change事件代码：　　PrivateSubDrive1_Change()　　Dir1.Path=Drive1.Drive　　EndSub项目九　图形与图像设计　　编写文件列表框File1的Change事件代码：　　PrivateSubFile1_Click()　　ChDriveDrive1.Drive　　ChDirDir1.Path　　Picture1.Picture=LoadPicture(File1.FileName)　　EndSub