第07章 图形与图像操作.ppt

第7章图形与图像操作 2 本章的目标 掌握图形操作基础 包括坐标系统 图形层概念 掌握绘图的基本属性掌握常用的图形控件掌握常用的图形方法了解图形图像常见应用 3 7 1图形操作基础 7 1 1VB坐标系统简述 在VB中 要构建一个坐标系 需要三个要素 坐标原点 坐标轴的长度和方向 坐标度量单位 在VB中 坐标原点对应容器对象的左上角 用ScaleTop和ScaleLeft两个属性来控制和实现 坐标轴的长度和方向取决于用户的定义 用ScaleHeight和ScaleWidth两个属性来定义 对于坐标度量单位 用ScaleMode属性来控制和实现 在VB中共有7种单位形式 如表7 1所示 ScaleMode属性默认时以twips 缇 为单位 1缇的长度等于1 1440英寸 也等于1 20磅 应当注意的是这些值指示的是图形对象打印尺寸的大小 而在计算机屏幕上的物理距离则根据监视器的大小及分辨率的变化而变化 4 表7 1ScaleMode属性 7 1 2自定义坐标系 方法一 通过窗体或者图片框的4个属性ScaleTop ScaleLeft ScaleWidth以及ScaleHeight来重新定义坐标系 ScaleTop 定义窗体左上角的顶端坐标值 y值 可正可负 ScaleLeft 定义窗体左上角的左端坐标值 x值 可正可负 ScaleWidth 定义窗体的的有效宽度 即x轴的长度 可正可负 ScaleHeight 定义窗体的有效高度 即y轴的长度 可正可负 由此得到窗体右下角的右端坐标x值为ScaleLeft ScaleWidth 窗体右下角的底端坐标y值为ScaleTop ScaleHeight 这时候坐标系的 0 0 不一定在窗体的左上角 5 例7 1已知Picture1 ScaleLeft 200 Picture1 ScaleTop 200 Picture1 ScaleWidth 400 Picture1 ScaleHeight 400 按要求对图片框定义自定义坐标系 并画一条从 0 0 点到 200 200 点的线段 运行效果如图7 1所示 PrivateSubForm Load 自定义Picture1的坐标系Picture1 ScaleLeft 200Picture1 ScaleTop 200Picture1 ScaleWidth 400Picture1 ScaleHeight 400EndSubPrivateSubPicture1 Click Picture1 Line 0 0 200 200 画 0 0 到 200 200 的一条线段EndSub 图7 自定义坐标系示例1 6 方法二 通过Scale方法来自定义坐标系 其语法格式为 对象 Scale xLeft yTop xRight yBottom 其中 对象可以是Form 也可以是Picture xLeft yTop 为窗体的左上角坐标值 xRight yBottom 为窗体的右下角坐标值 此时有以下等式成立 ScaleLeft xLeftScaleTop yTopScaleWidth xRight xLeftScaleHeight yBottom yTop用方法二进行自定义坐标系的时候 当省略Scale方法中的参数时 此时的坐标系为系统默认坐标系 图7 2自定义坐标系示例 例7 2在Form Load事件中通过Scale方法定义窗体Form1的坐标系 运行效果如图7 2 程序代码如下 PrivateSubForm load ClsForm1 AutoRedraw TrueForm1 Scale 200 200 200 200 自定义Form1的坐标系Line 0 0 200 200 EndSub 7 7 1 3图形层概念 表7 2图形层放置的对象 当在一层中有多个对象时 各个对象按先建立的在下 后建立的在上的顺序进行排列 但是用户可以用Zorder方法来调整顺序 ZOrder方法的语法格式 对象 ZOrder Position 说明 1 对象 可以是窗体和除了菜单及时钟之外的任何控件对象 2 Position指出一个控件相对于另一个控件位置的数值 0 表示该控件被定位于Z序列的前面 1 表示该控件被定位于Z序列的后面 在前面的章节中浮雕效果的图案 其实用ZOrder方法也可以方便实现 8 图7 3Zorder示例 例7 3在一个窗体上建立一个Label标签 并将Label的index属性设置为0 其BorderStyle属性为1 运行效果如图7 3 编写如下代码 运行可见Zorder的用法 PrivateSubLabel1 Click IndexAsInteger Label1 Index ZOrder0 使点击的控件数组为最上层Fori 0To4Label1 i BackColor QBColor 7 设置label1的背景颜色NextiLabel1 Index BackColor QBColor 15 设置被点击的label1数组控件的背景颜色EndSubPrivateSubForm Load Label1 0 Caption Label1 0 Fori 1To4LoadLabel1 i 装载控件数组Label1 i Caption Label1 i Label1 i Left Label1 i 1 Left 250 设置控件数组的左边距Label1 i Top Label1 i 1 Top 300 设置控件数组的上边距Label1 i Visible True 设置控件数组可视NextiEndSub 9 7 2绘图属性 7 2 1当前坐标在VB中 可以通过设置窗体或图形框以及打印机的CurrentX和CurrentY属性来设置当前绘图点 CurrentX和CurrentY决定了绘制或显示的起始坐标 注意 在设计模式时 这两个属性是不可用的 当坐标系确定以后 坐标值 x y 表示对象在坐标系中的绝对坐标位置 如果坐标值前加上关键字Step 则坐标值 x y 表示对象在坐标系中的相对坐标位置 即从当前坐标分别平移x y个单位 其绝对坐标值为 CurrentX x CurrentY y 图7 4当前坐标示例 例7 4应用Print方法在图形框内打印50个 运行效果如图7 4所示 PrivateSubPicture1 Click Dimi Fori 1To50Picture1 CurrentX Int Rnd Picture1 Width 设置当前输出位置的横坐标Picture1 CurrentY Int Rnd Picture1 Height 设置当前输出位置的纵坐标Picture1 Print NextiEndSub 10 7 2 2线宽和线型线宽顾名思义就是画线宽度 它指窗体 图形框或打印机画线时线的宽度或点的大小 用DrawWidth属性来设置 DrawWidth属性又以像素为单位来度量 其最小值为1 线型是指所画线的类型 如虚线 实线等 线型用DrawStyle属性来设置 在VB中 DrawStyle属性值取值从0到6 详见表7 3 表7 3DrawStyle属性设置 11 例7 5通过改变DrawStyle属性值在窗体上画出不同的线型 通过改变DrawWidth属性值画一系列宽度递增的直线 运行效果如图7 5 程序代码如下 PrivateSubForm Click DimjAsIntegerCurrentX 0 设置开始位置CurrentY ScaleHeight 4DrawWidth 1 定义线的宽度为1Forj 0To6DrawStyle j 定义线的形状Line Step ScaleWidth 7 0 画线NextjCurrentX 0 设置开始位置CurrentY ScaleHeight 3 4Forj 1To6DrawWidth j 3 定义线的宽度Line Step ScaleWidth 7 0 画线NextjEndSub 图7 线型和线宽示例 12 7 2 3填充和色彩表示 封闭图形有填充方式和填充色彩两个属性 分别用FillStyle和FillColor两属性来决定 图7 6FillStyle属性指定填充的图案 FillStyle属性是指填充的图案 共有7种内部图案 如图7 6所示 FillColor属性是指填充图案的颜色 色彩是指对象的颜色 通常颜色用颜色函数来表示 在VB中颜色函数有两个 分别为RGB 和QBColor 1 RGB 函数RGB 函数语法为 RGB Red Green Blue Red Green Blue三个参数代表三基色成分 分别用0 255间的整数表示 三种色彩参数不同的搭配 就产生了丰富多采的现实世界 从理论上来说 用三基色混合可以产生256 3种颜色 但在实际使用时却受到显示硬件的限制 显示不出那么多种颜色 普通VGA显示卡只能显示16种颜色 13 2 QBColor 函数QBColor 函数语法格式为 QBColor 颜色码 颜色码使用0 15之间的整数 每个颜色码代表一种颜色 RGB 函数与QBColor 函数实际上都返回一个六位制的长整数 因而也可以直接用六位的十六进制颜色代码表示 在颜色的属性设置框中可以看到这些代码 例如 H000000 表示黑色 H0000FF 表示红色 H00FF00 表示绿色 在程序设计中 前景色的设置可通过ForeColor 前景色属性 来实现 并可以返回或设置对象的前景色 对背景色的设置通过BackColor属性来实现 并返回或设置对象的背景色 14 例7 6建立如图7 7所示的对象和控件 编写如下代码 PrivateSubTimer1 Timer IfHScroll1 Value 255ThenHScroll1 Value HScroll1 Value 1IfHScroll2 Value 253ThenHScroll2 Value HScroll2 Value 2IfHScroll3 Value 253ThenHScroll3 Value HScroll3 Value 3EndIfEndIfEndIfLabel6 HScroll1 ValueLabel7 HScroll2 ValueLabel8 HScroll3 ValueLabel1 ForeColor RGB HScroll1 Value HScroll2 Value HScroll3 Value 对Label1的前景色进行赋值EndSub 图7 7颜色函数示例 15 7 3图形方法 7 3 1Line 线段或者矩形的绘制方法 要在指定对象 如窗体 图形框 中绘制线段或者矩形 其语法格式如下 对象名 Line Step X1 Y1 Step X2 Y2 Color B F 如果所画图形是线段 X1 Y1 是线段的起点 X2 Y2 是线段的终点 如果所画为矩形 两点分别表示为矩形对角线上的两个端点 当所画图形为矩形时 X1 Y1 是矩形的左上角点坐标 X2 Y2 是矩形右下角点坐标 并且参数B不可以省略 带上参数F时表示用画矩形的颜色来填充矩形 F必须与关键字B一起使用 如果只用B不用F 则矩形的填充由FillColor和FillStyle属性决定 16 例7 7绘制线段 下面代码实现一条线段的绘制 运行效果如图7 8 PrivateSubForm Click Line 500 500 2000 2000 EndSub 图7 9矩形绘制 例7 8绘制矩形 将例7 9代码做以下修改即可绘制一个矩形 运行效果如图7 9 PrivateSubForm Click Line 500 500 2000 2000 BEndSub 图7 8直线绘制 17 7 3 2Pset 点的绘制方法 Pset是指在指定对象 如窗体 图形框 中的指定位置处绘制点 还可以为点指定颜色 语法格式如下 对象名 Pset Step X Y Color X Y分别为点的水平和垂直坐标 Color为点的颜色 是可选项 例7 8用Pset方法绘制正弦函数曲线 变量值从 2 到2 运行效果如图7 10所示 PrivateSubForm Click Line 9 0 9 0 画横轴CurrentX 9 CurrentY 0 2 确定当前绘制坐标点Print X 标识X轴Line 0 1 2 0 1 2 画纵轴CurrentX 0 5 CurrentY 1 1Print Y Fori 8To8 标横轴刻度Line i 0 i 0 1 CurrentX i 0 3 CurrentY 0 25PrintiNexti 18 Fori 1To1 标纵轴刻度Ifi0ThenLine 0 i 0 5 i CurrentX 0 8 CurrentY i 0 05PrintiEndIfNextiFori 7To7Step0 001PSet i Sin i 画点NextiEndSubPrivateSubForm Load Form1 Scale 10 1 5 10 1 5 自定义坐标系EndSub 图7 Pset方法示例效果图 19 7 3 3Circle 圆 椭圆 圆弧和扇形的绘制法 用于以绘制圆 椭圆 圆弧和扇形的语法格式如下 对象名 Circle Step X Y 半径 颜色 起始角 终止角 长短轴比率 其中 X Y 是圆 椭圆或弧及扇形的圆心坐标 Step表示采用当前坐标位置的相对值 圆弧和扇形通过参数对起始角 终止角进行控制 当起始角 终止角取值在0 2 时为圆弧 当在起始角 终止角取值前加一负号 画出扇形 负号表示画圆心到圆弧的径向线 椭圆通过长短轴比率控制 默认值为1时 画的是圆 例7 9Circle方法的应用 运行效果如图7 11所示 PrivateSubForm Load Picture1 Scale 0 0 2200 1000 自定义坐标系EndSubPrivateSubCommand1 Click 画园Picture1 FillStyle 0Picture1 FillColor QBColor Int Rnd 15 Picture1 Circle Int Rnd Picture1 ScaleWidth Int Rnd Picture1 ScaleHeight 100EndSub 20 图7 9Circle方法的应用 PrivateSubCommand2 Click 画椭圆Picture1 ClsPicture1 FillStyle 0Picture1 FillColor QBColor Int Rnd 15 a 3Picture1 Circle 100 500 200 aPicture1 Circle 400 500 200 a 2Picture1 Circle 900 500 200 a 3Picture1 Circle 1400 500 200 a 4Picture1 Circle 1900 500 200 a 5EndSubPrivateSubCommand3 Click 画弧Picture1 Clspi 3 14159266Picture1 Circle 400 300 200 pi 2 1 5 piPicture1 Circle 1000 300 200 pi 2 0Picture1 Circle 1600 300 200 0 0 5 piPicture1 Circle 400 600 200 pi 2 1 5 piPicture1 Circle 1000 600 200 pi 0 2 1 7 piPicture1 Circle 1600 600 200 1 2 pi 0 7 piEndSubPrivateSubCommand4 Click 画扇形Picture1 Clspi 3 14159266Picture1 FillColor RGB 0 255 255 Picture1 FillStyle 0Picture1 Circle 1100 700 700 0 1 pi 0 9 piEndSub 21 7 3 4Point 采集指定点的颜色值 Point方法用于返回窗体或者图形框上指定点的颜色值 语法格式如下 对象 Point x y 当 x y 所指的点在对象外面时 Point方法返回 1 例7 10用Point方法做一个字体仿真 运行效果如图7 12所示 图7 10用Point方法进行字体仿真 PrivateSubCommand1 Click DimiAsInteger jAsInteger colorAsLongFori 1To100 按行扫描Forj 1To100 按列扫描mcolor Picture1 Point i j 取Picture1点的颜色值Ifmcolor FalseThenPicture2 PSet i j mcolor 在对象区域则照画当前点NextjNextiEndSubPrivateSubForm Load Picture1 Scale 0 0 100 100 自定义坐标系Picture2 Scale 0 0 100 100 自定义坐标系Picture1 Print VISUALBASIC6 0 EndSub 22 例7 12利用LoadPicture函数和图片框装载和卸载图像 运行效果如图7 15所示 PrivateSubCommand1 Click Picture1 Picture LoadPicture d Waterlilies jpg 注意图片的路径EndSubPrivateSubCommand2 Click Picture1 Picture LoadPicture 卸载图片EndSub 需要注意的是 当PictureBox控件的Autosize属性设置为True时 图形框就能自动调整大小 并与所要显示的图象尺寸大小相匹配 当Autosize属性设置为False时 加载到图形框中的图形保持其原始尺寸 这意味着如果图形的尺寸比控件大 则超过的部分将被剪裁掉 23 7 4图形图像常用控件 7 4 1直接加载图片到窗体 窗体对象是一个容器对象 即它可以容纳其他对象 当然图片对象也不例外 用户可以直接在窗体中加载图片 这时候的窗体就象一个房子 而所加载的图片就是房子的壁纸 窗体的图片加载有两种方式 一 直接在选择窗体的Picture属性 然后选择所要加载的图片即可 二 应用LoadPicture 函数来实现 窗体的图片加载和PictureBox图片的加载方法相同 7 4 2PictureBox 图形框控件 图形框控件 PictureBox 可以用来显示位图 JPGE GIF 图标等格式的图片 在工具箱面板中 图形框控件的图标如图7 13所示 图片框的图片加载有两种方式 一 直接选择图片框的Picture属性 然后选择所要加载的图片即可 二 应用Loadpicture 函数来实现 24 表7 4PictureBox控件的常用属性和方法 25 例7 11编写如下代码 可见如图7 14所示的效果图 图7 12在图片框中画图形和输出文字 PrivateSubForm Load Picture1 ScaleHeigh 100Picture1 ScaleWidth 100Picture1 AutoRedraw TruePicture1 ForeColor 0Picture1 FillColor QBColor 15 Picture1 FillStyle 0Picture1 Circle 50 50 30Picture1 CurrentX 15Picture1 CurrentY 50Picture1 FontSize 16Picture1 FontBold TruePicture1 FontName 隶书 Picture1 FontUnderline TruePicture1 Print 在图片中输出文字 Picture1 AutoRedraw FalseEndSub 26 7 4 3Image 图像框控件 Image控件是用来显示图形的 Image控件可以显示来自位图 图标或原文件的图形 也可以显示增强的元文件 JPEG或GIF文件 和Picture控件相比 Image控件使用较少的系统资源 所以重画起来比PictureBox控件要快 但是它只支持PictureBox控件的一部分属性 事件和方法 Image控件用Stretch属性来确定是否缩放图形来适应控件大小 反之亦然 虽然可以把Image控件放在容器里 但是Image控件不能作为容器 1 Image控件的常用属性 1 BorderStyle属性BorderStyle属性 返回或设置对象的边框样式BorderStyle属性语法 对象 BorderStyle Value Value为整数或常数 用于决定边框样式 当Value的设置值等于零时 为无边框 当Va1ue的设置值等于1时 为固定单边框 2 Picture属性Picture属性 返回或设置控件中要显示的图片 3 Stretch属性Stretch属性 返回或设置一个值 该值用来指定一个图形是否要调整大小 以适应与Image控件的大小 Stretch属性的语法 对象 Stretch Boolean 27 2 图像框与图形框控件的区别 1 能否存放控件 图形框是 容器 控件 可以作为父控件 而图像框不能作为父控件 其他控件不能作为图像框的子控件 图形框作为一个 容器 可以把其他控件放在其内作为它的 子控件 当图形发生位移 其内的子控件也会跟着一起移动 2 图形框支持Print方法显示文本 而图像框不能 3 占的内存不同 图像框比图形框占用内存少 显示速度更快一些 因此在图形框与图像框都能满足设计需要时 应该优先考虑使用图像框 28 7 4 4Shape 形状控件 Shape控件是VB自带的可以绘制不同形状图形的控件 它可以画矩形 正方形 椭圆 圆 圆角矩形及圆角正方形 通过Shape控件的Shape属性来实现 详见表7 5 以下是它的两个重要属性 1 填充属性 FillStyle属性 FillStyle属性的取值为0 7 具体情况见图7 16 2 形状属性 Shape属性 见表7 5 表7 5Shape控件的Shape属性 29 例7 13Shape控件的Shape属性值变化示例 运行效果如图7 16 PrivateSubForm Click Shape1 0 Shape 0Shape1 0 FillStyle 2Fori 1To5LoadShape1 i Shape1 i Left Shape1 i 1 Left 700Shape1 i Shape iShape1 i Visible TrueNextiEndSub 图7 Shape控件的shape属性结果展示 30 7 5常见应用 7 5 1图形的绘制VB可以绘制各种各样的精彩图形 通过前面所介绍的图形图像的操作 用户可以灵活地应用各种控件对象的属性及方法等进行各种图形的绘制 例7 14李萨茹图形制作 运行效果如图7 17所示 代码如下 图7 15李萨茹图形制作 PrivateSubCommand1 Click PI 3 1415926a Text1 Textb Text2 Textw Picture1 ScaleWidthh Picture1 ScaleHeightPicture1 Scale w 2 h 2 w 2 h 2 Picture1 Clsgra 0k 200Forth 0To2 PI 0 01StepPI kx 0 4 w Sin a th y 0 4 h Sin b th Picture1 Line x y RGB 0 255 0 画图NextthEndSubPrivateSubCommand2 Click EndEndSub 31 7 5 2简单动画制作 例7 15钟表的时针 分针和秒针的走针动画 运行效果如图7 17所示 代码如下 ConstPI 3 14159265Dimr1 r2 r3 x0 y0PrivateSubForm Load x0 Shape1 Left Shape1 Width 2y0 Shape1 Top Shape1 Height 2Line1 X1 x0Line1 Y1 y0Line2 X1 x0Line2 Y1 y0Line3 X1 x0Line3 Y1 y0Line1 Visible FalseLine2 Visible FalseLine3 Visible Falser1 Shape1 Height 0 45r2 r1 0 7r3 r1 0 5Timer1 TimerEndSub 图7 16钟表动画 PrivateSubTimer1 Timer Line1 Visible TrueLine2 Visible TrueLine3 Visible Truet Time s Val Second t m Val Minute t h Val Hour t j1 s PI 30 PI 2Line1 X2 x0 r1 Cos j1 Line1 Y2 y0 r1 Sin j1 j2 m PI 30 PI 2Line2 X2 x0 r2 Cos j2 Line2 Y2 y0 r2 Sin j2 j3 h PI 6 PI 2Line3 X2 x0 r3 Cos j3 Line3 Y2 y0 r3 Sin j3 EndSubPrivateSubCommand1 Click EndEndSub 32 7 5 3图形漫游技术 例7 16在窗体内显示一幅图片 移动滚动条实现图形漫游 运行效果如图7 19 PrivateSubForm Activate Picture1 ScaleMode 3PictureClip1 ClipWidth Picture1 Width Screen TwipsPerPixelXPictureClip1 ClipHeight Picture1 Height Screen TwipsPerPixelYHScroll1 Max PictureClip1 Width Picture1 Width Screen TwipsPerPixelXVScroll1 Max PictureClip1 Height Picture1 Height Screen TwipsPerPixelYEndSubPrivateSubHScroll1 Change PictureClip1 ClipX HScroll1 ValuePicture1 Picture PictureClip1 ClipEndSubPrivateSubHScroll1 Scroll PictureClip1 ClipX HScroll1 Value 图8 17图形漫游 Picture1 Picture PictureClip1 ClipEndSubPrivateSubVScroll1 Change PictureClip1 ClipY VScroll1 ValuePicture1 Picture PictureClip1 ClipEndSubPrivateSubVScroll1 Scroll PictureClip1 ClipY VScroll1 ValuePicture1 Picture PictureClip1 ClipEndSub 33 7 5 4PaintPicture方法 SavePicture方法和DrawMode属性使用 1 PaintPicture方法PaintPicture方法用于对图象处理 可以实现将一个窗体或图形框中的图形对象复制到向另一个窗体或图形框中 在复制的过程中还可以实现图形对象的翻转 放大和缩小等操作 其语法结构如下 dpic PaintPicturespic dx dy dw dh sx sy sw sh rop对PaintPicture方法的说明 1 方法中以字母d开头的是目标 destination 或者目标的相关属性 以s开头的是源对象 source 或者源对象的相关属性 dpic和spic分别代表图形图象的传送目标对象和传送源对象 可以是窗体 图形框或者打印机对象 2 dx dy和sx sy分别代表传送目标对象和传送源对象的水平和垂直坐标 3 dw dh和sw sh分别代表传送目标对象和传送源对象的宽和高 4 rop指定传送的像素与目标中现有的像素组合模式 34 例7 18使用PaintPicture方法实现图片的复制 翻转 放大和缩小功能 运行效果如图7 20 DimswAsSingle shAsSingle 设sw sh为图本来的宽和高PrivateSubCommand1 Click 复制Picture2 ClsPicture2 PaintPicturePicture1 0 0EndSubPrivateSubCommand2 Click 垂直翻转Picture2 ClsPicture2 PaintPicturePicture1 0 0 sw sw 0 sh sw sh vbSrcCopy 图7 18图形图像操作