VB图形图像编程.ppt

第5章 图形图像编程,本章学习目标,了解.NET框架提供的的图形类库掌握基本图形绘制方法初步了解Visual Basic.NET语言处理位图图像功能GDI+坐标系统，颜色、Paint事件等。最后重点介绍五子棋、人物拼图案例。,目录,5.1 图形图像绘制基础知识5.2 绘制基本图形5.3 创建画刷填充图形5.4 图像处理5.5 文字处理5.6 五子棋游戏设计5.7 人物拼图游戏设计,5.1 图形图像绘制基础知识,5.1.1 GDI+概述 GDI是Graphics Device Interface的缩写，含义是图形设备接口，它的主要任务是负责系统与绘图程序之间的信息交换，处理所有Windows程序的图形输出。GDI+技术是由GDI技术“进化”而来，出于兼容性考虑，Windows XP仍然支持以前版本的GDI，但是在开发新应用程序的时候，开发人员为了满足图形输出需要应该使用GDI+，因为GDI+对以前的Windows版本中GDI进行了优化，并添加了许多新的功能。,5.1 图形图像绘制基础知识,图5-1展示了GDI+在应用程序与上述设备之间起着重要的中介作用。其中，GDI+为我们“包办”了几乎一切从把一个简单的字符串“HelloWorld”打印到控制台到绘制直线、矩形甚至是打印一个完整的表单等。,5.1 图形图像绘制基础知识,在Visual Basic.NET中，所有图形图像处理功能都在以下命名空间下：1.System.Drawing命名空间 提供了对GDI+基本图形功能的访问，主要有Graphics类、Bitmap类、从Brush类继承的类、Font类、Icon类、Image类、Pen类、Color类等。2.System.Drawing.Drawing2D命名空间 Visual Basic.NET中没有3D命名空间，这是因为三维（3D）的效果实际上是通过二维（2D）的图案体现的。System.Drawing.Drawing2D命名空间提供了高级的二维和矢量图形功能。主要有梯度型画刷、Matrix类（用于定义几何变换）和GraphicsPath类等。3.System.Drawing.Imaging命名空间 提供了高级 GDI+图像处理功能。4.System.Drawing.Text命名空间提供了高级 GDI+字体和文本排版功能。,5.1 图形图像绘制基础知识,5.1.2 Graphics类要进行图形处理，必须首先创建Graphics对象，然后才能利用它进行各种画图操作。创建Graphics对象的形式有：（1）在窗体或控件的Paint事件中直接引用Graphics对象 每一个窗体或控件都有一个Paint事件，该事件的参数中包含了当前窗体或控件的Graphics对象，在为窗体或控件创建绘制代码时，一般使用此方法来获取对图形对象的引用。Private Sub Form1_Paint(ByVal sender As System.Object,ByVal e As System.Windows.Forms.PaintEventArgs)Handles MyBase.Paint Dim g As Graphics=e.Graphics End Sub,5.1 图形图像绘制基础知识,（2）从当前窗体或控件获取对Graphics对象的引用把当前窗体的画刷、字体、颜色作为缺省值获取对Graphics对象的引用，注意这种对象只有在处理当前Windows窗口消息的过程中有效。如果想在已存在的窗体或控件上绘图，可以使用此方法。例如：Dim g As Graphics=Me.PictureBox1.CreateGraphics(),5.1 图形图像绘制基础知识,（3）从继承自图像的任何对象创建Graphics对象。此方法在需要更改已存在的图像时十分有用。例如：Dim bitmap As New Bitmap(C:testa1.bmp)Dim g As Graphics=Graphics.FromImage(bitmap)在图形编程中，默认的图形度量单位是像素。不过，可以通过修改PageUnit属性来修改图形的度量单位，可以是英寸或是毫米等。实现方法如下：Dim g As Graphics=e.Graphics g.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）定义BitmapBitmap myBitmap=new Bitmap(c:MyImagesTestImage.bmp)（2）定义一个颜色变量把在指定位置所取得的像素值存入颜色变量中Color c=new Color()c=myBitmap.GetPixel(10,10)/获取此Bitmap中指定像素的颜色。（3）将颜色值分解出单色分量值int r,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.5 Paint事件 在屏幕上进行绘制的操作称为“绘画”。窗体和控件都有一个Paint事件。每当需要重新绘制窗体和控件（例如，首次显示窗体或窗体由另一个窗口覆盖）时就会发生该事件。用户所编写的用于显示图形的任何代码通常都包含在Paint事件处理程序中。,5.2 绘制基本图形,5.2.1 创建画笔 在GDI+中，可使用画笔（Pen）对象于绘制具有指定宽度和样式的线条、曲线以及勾勒形状轮廓。画笔Pen类的构造函数有四种，使用方法如下。（1）创建某一颜色的Pen对象：Public Sub New(ByVal color As Color)（2）创建某一刷子样式的Pen对象：Public Sub New(ByVal brush As Brush)（3）创建某刷子样式并具有相应宽度的Pen对象：Public Sub New(ByVal brush As Brush,ByVal width As Single)（4）创建某一颜色和相应宽度的Pen对象：Public Sub New(ByVal color As Color,ByVal width As Single),5.2.2 绘制直线,有两种绘制直线的方法：DrawLine()方法和DrawLines()方法。DrawLine()用于绘制一条直线，DrawLines()用于绘制多条直线。常用形式有：格式1：Overloads Public Sub DrawLine(ByVal pen As Pen,ByVal x1 As Integer,ByVal y1 As Integer,ByVal x2 As Integer,ByVal y2 As Integer)其中x1,y1为起点坐标，x2,y2为终点坐标。例如：e.Graphics.DrawLine(blackPen,100,100,200,100)格式2：Overloads Public Sub DrawLine(ByVal pen As Pen,ByVal pt1 As Point,ByVal pt2 As Point)其中Pen对象确定线条的颜色、宽度和样式。Point结构确定起点和终点。,5.2.3 绘制矩形,使用DrawRectangle()方法可以绘制矩形，常用形式有：格式1：Overloads Public Sub DrawRectangle(ByVal pen As Pen,ByVal rect As Rectangle)其中rect表示要绘制的矩形的Rectangle结构。格式2：Overloads Public Sub DrawRectangle(ByVal pen As Pen,ByVal x As Single,ByVal y As Single,ByVal width As Single,ByVal height As Single)其中x,y为矩形左上角坐标值。参数width是要绘制矩形的宽度，参数height是要绘制矩形的高度。,5.2.4 绘制多边形,多边形分为空心多边形和填充多边形。（1）绘制空心多边形 Public Sub DrawPolygon(ByVal pen As Pen,ByVal point As Point()（2）绘制填充多边形 Public Sub FillPolygon(ByVal brush As Brush,ByVal point As Point()其中Point数组是由一组Point结构对象定义的多边形。Pen对象指出画线的画笔。注意填充多边形需用画刷而不是画笔。,5.2.5 绘制曲线,曲线有空心曲线和填充曲线之分。Graphics.DrawClosedCurve可以画出一个平滑封闭的曲线（1）绘制空心闭合曲线Public Sub DrawClosedCurve(ByVal pen As Pen,ByVal points As Point()（2）绘制填充闭合曲线Public Sub FillClosedCurve(ByVal pen As Pen,ByVal points As Point()points表示曲线经过点的数组，其中必须包含至少4个点。,5.2.6 绘制椭圆和弧线,椭圆是一种特殊的封闭曲线，Graphics类专门提供了绘制椭圆的两种方法：DrawEllipse()方法和FillEllipse()方法。常用形式有：格式1：Public Sub DrawEllipse(ByVal pen As Pen,ByVal rect As Rectangle)其中rect为Rectangle结构，用于确定椭圆的边界。格式2：Public Sub DrawEllipse(ByVal pen As Pen,ByVal x As Integer,ByVal y As Integer,ByVal width As Integer,ByVal height As Integer)其中x,y为椭圆左上角的坐标，width定义椭圆的边框的宽度,height定义椭圆的边框的高度。格式3：Public Sub FillEllipse(ByVal brush As Brush,ByVal rect As Rectangle)填充椭圆的内部区域。其中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类的构造函数有多种格式，最常用的格式如下。Public Sub New(ByVal point1 As Point,ByVal point2 As Point,ByVal color1 As Color,ByVal color2 As Color)该构造函数有四个参数，其中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类有很多重载的构造函数，其中之一是：Public Sub New(ByVal filename As String)filename 是位图文件的名称。可以利用该构造函数创建Bitmap对象，例如：Dim bitmap As New Bitmap(tu1.jpg);（2）创建一个Graphics对象，表示要使用的绘图平面；Dim g As Graphics=窗体或图片框控件.CreateGraphics()（3）调用 Graphics 对象的 DrawImage 方法显示图像。,5.4 图像处理,5.4.2 图像的平移、旋转和缩放Graphics类提供了三种对图像进行几何变换的方法，分别用于图形图像的平移、旋转和缩放。TranslateTransform()方法的形式为：Public Sub TranslateTransform(ByVal dx As Single,ByVal dy As Single)图形平移指定的尺寸。其中，dx表示平移的x分量，dy表示平移的y分量。RotateTransform()方法的形式为：Public Sub RotateTransform(ByVal angle As Single)图形旋转指定角度。其中，angle表示旋转角度。ScaleTransform()方法的形式为：Public Sub ScaleTransform(ByVal sx As Single,ByVal sy As Single)图形缩放指定数量。其中，sx表示x方向的缩放比例，sy表示y方向的缩放比例。,5.4 图像处理,5.4.4 彩色图像变换灰度图像彩色图像像素的颜色是由三种基本色颜色，即红（R）、绿（G）、蓝（B）有机组合而成的，称为三基色。每种基色可取0255的值，因此由三基色可组合成（256*256*256）1677万种颜色，每种颜色都有其对应的R、G、B值。（1）彩色图像颜色值的获取在使用C#系统处理彩色图像时，使用Bitmap类的GetPixel方法获取图像上指定像素的颜色值。,5.4 图像处理,（2）彩色位图颜色值分解像素颜色值c是一个长整型的数值，占4个字节，最上位字节的值为“0”，其它3个下位字节依次为B、G、R，值为0255。从Color值分解出R、G、B值可直接使用：Dim c As New Color()c=box1.GetPixel(i,j)r=c.Rg=c.Gb=c.B,5.4 图像处理,（3）图像像素颜色的设定设置像素颜色可使用SetPixel方法。用法如下：Dim c1 As Color=Color.FromArgb(rr,gg,bb)Box2.SetPixel(i,j,c1)指定图片框Box2位置(i,j)的颜色值为c1,【例5-6】彩色图像生成灰度图像。,5.5 文字处理,5.5.1 创建字体Font类定义了文字的格式，如字体、大小和样式等。创建字体对象的语法格式如下：Font 字体对象=new Font(字体名,字号,字体样式)其中，“字体样式”为FontStyle枚举类型，包括Bold,Italic，Regular，Strikeout（删除线）和Underline等。表示该字体是否为粗体，斜体，常规，黑体，删除线或下划线。还可以通过or运算符来组合样式，例如，Fontstyle.Italic Or FontStyle.Bold将字体变成倾斜和加粗。例如，以下语句创建一个字体为“宋体”，大小为20，样式为粗体的Font对象f：Dim f As Font f=New Font(宋体,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数组对应元素，判断元素排列顺序来判断是否已经完成游戏。,