《VB图形图像编程》PPT课件.ppt

第5章图形图像编程 本章学习目标 了解 NET框架提供的的图形类库掌握基本图形绘制方法初步了解VisualBasic NET语言处理位图图像功能GDI 坐标系统 颜色 Paint事件等 最后重点介绍五子棋 人物拼图案例 目录 5 1图形图像绘制基础知识5 2绘制基本图形5 3创建画刷填充图形5 4图像处理5 5文字处理5 6五子棋游戏设计5 7人物拼图游戏设计 5 1图形图像绘制基础知识 5 1 1GDI 概述GDI是GraphicsDeviceInterface的缩写 含义是图形设备接口 它的主要任务是负责系统与绘图程序之间的信息交换 处理所有Windows程序的图形输出 GDI 技术是由GDI技术 进化 而来 出于兼容性考虑 WindowsXP仍然支持以前版本的GDI 但是在开发新应用程序的时候 开发人员为了满足图形输出需要应该使用GDI 因为GDI 对以前的Windows版本中GDI进行了优化 并添加了许多新的功能 5 1图形图像绘制基础知识 图5 1展示了GDI 在应用程序与上述设备之间起着重要的中介作用 其中 GDI 为我们 包办 了几乎一切 从把一个简单的字符串 HelloWorld 打印到控制台到绘制直线 矩形甚至是打印一个完整的表单等 5 1图形图像绘制基础知识 在VisualBasic NET中 所有图形图像处理功能都在以下命名空间下 1 System Drawing命名空间提供了对GDI 基本图形功能的访问 主要有Graphics类 Bitmap类 从Brush类继承的类 Font类 Icon类 Image类 Pen类 Color类等 2 System Drawing Drawing2D命名空间VisualBasic NET中没有3D命名空间 这是因为三维 3D 的效果实际上是通过二维 2D 的图案体现的 System Drawing Drawing2D命名空间提供了高级的二维和矢量图形功能 主要有梯度型画刷 Matrix类 用于定义几何变换 和GraphicsPath类等 3 System Drawing Imaging命名空间提供了高级GDI 图像处理功能 4 System Drawing Text命名空间提供了高级GDI 字体和文本排版功能 5 1图形图像绘制基础知识 5 1 2Graphics类要进行图形处理 必须首先创建Graphics对象 然后才能利用它进行各种画图操作 创建Graphics对象的形式有 1 在窗体或控件的Paint事件中直接引用Graphics对象每一个窗体或控件都有一个Paint事件 该事件的参数中包含了当前窗体或控件的Graphics对象 在为窗体或控件创建绘制代码时 一般使用此方法来获取对图形对象的引用 PrivateSubForm1 Paint ByValsenderAsSystem Object ByValeAsSystem Windows Forms PaintEventArgs HandlesMyBase PaintDimgAsGraphics e Graphics EndSub 5 1图形图像绘制基础知识 2 从当前窗体或控件获取对Graphics对象的引用把当前窗体的画刷 字体 颜色作为缺省值获取对Graphics对象的引用 注意这种对象只有在处理当前Windows窗口消息的过程中有效 如果想在已存在的窗体或控件上绘图 可以使用此方法 例如 DimgAsGraphics Me PictureBox1 CreateGraphics 5 1图形图像绘制基础知识 3 从继承自图像的任何对象创建Graphics对象 此方法在需要更改已存在的图像时十分有用 例如 DimbitmapAsNewBitmap C test a1 bmp DimgAsGraphics Graphics FromImage bitmap 在图形编程中 默认的图形度量单位是像素 不过 可以通过修改PageUnit属性来修改图形的度量单位 可以是英寸或是毫米等 实现方法如下 DimgAsGraphics e Graphicsg PageUnit GraphicsUnit Inch 5 1图形图像绘制基础知识 5 1 3颜色GDI 中的许多绘图操作都涉及到颜色 例如 在绘制线条或矩形时都需要指定使用什么颜色 在自然界中 颜色大都由透明度 A 和三基色 R G B 所组成 在GDI 中 颜色封装在Color结构中 5 1图形图像绘制基础知识 Color结构中 除了提供 A R G B 以外 还提供许多系统定义的颜色如Pink 粉颜色 也就说用户可以通过Color结构就可以使用系统定义的颜色 Color结构的基本属性如表1所示 表1颜色的基本属性 5 1图形图像绘制基础知识 在图像处理中一般需要获取或设置像素的颜色值 获取一幅图像的某个像素颜色值的具体步骤如下 1 定义BitmapBitmapmyBitmap newBitmap c MyImages TestImage bmp 2 定义一个颜色变量把在指定位置所取得的像素值存入颜色变量中Colorc newColor c myBitmap GetPixel 10 10 获取此Bitmap中指定像素的颜色 3 将颜色值分解出单色分量值intr g b r c R 红色分量g c G 绿色分量b c B 蓝色分量 5 1图形图像绘制基础知识 5 1 4坐标在实际的绘图中 我们所关注的一般都是指设备坐标系 此坐标系以像素为单位 像素指的是屏幕上的亮点 每个像素都有一个坐标点与之对应 左上角的坐标设为 0 0 向右为正 向下为正 一般情况下以 x y 代表屏幕上某个像素的坐标点 其中水平以X坐标值表示 垂直以Y坐标值表示 例如 在图8 2所示的坐标系统中画一个点 该点的坐标 x y 是 4 3 5 1图形图像绘制基础知识 5 1 5Paint事件在屏幕上进行绘制的操作称为 绘画 窗体和控件都有一个Paint事件 每当需要重新绘制窗体和控件 例如 首次显示窗体或窗体由另一个窗口覆盖 时就会发生该事件 用户所编写的用于显示图形的任何代码通常都包含在Paint事件处理程序中 5 2绘制基本图形 5 2 1创建画笔在GDI 中 可使用画笔 Pen 对象于绘制具有指定宽度和样式的线条 曲线以及勾勒形状轮廓 画笔Pen类的构造函数有四种 使用方法如下 1 创建某一颜色的Pen对象 PublicSubNew ByValcolorAsColor 2 创建某一刷子样式的Pen对象 PublicSubNew ByValbrushAsBrush 3 创建某 刷子样式并具有相应宽度的Pen对象 PublicSubNew ByValbrushAsBrush ByValwidthAsSingle 4 创建某一颜色和相应宽度的Pen对象 PublicSubNew ByValcolorAsColor ByValwidthAsSingle 5 2 2绘制直线 有两种绘制直线的方法 DrawLine 方法和DrawLines 方法 DrawLine 用于绘制一条直线 DrawLines 用于绘制多条直线 常用形式有 格式1 OverloadsPublicSubDrawLine ByValpenAsPen ByValx1AsInteger ByValy1AsInteger ByValx2AsInteger ByValy2AsInteger 其中x1 y1为起点坐标 x2 y2为终点坐标 例如 e Graphics DrawLine blackPen 100 100 200 100 格式2 OverloadsPublicSubDrawLine ByValpenAsPen ByValpt1AsPoint ByValpt2AsPoint 其中Pen对象确定线条的颜色 宽度和样式 Point结构确定起点和终点 5 2 3绘制矩形 使用DrawRectangle 方法可以绘制矩形 常用形式有 格式1 OverloadsPublicSubDrawRectangle ByValpenAsPen ByValrectAsRectangle 其中rect表示要绘制的矩形的Rectangle结构 格式2 OverloadsPublicSubDrawRectangle ByValpenAsPen ByValxAsSingle ByValyAsSingle ByValwidthAsSingle ByValheightAsSingle 其中x y为矩形左上角坐标值 参数width是要绘制矩形的宽度 参数height是要绘制矩形的高度 5 2 4绘制多边形 多边形分为空心多边形和填充多边形 1 绘制空心多边形PublicSubDrawPolygon ByValpenAsPen ByValpointAsPoint 2 绘制填充多边形PublicSubFillPolygon ByValbrushAsBrush ByValpointAsPoint 其中Point数组是由一组Point结构对象定义的多边形 Pen对象指出画线的画笔 注意填充多边形需用画刷而不是画笔 5 2 5绘制曲线 曲线有空心曲线和填充曲线之分 Graphics DrawClosedCurve可以画出一个平滑封闭的曲线 1 绘制空心闭合曲线PublicSubDrawClosedCurve ByValpenAsPen ByValpointsAsPoint 2 绘制填充闭合曲线PublicSubFillClosedCurve ByValpenAsPen ByValpointsAsPoint points表示曲线经过点的数组 其中必须包含至少4个点 5 2 6绘制椭圆和弧线 椭圆是一种特殊的封闭曲线 Graphics类专门提供了绘制椭圆的两种方法 DrawEllipse 方法和FillEllipse 方法 常用形式有 格式1 PublicSubDrawEllipse ByValpenAsPen ByValrectAsRectangle 其中rect为Rectangle结构 用于确定椭圆的边界 格式2 PublicSubDrawEllipse ByValpenAsPen ByValxAsInteger ByValyAsInteger ByValwidthAsInteger ByValheightAsInteger 其中x y为椭圆左上角的坐标 width定义椭圆的边框的宽度 height定义椭圆的边框的高度 格式3 PublicSubFillEllipse ByValbrushAsBrush ByValrectAsRectangle 填充椭圆的内部区域 其中rect为Rectangle结构 用于确定椭圆的边界 5 3创建画刷填充图形 画刷是可与Graphics对象一起使用来创建实心形状和呈现文本的对象 可以用画刷填充各种图形形状 如矩形 椭圆 扇形 多边形和封闭路径等 画刷 Brush 类是一个抽象类 本身不能实例化 一般使用它的派生类 主要有以下几种不同类型的画刷Brush派生类 1 SolidBrush画刷SolidBrush类用来定义单一颜色的Brush 用纯色进行绘制 5 3创建画刷填充图形 2 HatchBrush画刷类似于SolidBrush 但是可以利用该类从大量预设的图案中选择绘制时要使用的图案 而不是纯色 HatchBrush画刷具有三个属性 分别如下 1 HatchStyle属性 获取此HatchBrush对象的阴影样式 2 BackgroundColor属性 获取此HatchBrush对象的背景色 3 ForegroundColor属性 获取此HatchBrush对象的前景色 5 3创建画刷填充图形 3 LinearGradientBrush画刷使用两种颜色渐变混合的进行绘制 LinearGradientBrush类的构造函数有多种格式 最常用的格式如下 PublicSubNew ByValpoint1AsPoint ByValpoint2AsPoint ByValcolor1AsColor ByValcolor2AsColor 该构造函数有四个参数 其中Point1是表示渐变的起始点 Point2是表示渐变的终结点 Color1表示的渐变的起始色 Color2表示的是渐变的终止色 此处的Point1和Point2是Point结构型的变量 Point结构表示一个点 有两个成员x和y 分别表示点的横坐标和纵坐标 5 3创建画刷填充图形 4 TextureBrush画刷使用纹理 如图像 进行绘制 TextureBrush类允许使用一幅图像作为填充的样式 5 4图像处理 5 4 1显示图像可以使用GDI 显示以文件形式存在的图像文件 图像文件可以是BMP JPEG GIF TIFF PNG等 实现步骤为 1 创建一个Bitmap对象 指明要显示的图像文件 创建Bitmap对象 Bitmap类有很多重载的构造函数 其中之一是 PublicSubNew ByValfilenameAsString filename是位图文件的名称 可以利用该构造函数创建Bitmap对象 例如 DimbitmapAsNewBitmap tu1 jpg 2 创建一个Graphics对象 表示要使用的绘图平面 DimgAsGraphics 窗体或图片框控件 CreateGraphics 3 调用Graphics对象的DrawImage方法显示图像 5 4图像处理 5 4 2图像的平移 旋转和缩放Graphics类提供了三种对图像进行几何变换的方法 分别用于图形图像的平移 旋转和缩放 TranslateTransform 方法的形式为 PublicSubTranslateTransform ByValdxAsSingle ByValdyAsSingle 图形平移指定的尺寸 其中 dx表示平移的x分量 dy表示平移的y分量 RotateTransform 方法的形式为 PublicSubRotateTransform ByValangleAsSingle 图形旋转指定角度 其中 angle表示旋转角度 ScaleTransform 方法的形式为 PublicSubScaleTransform ByValsxAsSingle ByValsyAsSingle 图形缩放指定数量 其中 sx表示x方向的缩放比例 sy表示y方向的缩放比例 5 4图像处理 5 4 4彩色图像变换灰度图像彩色图像像素的颜色是由三种基本色颜色 即红 R 绿 G 蓝 B 有机组合而成的 称为三基色 每种基色可取0 255的值 因此由三基色可组合成 256 256 256 1677万种颜色 每种颜色都有其对应的R G B值 1 彩色图像颜色值的获取在使用C 系统处理彩色图像时 使用Bitmap类的GetPixel方法获取图像上指定像素的颜色值 5 4图像处理 2 彩色位图颜色值分解像素颜色值c是一个长整型的数值 占4个字节 最上位字节的值为 0 其它3个下位字节依次为B G R 值为0 255 从Color值分解出R G B值可直接使用 DimcAsNewColor c box1 GetPixel i j r c Rg c Gb c B 5 4图像处理 3 图像像素颜色的设定设置像素颜色可使用SetPixel方法 用法如下 Dimc1AsColor Color FromArgb rr gg bb Box2 SetPixel i j c1 指定图片框Box2位置 i j 的颜色值为c1 例5 6 彩色图像生成灰度图像 5 5文字处理 5 5 1创建字体Font类定义了文字的格式 如字体 大小和样式等 创建字体对象的语法格式如下 Font字体对象 newFont 字体名 字号 字体样式 其中 字体样式 为FontStyle枚举类型 包括Bold Italic Regular Strikeout 删除线 和Underline等 表示该字体是否为粗体 斜体 常规 黑体 删除线或下划线 还可以通过or运算符来组合样式 例如 Fontstyle ItalicOrFontStyle Bold将字体变成倾斜和加粗 例如 以下语句创建一个字体为 宋体 大小为20 样式为粗体的Font对象f DimfAsFontf NewFont 宋体 20 FontStyle Bold 5 5文字处理 字体常用属性如表4所示 5 5文字处理 5 5 2绘制文本Graphics对象提供了文本输出的DrawString方法 其中使用 字体格式 StringFormat对象可以优化文本显示的效果 Graphics DrawString 字符串 Font Brush Point 字体格式 Graphics DrawString 字符串 Font Brush Rectangle 字体格式 其中 各参数的说明如下 1 字符串 指出要绘制的字符串 也就是要输出的文本 2 Font为创建的字体对象 用来指出字符串的文本格式 3 Brush为创建的笔刷对象 它确定所绘制文本的颜色和纹理 4 Point表示为Point结构或者为PointF结构的点 这个点表示绘制文本的起始位置 5 6应用案例 五子棋游戏设计 例5 8 单机版的五子棋程序 1 设计的思路在下棋过程中 为了保存下过的棋子的位置使用了Box数组 Box数组初值为枚举值Chess none 表示此处无棋子 Box数组可以存储枚举值Chess none Chess Black Chess White 分别代表无棋子 黑子 白子 2 设计步骤 1 设计应用程序界面本程序主要在窗体设计器中添加一个 重新开始 命令按钮控件button1 一个显示棋子和棋盘的图片框控件pictureBox1 显示鼠标坐标的标签label1和提示该那方走棋的标签label2 5 7人物拼图游戏设计 例5 9 拼图游戏将一幅图片分割成若干拼块并将它们随机打乱顺序 当将所有拼块都放回原位置时 就完成了拼图 游戏结束 程序设计的思路 应用程序首先显示以正确顺序排列的图片缩略图 根据玩家设置的分割数计算出行 列 数GameSize 将图片分割成相应行列数的拼块 并按顺序编号 动态生成一个大小GameSize的数组Position 存放用0 1 2到GameSize 1的数 每个数字代表一个拼块 游戏开始时 随机打乱这个数组 根据玩家用鼠标点击任意两个图片 来交换该Position数组对应元素 判断元素排列顺序来判断是否已经完成游戏