第八章-图形操作与多媒体教学内容

第八章-图形操作与多媒体教学内容第一页，共58页。项目十图形化时钟项目

第一页第二页，共58页。一、项目功能利用图像控件，画一个简单而实用的时钟第二页第三页，共58页。掌握Line控件的使用熟悉计时器控件的使用能力目标理解VB中坐标系的概念Line控件的使用计时器控件的使用

知识目标VB中坐标系的概念二、知识、能力和素质目标第三页第四页，共58页。三、任务划分任务一任务二任务三设计项目的界面设置控件属性编写事件代码第四页第五页，共58页。任务一设计项目的界面本项目用到1个line、1个计时器，其大小、位置如下图所示：第五页第六页，共58页。任务二设置控件属性设置窗体、计时器的属性：1、计时器的interval设置为：0，Enable设置为：true。2、line控件主要用其方法实现画线条。3、其它略。第六页第七页，共58页。任务三编写代码分别编写窗体、计时器代码：1、窗体的事件：Load,ResizePrivateSubForm_Load()Timer1.Interval=100Width=4000Height=4000Left=Screen.Width\2-2000Top=(Screen.Height-Height)\2EndSub

（1）窗体的Load事件代码：第七页第八页，共58页。PrivateSubForm_Resize()Dimi,AngleStaticflagAsBooleanIfflag=FalseThenflag=TrueFori=0To14'画出表盘12个点和时、分、秒共15个LINEIfi>0ThenLoadLine1(i)Line1(i).Visible=TrueLine1(i).BorderWidth=5Line1(i).BorderColor=RGB(0,128,0)'设置LINE的粗细和颜色NextiEndIfFori=0To14Scale(-1,1)-(1,-1)Angle=i*2*Atn(1)/3Line1(i).X1=0.9*Cos(Angle)Line1(i).Y1=0.9*Sin(Angle)Line1(i).X2=Cos(Angle)Line1(i).Y2=Sin(Angle)NextiEndSub（2）窗体的Resize事件代码：第八页第九页，共58页。2、计时器的事件：TimerPrivateSubtimer1_Timer()ConstHH=0,MH=13,SH=14DimAngleStaticLSIfSecond(Now)=LSThenExitSubLS=Second(Now)Angle=0.5236*(15-(Hour(Now)+Minute(Now)/60))'设置时针Line1(HH).X1=0Line1(HH).Y1=0Line1(HH).X2=0.3*Cos(Angle)Line1(HH).Y2=0.3*Sin(Angle)Angle=0.1047*(75-(Minute(Now)+Second(Now)/60))'设置分针Line1(MH).X1=0Line1(MH).Y1=0Line1(MH).X2=0.7*Cos(Angle)Line1(MH).Y2=0.7*Sin(Angle)Angle=0.5236*(75-Second(Now))'设置秒针Line1(SH).X1=0Line1(SH).Y1=0Line1(SH).X2=0.8*Cos(Angle)Line1(SH).Y2=0.8*Sin(Angle)Form1.Caption=Str(Now())'窗口显示精确的日期和数字化的时间EndSub第九页第十页，共58页。项目十一MP3播放器项目第十页第十一页，共58页。一、项目功能通过对窗体事件的响应，制作简单的打字游戏。要求随机产生ASCII码为33到126之间的字符，其中包括数字、大小写英文字母和其他字符。第十一页第十二页，共58页。掌握文件操作方法掌握通用对话框的使用

能力目标掌握多媒体控件的常用属性和事件文件操作方法通用对话框的使用

