图形图像编程

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,5,章 图形图像编程,1,本章学习目标,了解,.NET,框架提供的的图形类库,掌握基本图形绘制方法,初步了解,Visual Basic.NET,语言处理位图图像功能,GDI+,坐标系统，颜色、,Paint,事件等。最后重点介绍五子棋、人物拼图案例。,2,目录,5.1,图形图像绘制基础知识,5.2,绘制基本图形,5.3,创建画刷填充图形,5.4,图像处理,5.5,文字处理,5.6,五子棋游戏设计,5.7,人物拼图游戏设计,3,5.1,图形图像绘制基础知识,5.1.1 GDI+,概述,GDI,是,Graphics Device Interface,的缩写，含义是图形设备接口，它的主要任务是负责系统与绘图程序之间的信息交换，处理所有,Windows,程序的图形输出。,GDI+,技术是由,GDI,技术“进化”而来，出于兼容性考虑，,Windows XP,仍然支持以前版本的,GDI,，但是在开发新应用程序的时候，开发人员为了满足图形输出需要应该使用,GDI+,，因为,GDI+,对以前的,Windows,版本中,GDI,进行了优化，并添加了许多新的功能。,4,5.1,图形图像绘制基础知识,图,5-1,展示了,GDI+,在应用程序与上述设备之间起着重要的中介作用。其中，,GDI+,为我们“包办”了几乎一切,从把一个简单的字符串“,HelloWorld”,打印到控制台到绘制直线、矩形甚至是打印一个完整的表单等。,5,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+,字体和文本排版功能。,6,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,7,5.1,图形图像绘制基础知识,（,2,）从当前窗体或控件获取对,Graphics,对象的引用,把当前窗体的画刷、字体、颜色作为缺省值获取对,Graphics,对象的引用，注意这种对象只有在处理当前,Windows,窗口消息的过程中有效。如果想在已存在的窗体或控件上绘图，可以使用此方法。例如：,Dim g As Graphics = Me.PictureBox1.CreateGraphics() ,8,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,9,5.1,图形图像绘制基础知识,5.1.3,颜色,GDI+,中的许多绘图操作都涉及到颜色。例如，在绘制线条或矩形时都需要指定使用什么颜色。在自然界中，颜色大都由透明度（,A,）和三基色（,R,G,B,）所组成。在,GDI+,中，颜色封装在,Color,结构中,.,10,5.1,图形图像绘制基础知识,Color,结构中，除了提供（,A,R,G,B,）以外，还提供许多系统定义的颜色如,Pink,（粉颜色），也就说用户可以通过,Color,结构就可以使用系统定义的颜色。,Color,结构的基本属性如表,1,所示。,表,1,颜色的基本属性,名称,说明,A,获取此,Color,结构的,alpha,分量值，取值（,0,255,）。,B,获取此,Color,结构的蓝色分量值，取值（,0,255,）。,G,获取此,Color,结构的绿色分量值，取值（,0,255,）。,R,获取此,Color,结构的红色分量值，取值（,0,255,）。,Name,获取此,Color,结构的名称，这将返回用户定义的颜色的名称或已知颜色的名称（如果该颜色是从某个名称创建的），对于自定义的颜色，将返回,RGB,值。,11,5.1,图形图像绘制基础知识,在图像处理中一般需要获取或设置像素的颜色值，获取一幅图像的某个像素颜色值的具体步骤如下：,（,1,）定义,Bitmap,Bitmap 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; /,蓝色分量,12,5.1,图形图像绘制基础知识,5.1.4,坐标,在实际的绘图中，我们所关注的一般都是指设备坐标系，此坐标系以像素为单位，像素指的是屏幕上的亮点。每个像素都有一个坐标点与之对应，左上角的坐标设为（,0,，,0,），向右为正，向下为正。一般情况下以（,x,，,y,）代表屏幕上某个像素的坐标点，其中水平以,X,坐标值表示，垂直以,Y,坐标值表示。例如，在图,8-2,所示的坐标系统中画一个点，该点的坐标（,x,y,）是（,4, 3,）。,13,5.1,图形图像绘制基础知识,5.1.5 Paint,事件,在屏幕上进行绘制的操作称为“绘画”。窗体和控件都有一个,Paint,事件。,每当需要重新绘制窗体和控件（例如，首次显示窗体或窗体由另一个窗口覆盖）时就会发生该事件。用户所编写的用于显示图形的任何代码通常都包含在,Paint,事件处理程序中。,14,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),15,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,结构确定起点和终点。,16,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,是要绘制矩形的高度。,17,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,对象指出画线的画笔。注意填充多边形需用画刷而不是画笔。,18,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,个点。,19,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,结构，用于确定椭圆的边界。,20,5.3,创建画刷填充图形,画刷是可与,Graphics,对象一起使用来创建实心形状和呈现文本的对象。可以用画刷填充各种图形形状，如矩形、椭圆、扇形、多边形和封闭路径等。,画刷（,Brush,）类是一个抽象类，本身不能实例化。一般使用它的派生类。主要有以下几种不同类型的画刷,Brush,派生类：,（,1,）,SolidBrush,画刷,SolidBrush,类用来定义单一颜色的,Brush,，用纯色进行绘制。,21,5.3,创建画刷填充图形,（,2,）,HatchBrush,画刷,类似于,SolidBrush,，但是可以利用该类从大量预设的图案中选择绘制时要使用的图案，而不是纯色。,HatchBrush,画刷具有三个属性，分别如下：,1,）,HatchStyle,属性：获取此,HatchBrush,对象的阴影样式。,2,）,BackgroundColor,属性：获取此,HatchBrush,对象的背景色。,3,）,ForegroundColor,属性：获取此,HatchBrush,对象的前景色。,22,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,，分别表示点的横坐标和纵坐标。,23,5.3,创建画刷填充图形,（,4,）,TextureBrush,画刷,使用纹理（如图像）进行绘制。,TextureBrush,类允许使用一幅图像作为填充的样式。,24,5.4,图像处理,5.4.1,显示图像,可以使用,GDI+,显示以文件形式存在的图像文件。,图像文件可以是,BMP,、,JPEG,、,GIF,、,TIFF,、,PNG,等。,实现步骤为：,（,1,）创建一个,Bitmap,对象，指明要显示的图像文件；,创建,Bitmap,对象，,Bitmap,类有很多重载的构造函数，其中之一是：,Public Sub New( ByVal As String ),是位图文件的名称。可以利用该构造函数创建,Bitmap,对象，例如：,Dim bitmap As New Bitmap (tu1.jpg);,（,2,）创建一个,Graphics,对象，表示要使用的绘图平面；,Dim g As Graphics =,窗体或图片框控件,.CreateGraphics(),（,3,）调用,Graphics,对象的,DrawImage,方法显示图像。,25,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,方向的缩放比例。,26,5.4,图像处理,5.4.4,彩色图像变换灰度图像,彩色图像像素的颜色是由三种基本色颜色，即红（,R,）、绿（,G,）、蓝（,B,）有机组合而成的，称为三基色。每种基色可取,0,255,的值，因此由三基色可组合成（,256*256*256,）,1677,万种颜色，每种颜色都有其对应的,R,、,G,、,B,值。,（,1,）彩色图像颜色值的获取,在使用,C#,系统处理彩色图像时，使用,Bitmap,类的,GetPixel,方法获取图像上指定像素的颜色值。,27,5.4,图像处理,（,2,）彩色位图颜色值分解,像素颜色值,c,是一个长整型的数值，占,4,个字节，最上位字节的值为“,0”,，其它,3,个下位字节依次为,B,、,G,、,R,，值为,0,255,。,从,Color,值分解出,R,、,G,、,B,值可直接使用：,Dim c As New Color(),c = box1.GetPixel(i, j),r = c.R,g = c.G,b = c.B,28,5.4,图像处理,（,3,）图像像素颜色的设定,设置像素颜色可使用,SetPixel,方法。用法如下：,Dim c1 As Color = Color.FromArgb(rr, gg, bb),Box2.SetPixel(i, j, c1) ,指定图片框,Box2,位置,(i,j),的颜色值为,c1,【,例,5-6】,彩色图像生成灰度图像。,29,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),30,5.5,文字处理,字体常用属性如表,4,所示。,名称,说明,Bold,是否为粗体。,FontFamily,字体成员。,Height,字体高。,Italic,是否为斜体。,Name,字体名称。,Size,字体尺寸。,SizeInPoints,获取此,Font,对象的字号，以磅为单位。,Strikeout,是否有删除线。,Style,字体类型。,Underline,是否有下划线。,Unit,字体尺寸单位。,31,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,结构的点，这个点表示绘制文本的起始位置，,32,5.6,应用案例,-,五子棋游戏设计,【,例,5.8】,单机版的五子棋程序。,1,设计的思路,在下棋过程中，为了保存下过的棋子的位置使用了,Box,数组，,Box,数组初值为枚举值,Chess.none,，表示此处无棋子。,Box,数组可以存储枚举值,Chess.none, Chess.Black, Chess.White,，分别代表无棋子，黑子，白子。,2,设计步骤,（,1,）设计应用程序界面,本程序主要在窗体设计器中添加一个“重新开始”命令按钮控件,button1,，一个显示棋子和棋盘的图片框控件,pictureBox1,，显示鼠标坐标的标签,label1,和提示该那方走棋的标签,label2,。,33,5.7,人物拼图游戏设计,【,例,5-9】,拼图游戏将一幅图片分割成若干拼块并将它们随机打乱顺序。当将所有拼块都放回原位置时，就完成了拼图（游戏结束）。,【,程序设计的思路,】,应用程序首先显示以正确顺序排列的图片缩略图，根据玩家设置的分割数计算出行（列）数,GameSize,，将图片分割成相应行列数的拼块，并按顺序编号。动态生成一个大小,GameSize,的数组,Position,，存放用,0,，,1,，,2,到,GameSize-1,的数，每个数字代表一个拼块。游戏开始时，随机打乱这个数组，根据玩家用鼠标点击任意两个图片，来交换该,Position,数组对应元素，判断元素排列顺序来判断是否已经完成游戏。,34,