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

第八章图形操作与多媒体 教学内容 8 1图形控件与操作8 2多媒体控件与操作 项目十图形化时钟项目 一 项目功能 利用图像控件 画一个简单而实用的时钟 掌握Line控件的使用 熟悉计时器控件的使用 能力目标 理解VB中坐标系的概念 Line控件的使用 计时器控件的使用 VB中坐标系的概念 二 知识 能力和素质目标 三 任务划分 设计项目的界面 设置控件属性 编写事件代码 任务一设计项目的界面 本项目用到1个line 1个计时器 其大小 位置如下图所示 任务二设置控件属性 设置窗体 计时器的属性 1 计时器的interval设置为 0 Enable设置为 true 2 line控件主要用其方法实现画线条 3 其它略 任务三编写代码 分别编写窗体 计时器代码 1 窗体的事件 Load Resize PrivateSubForm Load Timer1 Interval 100Width 4000Height 4000Left Screen Width 2 2000Top Screen Height Height 2EndSub 1 窗体的Load事件代码 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事件代码 2 计时器的事件 Timer PrivateSubtimer1 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 项目十一MP3播放器项目 一 项目功能 通过对窗体事件的响应 制作简单的打字游戏 要求随机产生ASCII码为33到126之间的字符 其中包括数字 大小写英文字母和其他字符 掌握文件操作方法 掌握通用对话框的使用 能力目标 掌握多媒体控件的常用属性和事件 文件操作方法 通用对话框的使用 多媒体控件的常用属性和事件 二 知识 能力和素质目标 三 任务划分 设计项目的界面 设置控件属性 编写事件代码 任务一设计项目的界面 本项目用到3个标签 1个图片框 5个按钮和1个通用对话框 其大小 位置如下图所示 任务二设置控件属性 设置窗体和按钮 标签的属性 1 label1用于提示播放的时间 其Caption为 播放时间 2 label2用于显示播放的时间 其Caption为 3 label3用于显示播放的曲目 4 图片框的name属性为 Mp3Play14 其它控件的属性 略 任务三编写代码 分别编写按钮和图片框的代码 1 图片框的事件 ActFrame PrivateSubMp3Play1 ActFrame ByValActFrameAsLong Label2 Caption ActFrame Mp3Play1 MsPerFrame 1000EndSub 2 按钮的事件 Click PrivateSubcmdPlay Click Mp3Play1 PlayEndSubPrivateSubcmdPause Click Mp3Play1 PauseEndSubPrivateSubcmdClose Click Mp3Play1 CloseEndSubPrivateSubcmdOpen Click CommonDialog1 ShowOpenr Mp3Play1 Open CommonDialog1 FileName Label3 Caption 正在播放歌曲 CommonDialog1 FileNameEndSubPrivateSubcmdStop Click Mp3Play1 StopEndSub 8 1图形控件与操作8 1 1图片框控件和图像框控件 1 图片框控件图片框 Picture 控件是一个完整的图形控件 不仅可用于显示多种格式的图片 也能支持VB中的各种绘图方法和Print方法 而且还能作为一个容器用于放置其他控件 支持的图形文件格式有 位图文件 bmp dib cur 图标文件 ico 图元文件 wmf 增强型图元文件 emf JPEG图形 emf 或GIF图形 gif 等 JPEG JointPhotographicExpertGroup 是静止图形压缩算法的国际标准 采用有损压缩技术 压缩比可选择 支持灰度和真彩色图像 GIF GraphicInterchangeFormat 采用无损压缩技术 其特点是 只要用一半的显示时间即可大致看出图片的全貌 但最多支持256种颜色 四 相关知识点 常用属性 Picture属性与窗体的Picture属性大致相同 用于指定图片框中要加载的图片 默认的属性值为NoThing 未加载图形文件 设计时可以修改其属性值 还可用剪贴板将图片复制粘贴到图片框中 在程序中也可以修改或删除图片框中的图片 例如 Picture1 Picture NoThing 删除图片框中的图片Picture1 Picture 删除图片框中的图片Picture1 Picture Picture2 Picture 修改图片框中的图片用LoadPicture函数加载一新图片或删除图片框中的图片例如 在图片框中加载新图片Picture1 Picture LoadPicture c PHONE gif 不带参数时表示删除图片框中的图片Picture1 Picture LoadPicture 用SavePicture函数将加载到图片框中的图片及用绘图方法绘制的图形保存到一指定的文件中例如 SavePicturePicture1 Picture D Temp Tmp Bmp Picture属性 AutoSize属性用于选择是否自动调整图片框控件的大小以适应所加载的图片 默认的属性值为False 即图片框保持原始尺寸 如果图片比图片框大 那么超出的部分不能显示出来 由于图片框不支持滚动条 未显示的部分用户将无法看到 利用滚动条控件的编程技术可以解决这一问题 在后面的编程实例中将看到这一点 注意 若加载的是图元文件 wmf 那么图形会自动调整大小来适应图片框的大小 若加载的是其他类型的文件 那么图形不会调整大小 Align属性用于选择图片框的对齐方式 可以使图片框依附在窗体上下左右任一边上 就像工具栏一样 还可使图片框的大小随窗体的大小的改变而改变 默认值为0 None 自定义大小及位置 可供选择的值还有 1 AlignTop 显示在窗体顶部 2 AlignBottom 显示在窗体底部 3 AlignLeft 显示在窗体左边缘 4 AlignRight 显示在窗全右边缘 显示在窗体的顶部或底部时 图片框的宽度为窗体的ScaleWidth属性值 高度可自定义 显示在窗体的左 右边缘时 图片框的高度等于窗体的ScaleWidth属性值 宽度可自定义 2 图像框控件图像框 Image 控件是一个简化的图形控件 与图片框控件一样 可用于显示多种格式的图形文件 但不支持VB中的各种绘图方法和Print方法 也不能作为一个容器来放置其他控件 加载图片时 与图片框不同的是 默认时系统能自动调整图像框或图片的大小 使它们的大小总能保持一致 常用属性 Picture属性与图片框控件的Picture属性一样 用于指定图像框中要加载的图片 加载 删除或修改图片的方法也与图片框中所用的方法相同 Strecth属性用于选择是否将加载的图片缩放到控件本身的大小 默认值为False 加载图片后 图片不缩放 这时系统将自动调整控件的大小 以适应所显示的图片 若将Strech属性值改为true 加载图片后 缩放图片 这时控件的大小不变 Appearance属性 BorderStyle属性用于选择控件的立体与边框外观 Appearance属性的默认值为0 平面外观 若改为1则为立体外观 BorderStyle属性的默认值为0 无边框 若改为1则为单线固定边框 可利用Image控件来代表一个按钮 用其外观代表按钮的状态 在Image控件的MouseDown事件中通过修改属性 将外观设置为 立体单线 表示按钮按下 在MouseUp事件中将外观设置为 平面单线 表示按抬起 返回目录 例题1 返回目录 例8 1利用滚动条控件控制图片框中的超大图片的显示 由于图片框控件Picture和图像框控件Image都没有滚动条属性 不支持滚动条 因此 要用滚动条来控件图片的显示 就要自己编程实现 1 界面设计与属性设置 在窗体上放置Picture1控件 HScroll1控件 VScroll1控件 并在Picture1控件中放置Image1控件 通过Image1控件的属性窗口中的Picture属性加载一张超大图片 图形演示1 8 1 2坐标系统与颜色 1 坐标系统为了确定控件 图形或文字在容器 窗体或图片框 中的位置或大小 必须了解容器的坐标系统 任何容器都有一个默认的坐标系统 如图所示 以容器的左上角为原点 0 0 X轴方向向右为正 Y轴方向向下为正 坐标单位 刻度 为缇 Twip 容器的坐标系统的原点 方向和坐标单位可以通过修改刻度属性或使用Scale方法来改变 但一般使用默认的坐标系统 对象的内部高度 ScaleMode属性可通过设置容器的ScaleMode属性值来修改容器中的刻度 例如 frmDisplay ScaleMode 6 将窗体的刻度设置为毫米picDisplay ScaleMode VbPixels 将图片框的刻度设置为像素重新设置ScaleMode属性后 ScaleWidth和ScaleHeight属性值将自动重新定义 使之与新的刻度保持一致 而ScaleTop和ScaleLeft属性将自动设为0 返回目录 返回目录 ScaleLeft和ScaleTop属性用于定义容器的左上角的坐标 例如 ScaleLeft 200ScaleTop 200 将当前窗体的左上角坐标定义为 200 200 ScaleWidth和ScaleHeight属性对象的内部宽度和高度CurrentX和CurrentY属性用于设置或返回容器当前的坐标值 例如 PrivateSubPicture1 MouseDown ButtonAsInteger ShiftAsInteger XAsSingle YAsSingle Picture1 CurrentX XPicture1 CurrentY YPicture1 PrintStr Int Picture1 CurrentX Str Int Picture1 CurrentY EndSub当用户在Picture1中按下鼠标时 将鼠标按下的位置设为当前位置 并在当前位置输出当前坐标 Scale方法用于改变坐标系 Scale方法的语法为 对象名 Scale x1 y1 x2 y2 将容器的左上角坐标设为 x1 y1 右下角坐标设为 x2 y2 即容器的ScaleTop x1 ScaleLeft x2 ScaleWidth x2 x1 ScaleHeigth y2 y1 若使用Scale方法时不带参数 表示将容器的坐标系恢复为默认的坐标系 返回目录 2 设置颜色1 RGB函数可用于设置任何颜色 RGB函数的语法为 RGB red green blue 参数red green blue分别表示红 绿 蓝的分量值 三个分量的取值范围都是在0到255之间 例如 Picture1 BackColor RGB 0 0 255 将Picture1的背景色设为蓝色 返回目录 2 QBColor函数只能用于设置16种颜色中的一种 QBColor函数的语法为 QBColor color 参数color的取值范围是0到15 分别与一种颜色相对应 例如 Pset CurrentX CurrentY QBColor 2 在当前位置画一绿色的点 3 使用内部颜色常量VB将常用的颜色值定义成内部常量 例如 Form1 ForeColor vbRedForm1 ForeColor HFF 将Form1的前景色设为红色 十六进制数 例8 2利用滚动条控件和RGB red green blue 函数控制图片框的背景色 图片框的背景色用RGB函数控制 而RGB函数的三个参数用滚动条的Value属性值控制 由于三个参数的取值范围为0 255 所以应将滚动条的Max属性值改为255 Min属性取默认值为0 为了能在拖运滚动条的滚动框时能够动态地改变颜色 在滚动条的Scroll事件中调用Change事件 返回目录 8 1 3线条与形状控件在容器中绘制一些简单的图形时 可以使用线条控件 Line 和形状控件 Shape 与其它控件不同的是这两个控件没有任何可以触发的事件 只能用于美化界面 1 线条控件线条控件 Line 只可以用来画直线段 线段的位置 长短 颜色 宽度等 可以用属性来设置 常用属性X1 Y1 X2 Y2属性X1 Y1和X2 Y2为直线段的两个端点的在容器中的坐标值 用来设定线段的位置及长短 BorderWidth属性用来设定直线的宽度 BorderColor属性用来设定直线的颜色 返回目录 BorderStyle属性用来设定直线的样式 2 形状控件形状控件 Shape 可用来画矩形 圆形 椭圆 正方形等图形 所画的图形可以用不同的颜色及方式来填充 常用属性Shape属性用来设定图形的形状样式 返回目录 FillStyle属性用来设定图形内部的填充样式 FillColor属性用来设定图形内部填充的颜色 BackColor属性和BackStyle属性BackStyle属性用来设定形状控件是否透明 BackStyle属性取值可有两种设置 0 透明 默认值 除边框外 不会遮盖其它控件1 不透明形状控件内部除了由FillStyle所指定的部分是由FillColor指定的颜色外 其他部分是由BackColor指定的颜色 Top Left Height Width属性Top Left用来设定图形的左上角的坐标 Height Width用来设定图形的高度和宽度 BorderColor属性和BorderColor属性用来设定图形的边框宽度和颜色 例8 3利用形状控件和定时器控件制作简单的动画 界面设计如图8 5所示 在窗体添加一图片框控件Picture1 在Picture1中添加两个形状控件Shape1和Shape2 Shape1为矩形作车头 设置好属性后复制一个矩形作车身 Shape2为圆形作车轮 设置好属性后复制出另一车轮 在窗体中添加一时钟控件Timer1及两个命令按钮Commend1和Commend2 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处画点 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属性值决定 例如 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 以绿色画一矩形并用绿色填充 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的圆 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为水平半径 相当于标准的圆被垂直压缩 4 与绘图有关的方法Cls清除画面语法格式为 object Cls用于清除指定对象上用绘图方法所绘制的图形 注意 用Cls方法不能清除用线条控件Line和形状控件Shape所绘制的图形 Print文字输出语法格式为 object Print experssion 用于在当前位置 CurrenX CurrentY 输出文字 Point取得颜色数据语法格式为 object Point x y 用于取得指定坐标位置 x y 处一点的颜色数据 5 与绘图方法有关的属性DrawStyle属性与DrawWidth属性用于设定使用绘图方法时所用的划线的样式及线宽 FillStyle属性与FillColor属性用于设定使用绘图方法所绘制的封闭区间的填充样式与填充颜色 AutoRedraw属性用于设定由绘图方法所产生的图形是否能自动重绘 默认值为False 即当所绘的图形被遮盖后再重新显露出来时 被遮盖的部分不能自动重绘 当AutoRedraw属性值为False时 用绘图方法所产生的图形只是输出到屏幕上的工作区中 并不记入内存 当窗体被遮盖后再重新显露出来时 被遮盖的这部分图形不会重新显示出来 当AutoRedrass属性值为True时 用绘图方法产生的图形不仅输出到屏幕的工作区中 而且被记入内存 所以当窗体被遮盖后再重新显露出来时 被遮盖的这部分图形可以重新显示出来 例题AutoRedraw 例8 4利用绘图方法绘制简单的图形 界面设计及属性设置如图所示 8 2多媒体控件与操作8 2 1VB的多媒体控件介绍要使用VB的多媒体控件 要先动手添加到工具箱中 在 工程 菜单中单击 部件 或在工具箱上单击右键再单击 部件 选择MicrosoftMultimediaControl6 0 单击 确定 按钮 见图 多媒体控件就添加到工具箱中了 通常称之为MultimediaMCI控件 MCI是MediaControlInterface 媒体控件接口 的缩写 它为多种多媒体设备提供了一个公用接口 实际上 VB多媒体控件控件就是一组按钮 它用来向多媒体设备发出MCI命令 当把多媒体控件添加到窗体上后 工具的外观如图8 14所示 它实际上是由一系列按钮组成 外观和按钮的功能与我们平常使用的录音机相似 它们被分别定义为Previous 最前 Next 最末 Play 播放 Pause 暂停 Back 上一曲 St