知识目标多媒体控件的常用属性和事件二、知识、能力和素质目标第十二页第十三页，共58页。三、任务划分任务一任务二任务三设计项目的界面设置控件属性编写事件代码第十三页第十四页，共58页。任务一设计项目的界面本项目用到3个标签、1个图片框、5个按钮和1个通用对话框，其大小、位置如下图所示第十四页第十五页，共58页。任务二设置控件属性设置窗体和按钮、标签的属性：1、label1用于提示播放的时间，其Caption为：“播放时间：”。2、label2用于显示播放的时间，其Caption为：“”。3、label3用于显示播放的曲目。4、图片框的name属性为：Mp3Play14、其它控件的属性（略）第十五页第十六页，共58页。任务三编写代码分别编写按钮和图片框的代码：1、图片框的事件：ActFramePrivateSubMp3Play1_ActFrame(ByValActFrameAsLong)Label2.Caption=(ActFrame*Mp3Play1.MsPerFrame)\1000EndSub第十六页第十七页，共58页。2、按钮的事件：ClickPrivateSubcmdPlay_Click()Mp3Play1.PlayEndSubPrivateSubcmdPause_Click()Mp3Play1.PauseEndSubPrivateSubcmdClose_Click()Mp3Play1.CloseEndSubPrivateSubcmdOpen_Click()CommonDialog1.ShowOpenr=Mp3Play1.Open(CommonDialog1.,"")Label3.Caption="正在播放歌曲："&CommonDialog1.EndSubPrivateSubcmdStop_Click()Mp3Play1.StopEndSub第十七页第十八页，共58页。8.1图形控件与操作8.1.1图片框控件和图像框控件（1）图片框控件图片框（Picture）控件是一个完整的图形控件。不仅可用于显示多种格式的图片，也能支持VB中的各种绘图方法和Print方法，而且还能作为一个容器用于放置其他控件。支持的图形文件格式有：位图文件（.bmp、.dib、.cur）、图标文件（.ico）、图元文件（.wmf）、增强型图元文件（.emf）、JPEG图形（.emf）或GIF图形（.gif）等。JPEG(JointPhotographicExpertGroup)是静止图形压缩算法的国际标准，采用有损压缩技术，压缩比可选择，支持灰度和真彩色图像。GIF(GraphicInterchangeFormat)，采用无损压缩技术。其特点是：只要用一半的显示时间即可大致看出图片的全貌，但最多支持256种颜色。四、相关知识点第十八页第十九页，共58页。常用属性：Picture属性与窗体的Picture属性大致相同，用于指定图片框中要加载的图片。默认的属性值为NoThing（未加载图形文件）。设计时可以修改其属性值，还可用剪贴板将图片复制粘贴到图片框中。在程序中也可以修改或删除图片框中的图片。例如：Picture1.Picture=NoThing‘删除图片框中的图片Picture1.Picture=“”‘删除图片框中的图片Picture1.Picture=Picture2.Picture‘修改图片框中的图片用LoadPicture函数加载一新图片或删除图片框中的图片例如：‘在图片框中加载新图片Picture1.Picture=LoadPicture(“c:\PHONE.gif”)‘不带参数时表示删除图片框中的图片Picture1.Picture=LoadPicture（）第十九页第二十页，共58页。用SavePicture函数将加载到图片框中的图片及用绘图方法绘制的图形保存到一指定的文件中例如：SavePicturePicture1.Picture，"D:\Temp\Tmp.Bmp"Picture属性AutoSize属性用于选择是否自动调整图片框控件的大小以适应所加载的图片。默认的属性值为False（即图片框保持原始尺寸）。如果图片比图片框大，那么超出的部分不能显示出来，由于图片框不支持滚动条，未显示的部分用户将无法看到。利用滚动条控件的编程技术可以解决这一问题，在后面的编程实例中将看到这一点。注意：若加载的是图元文件（.wmf），那么图形会自动调整大小来适应图片框的大小，若加载的是其他类型的文件，那么图形不会调整大小。第二十页第二十一页，共58页。Align属性用于选择图片框的对齐方式，可以使图片框依附在窗体上下左右任一边上，就像工具栏一样。还可使图片框的大小随窗体的大小的改变而改变。默认值为0－None(自定义大小及位置)。可供选择的值还有：1－AlignTop（显示在窗体顶部）2－AlignBottom（显示在窗体底部）3－AlignLeft（显示在窗体左边缘）4－AlignRight（显示在窗全右边缘）显示在窗体的顶部或底部时，图片框的宽度为窗体的ScaleWidth属性值，高度可自定义；显示在窗体的左、右边缘时，图片框的高度等于窗体的ScaleWidth属性值，宽度可自定义。第二十一页第二十二页，共58页。（2）图像框控件图像框（Image）控件是一个简化的图形控件。与图片框控件一样，可用于显示多种格式的图形文件，但不支持VB中的各种绘图方法和Print方法，也不能作为一个容器来放置其他控件。加载图片时，与图片框不同的是，默认时系统能自动调整图像框或图片的大小，使它们的大小总能保持一致。常用属性：Picture属性与图片框控件的Picture属性一样，用于指定图像框中要加载的图片。加载、删除或修改图片的方法也与图片框中所用的方法相同。第二十二页第二十三页，共58页。Strecth属性用于选择是否将加载的图片缩放到控件本身的大小。默认值为False(加载图片后，图片不缩放)。这时系统将自动调整控件的大小，以适应所显示的图片。若将Strech属性值改为true(加载图片后，缩放图片)。这时控件的大小不变。Appearance属性、BorderStyle属性用于选择控件的立体与边框外观。Appearance属性的默认值为0（平面外观），若改为1则为立体外观。BorderStyle属性的默认值为0（无边框），若改为1则为单线固定边框。

可利用Image控件来代表一个按钮，用其外观代表按钮的状态。在Image控件的MouseDown事件中通过修改属性，将外观设置为“立体单线”表示按钮按下；在MouseUp事件中将外观设置为“平面单线”表示按抬起。第二十三页第二十四页，共58页。返回目录例题1第二十四页第二十五页，共58页。返回目录例8.1利用滚动条控件控制图片框中的超大图片的显示。由于图片框控件Picture和图像框控件Image都没有滚动条属性，不支持滚动条。因此，要用滚动条来控件图片的显示，就要自己编程实现。(1)界面设计与属性设置在窗体上放置Picture1控件、HScroll1控件、VScroll1控件，并在Picture1控件中放置Image1控件，通过Image1控件的属性窗口中的Picture属性加载一张超大图片。第二十五页第二十六页，共58页。图形演示1第二十六页第二十七页，共58页。8.1.2坐标系统与颜色（1）坐标系统为了确定控件、图形或文字在容器（窗体或图片框）中的位置或大小，必须了解容器的坐标系统。任何容器都有一个默认的坐标系统，如图所示：以容器的左上角为原点（0,0），X轴方向向右为正，Y轴方向向下为正，坐标单位（刻度）为缇（Twip）。容器的坐标系统的原点、方向和坐标单位可以通过修改刻度属性或使用Scale方法来改变，但一般使用默认的坐标系统。对象的内部高度第二十七页第二十八页，共58页。ScaleMode属性可通过设置容器的ScaleMode属性值来修改容器中的刻度。例如：frmDisplay.ScaleMode=6

‘将窗体的刻度设置为毫米picDisplay.ScaleMode=VbPixels

‘将图片框的刻度设置为像素重新设置ScaleMode属性后，ScaleWidth和ScaleHeight属性值将自动重新定义，使之与新的刻度保持一致，而ScaleTop和ScaleLeft属性将自动设为0。

第二十八页第二十九页，共58页。返回目录第二十九页第三十页，共58页。返回目录ScaleLeft和ScaleTop属性用于定义容器的左上角的坐标。例如：ScaleLeft=200ScaleTop=200‘将当前窗体的左上角坐标定义为(200,200)ScaleWidth和ScaleHeight属性对象的内部宽度和高度CurrentX和CurrentY属性用于设置或返回容器当前的坐标值。第三十页第三十一页，共58页。例如：PrivateSubPicture1_MouseDown(ButtonAsInteger,ShiftAsInteger,XAsSingle,YAsSingle)Picture1.CurrentX=XPicture1.CurrentY=YPicture1.PrintStr(Int(Picture1.CurrentX))&","&Str(Int(Picture1.CurrentY))EndSub当用户在Picture1中按下鼠标时，将鼠标按下的位置设为当前位置，并在当前位置输出当前坐标。第三十一页第三十二页，共58页。Scale方法用于改变坐标系。Scale方法的语法为：[对象名.]Scale[(x1,y1)-(x2,y2)]将容器的左上角坐标设为(x1,y1)，右下角坐标设为(x2,y2)。即容器的ScaleTop=x1，ScaleLeft=x2，ScaleWidth=x2-x1，ScaleHeigth=y2-y1。若使用Scale方法时不带参数，表示将容器的坐标系恢复为默认的坐标系。第三十二页第三十三页，共58页。返回目录（2）设置颜色1、RGB函数可用于设置任何颜色。RGB函数的语法为：

RGB(red,green,blue)参数red，green，blue分别表示红，绿，蓝的分量值。三个分量的取值范围都是在0到255之间。例如：Picture1.BackColor=RGB(0,0,255)‘将Picture1的背景色设为蓝色第三十三页第三十四页，共58页。返回目录2、QBColor函数只能用于设置16种颜色中的一种。QBColor函数的语法为：QBColor(color)参数color的取值范围是0到15，分别与一种颜色相对应。例如：Pset(CurrentX,CurrentY)，QBColor(2)

‘在当前位置画一绿色的点第三十四页第三十五页，共58页。第三十五页第三十六页，共58页。3、使用内部颜色常量VB将常用的颜色值定义成内部常量。例如：Form1.ForeColor=vbRedForm1.ForeColor=&HFF&

‘将Form1的前景色设为红色十六进制数第三十六页第三十七页，共58页。例8.2

利用滚动条控件和RGB(red,green,blue)函数控制图片框的背景色。图片框的背景色用RGB函数控制，而RGB函数的三个参数用滚动条的Value属性值控制，由于三个参数的取值范围为0－255，所以应将滚动条的Max属性值改为255，Min属性取默认值为0。为了能在拖运滚动条的滚动框时能够动态地改变颜色，在滚动条的Scroll事件中调用Change事件。第三十七页第三十八页，共58页。返回目录8.1.3线条与形状控件在容器中绘制一些简单的图形时，可以使用线条控件(Line)和形状控件(Shape)。与其它控件不同的是这两个控件没有任何可以触发的事件，只能用于美化界面。（1）线条控件线条控件(Line)只可以用来画直线段。线段的位置、长短、颜色、宽度等，可以用属性来设置。常用属性X1,Y1,X2,Y2属性X1,Y1和X2,Y2为直线段的两个端点的在容器中的坐标值，用来设定线段的位置及长短。BorderWidth属性用来设定直线的宽度。BorderColor属性用来设定直线的颜色。第三十八页第三十九页，共58页。返回目录BorderStyle属性用来设定直线的样式。第三十九页第四十页，共58页。（2）形状控件形状控件(Shape)可用来画矩形、圆形、椭圆、正方形等图形，所画的图形可以用不同的颜色及方式来填充。常用属性Shape属性用来设定图形的形状样式。第四十页第四十一页，共58页。返回目录FillStyle属性用来设定图形内部的填充样式。第四十一页第四十二页，共58页。FillColor属性用来设定图形内部填充的颜色。BackColor属性和BackStyle属性BackStyle属性用来设定形状控件是否透明。BackStyle属性取值可有两种设置：0――透明（默认值）除边框外，不会遮盖其它控件1――不透明形状控件内部除了由FillStyle所指定的部分是由FillColor指定的颜色外，其他部分是由BackColor指定的颜色。Top,Left,Height,Width属性Top,Left用来设定图形的左上角的坐标，Height,Width用来设定图形的高度和宽度。BorderColor属性和BorderColor属性用来设定图形的边框宽度和颜色。第四十二页第四十三页，共58页。例8.3利用形状控件和定时器控件制作简单的动画。界面设计如图8.5所示。在窗体添加一图片框控件Picture1，在Picture1中添加两个形状控件Shape1和Shape2。Shape1为矩形作车头，设置好属性后复制一个矩形作车身。Shape2为圆形作车轮，设置好属性后复制出另一车轮。在窗体中添加一时钟控件Timer1及两个命令按钮Commend1和Commend2。第四十三页第四十四页，共58页。8.1.4Pset、Line和Circle方法使用线条和形状控件可以绘制简单的图形，但使用VB提供的绘图方法可以绘制更加复杂的图形。支持绘图方法的对象为窗体或图片框。常用的绘图方法有：（1）画点(Pset)Pset方法可用于在指定的位置(x,y)，用指定的颜色画点。语法格式为：

[object.]Pset[Step](x,y)[,color][]表示可选项，若省略所有可选项，即Pset(x,y)表示在当前窗体的坐标位置为(x,y)处，以前景色画点。Step表示(x,y)为与当前坐标的的相对位移。例如：CurrentX=100CurrentY=100‘将当前窗体的当前坐标置为100,100PsetStep(50,100)‘在当前窗体的坐标位置为150,200处画点第四十四页第四十五页，共58页。Picture1.Pset(200,200),vbRed

‘在Picture1中画一红色的点。这时(200,200)表示Picture1中的坐标位置。颜色除了可用内部颜色常量外，也可用颜色函数RGB或QBColor。（2）画线或矩形(Line)Line方法可用于画直线或矩形。语法格式为：[object.]Line[[Step](x1,y1)]–[Step](x2,y2),[color],[B][F]参数(x1,y1)为起点坐标，若省略表示以当前坐标为起点。参数(x2,y2)为终点坐标。选项B表示画矩形，若省略为画直线。选项F只有有选项B时才可选，表示用前景色或Line方法中指定的颜色填充矩形。若只有B，不选F，矩形的填充色由绘图区的FillColor属性值和FillStyle属性值决定。第四十五页第四十六页，共58页。例如：Line(0,0)－(ScaleWidth,ScaleHeight)

‘在从坐标(0,0)处到当前窗体的右下角画一直线Picture1.Line－(200,200),,B

‘在Picture1中以当前坐标位置为起点，以坐标位置(200,200)为终点，以前景色画一矩形。Line(100,100)-(1000,1000),RGB(0,255,0),BF

‘以绿色画一矩形并用绿色填充。第四十六页第四十七页，共58页。（3）画圆、椭圆、扇形和弧线(Circle)Circle方法可用于画圆、椭圆、扇形和弧线等。1.画圆语法格式为：[object.]circle[Step](x,y),radius[,color]参数(x,y)为圆心的坐标。radius为圆的半径。color为画圆时的画线颜色，若省略，则表示用前景色画圆。圆的填充色由绘图区的FillColor属性值和FillStyle属性值决定。例如：circle(100,100),50,vbRed

‘在坐标100,100处用红色画半径为50的圆第四十七页第四十八页，共58页。2.画圆弧或扇形语法格式为：[object.]circle[Step](x,y),radius[,color],start,end参数start和end为圆弧的起点和终点，以弧度为单位，取值范围0到2Л。若取值为负数，表示画扇形。若取值超过2Л或－2Л，程序将会出错。弧度的计算是以圆形的最右边为0，以逆时针方向为正。例如：当窗体大小改变时，在窗体内画圆弧。如图8.6所示。3.画椭圆语法格式为：[object.]circle[Step](x,y),radius[,color],[start],[end],aspect参数aspect为圆的纵横比（垂直半径/水平半径）。若大于1，参数radius为垂直半径，相当于标准的圆被水平压缩；若小于1，参数radius为水平半径，相当于标准的圆被垂直压缩。第四十八页第四十九页，共58页。（4）与绘图有关的方法Cls清除画面语法格式为：[object.]Cls用于清除指定对象上用绘图方法所绘制的图形。注意：用Cls方法不能清除用线条控件Line和形状控件Shape所绘制的图形。Print文字输出语法格式为：[object.]Print[experssion][,|;]用于在当前位置(CurrenX,CurrentY)输出文字。Point取得颜色数据语法格式为：[object.]Point(x,y)用于取得指定坐标位置(x,y)处一点的颜色数据。（5）与绘图方法有关的属性DrawStyle属性与DrawWidth属性用于设定使用绘图方法时所用的划线的样式及线宽。第四十九页第五十页，共58页。FillStyle属性与FillColor属性用于设定使用绘图方法所绘制的封闭区间的填充样式与填充颜色。AutoRedraw属性用于设定由绘图方法所产生的图形是否能自动重绘，默认值为False，即当所绘的图形被遮盖后再重新显露出来时，被遮盖的部分不能自动重绘。当AutoRedraw属性值为False时，用绘图方法所产生的图形只是输出到屏幕上的工作区中，并不记入内存，当窗体被遮盖后再重新显露出来时，被遮盖的这部分图形不会重新显示出来。当AutoRedrass属性值为True时，用绘图方法产生的图形不仅输出到屏幕的工作区中，而且被记入内存，所以当窗体被遮盖后再重新显露出来时，被遮盖的这部分图形可以重新显示出来。例题AutoRedraw第五十页第五十一页，共58页。例8.4

利用绘图方法绘制简单的图形。界面设计及属性设置如图所示。第五十一页第五十二页，共58页。8.2多媒体控件与操作8.2.1VB的多媒体控件介绍要使用VB的多媒体控件，要先动手添加到工具箱中。在“工程”菜单中单击“部