第八章图形应用设计.ppt

《第八章图形应用设计.ppt》由会员分享，可在线阅读，更多相关《第八章图形应用设计.ppt（44页珍藏版）》请在三一文库上搜索。

1、第八章 图形应用设计,VB.NET程序设计,主讲教师：黄超男 email:,第2页,本章内容：,8.1 GDI+与绘图基础 8.2 Graphics常用图形的绘制 8.3 填充图形 8.4 交互绘图,第3页,学习目标,绘图基础 绘制图形 填充图形 交互绘图,第4页,8.1 GDI+与绘图基础,图形设备接口即GDI+(Graphic Device Interface Plus) ，是Windows平台的新一代二维图形系统，程序员可利用GDI+这样的图形设备接口在屏幕或打印机上显示和输出信息，而不需要考虑特定显示设备的具体情况。,第5页,一. GDI+的对象 组成：GDI+由.NET类库中Syst

2、em.Drawing命名空间下的很多类组成。 功能：这些类包括窗体上绘图的必要功能，可以在屏幕上完成对文本和位图的绘制，也可以控制字体、颜色、线条粗细、阴影、方向等因素，并把这些操作发送到显卡上，确保在显示器上正确输出。它使开发人员可以利用Windows内置的图形功能轻松地创建图形应用程序。 GDI+的常用类：见教材166页表格8-1 常用的绘图函数：见教材167页表格8-2,第6页,二.命名空间 .NET框架类库由命名空间组成。每个命名空间都包含可以在程序中使用的类、结构、枚举、委托和接口。 常用的命名空间：见教材167页表格8-3 引用命名空间的方法： Imports 命名空间 例如：Im

3、ports System.Drawing 注意：引用命名空间的语句要放在最前面,第7页,三.坐标系 在VB.NET中，控件放置在窗体对象中，而窗体又放置在屏幕对象中，这些能够放置其他对象的对象称为容器，如窗体、屏幕都是容器。 每个容器都有一个坐标系,以便为对象的定位提供参考 容器坐标系统的默认设置是容器的左上角为坐标原点，横向向右为X轴方向，纵向向下为Y轴方向 窗体的原点在紧靠菜单和工具栏（如果有的话）的下方 默认的长度单位为像素（Pixel）,第8页,四. GDI+绘制图形的方法 在System.Drawing命名空间中，Graphics类是绘制图形的最核心的类。利用该类提供的40多种方法，

4、用户可以绘制出直线、曲线、椭圆等各种图形。 使用GDI+绘制图形需以下5个步骤： (1)声明Graphics对象； 例如：Dim g As System.Drawing.Graphics (2)创建Graphics类的实例； 例如：g = Me.CreateGraphics 在本窗体上创建一个Graphics类的实例 g = PictureBox1.CreateGraphics 在PictureBox1上创建一个Graphics类的实例,第9页,(3)创建画笔(Pen)、画刷(Brush)、字体(Font)等绘图工具对象； 例如：Dim mypen As New Pen(Color.Blue,

5、 5) 创建画笔对象 (4)调用Graphics对象的绘图方法绘制图形； 例如：g.DrawLine(mypen, 0, 0, 100, 100) 调用DrawLine方法画一条直线 (5)调用相关绘图对象的Dispose方法来释放对象。 例如：mypen.Dispose() g.Dispose() 释放Pen对象和Graphics对象,第10页,使用5个步骤绘制图形综合举例：,Private Sub Button1_Click() Dim g As Graphics 声明Graphics对象 g = Me.CreateGraphics 在本窗体上创建一个Graphics类的实例 Dim my

6、pen As New Pen(Color.Blue, 5) 创建画笔对象 g.DrawLine(mypen, 0, 0, 100, 100) 调用DrawLine方法画一条直线 mypen.Dispose() g.Dispose() 释放Pen对象和Graphics对象 End Sub,第11页,五.Pen对象 Pen对象：又称画笔对象。 功能：主要用来绘制线条、多边形、曲线等几何图形。 Pen对象的创建： 四种方法如下： (1)Dim 对象名 As New Pen(颜色) 例如：Dim mypen As New Pen(Color.Blue) (2)Dim 对象名 As New Pen(颜色

7、，宽度) 例如：Dim mypen As New Pen(Color.Blue，4) (3)Dim 对象名 As New Pen(刷子) (4)Dim 对象名 As New Pen(刷子，宽度),第12页,Pen对象的常用属性： Alignment属性：获取或设置此Pen对象的对齐方式。 Color属性：获取或设置此Pen对象的颜色。 Width属性：获取或设置此Pen对象的宽度。 DashStyle属性：获取或设置通过此Pen对象绘制的虚线的样式。该属性是一个DashStyle枚举型的值。如下表:,第13页,Pen对象的常用属性： Dashcap 属性：设置虚线短两端的外观。 其取值有： F

8、lat指定每一划线段的两端均为方形帽。 Round指定每一划线段的两端均为圆角帽。 Triangle指定每一划线段的两端均为带尖的三角帽 Startcap属性：获取或设置通过此Pen对象绘制的直线起点的帽样式。 Endcap 属性：获取或设置通过此Pen对象绘制的直线终点的帽样式。 Pentype 属性：获取或设置通过此Pen对象绘制的直线的样式。该属性是一个DashStyle枚举型的值。 线段起点和终点样式见教材172页表格8-5.,第14页,六.画刷对象 画刷：用于指定填充的特性。许多窗口、控件及其他区域都需要用画刷进行填充绘制，它比画笔的内容更加丰富。在程序设计中，画填充图形时需要事先创

9、建画刷对象。 VB.NET中提供了5种刷子的模式: SolidBrush画刷：单色画刷 Texturebrush画刷：纹理(图像)画刷 HatchBrush画刷：阴影画刷 LinearGradientBrush画刷：颜色渐变画刷 PathGradientBrush画刷：使用路径及复杂的混合色渐变画刷 说明： 前两种需引用命名空间System.Drawing 后三种需引用命名空间System.Drawing.Drawing2D,第15页,1.SolidBrush画刷(单色画刷) 所有Brush之中最基础的一种，主要用途是将某一特定区域填入单一的颜色。 格式： Dim 对象名 as New Sol

10、idBrush(Color) 2.Texturebrush画刷(纹理(图像)画刷) 纹理刷可以用一个图片来填充图形。在创建纹理刷时，需要使用一张图片。 格式： Dim 纹理刷对象As New TextureBrush(New Bitmap(“图片文件名“),第16页,3.HatchBrush画刷(阴影画刷) 定义阴影画刷，定义前景色和背景色及阴影风格。前景色定义线条的颜色，背景色定义各线条之间间隙的颜色。 两种用法： 格式1：Dim 对象名 As New HatchBrush(阴影样式, 前景色) 格式2：Dim 对象名 As New HatchBrush(阴影样式, 前景色, 背景色) 常用

11、属性： BackgroundColor:获取此HatchBrush对象的背景色 ForegroundColor:获取此HatchBrush对象的前景色 HatchStyle:获取此HatchBrush对象的阴影样式。阴影样式见教材174页表格8-7,第17页,4.LinearGradientBrush画刷(颜色渐变画刷) 渐变画刷的一种，用来产生线型渐变效果。常用的渐变效果是由两个颜色逐渐变化而来的。 格式： Dim 对象名 as New LinearGradientBrush(渐变的起始点，渐变的终结点，渐变的起始色,渐变的终止色) 说明： 前两个参数是Point结构型的变量; Point结

12、构是一个结构类型,表示一个点，有两个成员x和y，分别表示点的横坐标和纵坐标。,第18页,5.PathGradientBrush画刷(使用路径及复杂的混合色渐变画刷) 是路径渐变的，可以显示比较具有弹性的渐层效果。 格式： Dim 对象名 As New PathGradientBrush( points() as System.Drawing.Point) 说明: points():一个point结构的数组,表示构成路径的顶点的点。,第19页,用法：Dim g As Graphics 声明Graphics对象 g = PictureBox1.CreateGraphics 创建Graphics对象

13、 Dim p() As Point =New Point(10, 10), New Point(200, 10), New Point(200, 200), New Point(10, 200) 声明point结构的数组,表示构成路径的顶点的点。 Dim mybrush As New PathGradientBrush(p) 用point结构的数组,创建一个路径渐变画刷实例。 Dim mycolor() As Color = Color.Yellow, Color.Blue, Color.Red, Color.Green 声明color的数组,表示构成路径的顶点的点的颜色。 mybrush.S

14、urroundColors = mycolor 设置填充路径点相应的颜色数组 g.FillPolygon(mybrush, p) 用画刷和路径填充多边形 mybrush.Dispose() g.Dispose() 释放对象,第20页,8.2 Graphics常用图形的绘制,绘制文本 绘制直线 绘制椭圆 绘制圆弧 绘制扇形 绘制矩形 绘制Bezier曲线 绘制多边形 绘制样条曲线 绘制闭合曲线,第21页,一.绘制文本 绘制文本使用Graphics对象的DrawString方法 最常用的格式： DrawString(s，font，brush，x，y) 说明： S：为要绘制的文本， Font：为文本

15、所使用的字体， Brush：为绘制文本所采用的画刷， X：为绘制文本的x坐标， Y：为绘制文本的y坐标。,第22页,二.绘制直线 画直线可使用Graphics对象的DrawLine方法。 格式1： 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)指定的点之间画一条直线。 说明： Pen:是画笔； x1，y1：直线起点的坐标； x2,y2：直线终点的坐标。,第23页,格式2： DrawLi

16、ne(ByVal pen As Pen，ByVal pt1 As Point，ByVal pt2 As Point) 功能：在pt1和pt2指定的两点之间画一条直线。 说明： Pen：是画笔； pt1和pt2：两个点； Point是一个结构类型,表示在二维平面中定义点的整数 X 和 Y 坐标的有序对。 X属性：获取或设置此 Point 的 X 坐标。 Y属性：获取或设置此 Point 的 Y 坐标。,第24页,三.绘制椭圆 绘制椭圆使用Graphics对象的DrawEllipse方法。 格式1： DrawEllipse(ByVal pen As Pen,ByVal rect As Rectan

17、gle) 功能：绘制边界由Rect指定的椭圆。 说明： Pen：画笔； Rect：是rectangle(矩形结构）型数据，它定义了椭圆的外接矩形； Rectangle：存储四个整数,表示一个矩形的位置和大小 X：获取或设置此 Rectangle 结构左上角的 x 坐标。 Y：获取或设置此 Rectangle 结构左上角的 y 坐标。 Width：获取或设置此 Rectangle 结构的宽度。 Height：获取或设置此 Rectangle 结构的高度。,第25页,格式2： DrawEllipse(ByVal pen As Pen，ByVal x As Integer, ByVal y As I

18、nteger,ByVal width As Integer,ByVal height As Integer) 功能：绘制一个由边框(该边框由一对坐标、高度和宽度指定)定义的椭圆。 说明： Pen：画笔； X，Y：外接框左上角的坐标； Width：定义椭圆外接框的宽度； Height：定义椭圆外接框的高度。,第26页,四.绘制圆弧 绘制椭圆使用Graphics对象的DrawArc方法。 格式1： DrawArc(ByVal pen As Pen，ByVal rect As Rectangle，ByVal startAngle As Single,ByVal sweepAngle As Singl

19、e) 功能：绘制由Rect指定矩形内接椭圆的部分圆弧。 说明： rect：是一个Rectangle(也可以是RectangleF结构)，它定义椭圆的边界。 startAngle：定义了从x轴到弧线的起始点沿顺时针方向度量的角(以度为单位)。 sweepAngle：定义了从startAngle参数到弧线的结束点沿顺时针方向度量的角(以度为单位)。,第27页,格式2： DrawArc(ByVal pen As Pen，ByVal x As Integer,ByVal y As Integer,ByVal width As Integer,ByVal height As Integer,ByVal

20、startAngle As Integer,ByVal sweepAngle As Integer) 功能：绘制一段弧线，该弧线是由一对坐标、宽度和高度指定的椭圆的一部分。 说明： x、y：定义了椭圆外接矩形左上角的横坐标和纵坐标。 width：定义了椭圆的外接矩形的宽度。 height：定义了椭圆的外接矩形的高度。 startAngle：定义了从x轴到弧线的起始点沿顺时针方向度量的角。 sweepAngle：定义弧经过的点。,第28页,五.绘制扇形 Pie方法画椭圆弧，并且弧的两个端点与圆心连线。 格式： DrawPie(pen As SystemDrawingPen，x As Intege

21、r，y As_Integer，width As Integer，height As Integer，startAngle As_ Integer，sweepAngle As Integer) 说明：绘制一个扇形。 说明： pen：画笔。 X：限制椭圆矩形左上角x坐标。 Y：限制椭圆矩形左上角y坐标。 width：限制椭圆矩形的宽。 height：限制椭圆矩形的高。 startAngle：弧的起始点。 sweepAngle：弧经过的点。,第29页,六.绘制矩形 使用Graphics对象的DrawRectangle方法可以绘制矩形。 格式1： DrawRectangle(ByVal pen As

22、Pen,ByVal rect As Rectangle) 功能：绘制一个矩形。 说明： pen：画笔。 rect：表示要绘制矩形的Rectangle结构。,第30页,格式2： DrawRectangle(ByVal Pen As Pen,ByVal x As Integer,ByVal y As Integer,ByVal width As Integer,ByVal height As Integer) 功能：绘制一个由左上角坐标、宽度和高度指定的矩形。 说明： pen：画笔。 x、y：分别是要绘制的矩形的左上角的横坐标和纵坐标。 width：是要绘制的矩形的宽度。 height：是要绘制的

23、矩形的高度。,第31页,七.绘制Bezier(贝塞尔曲线 ) 使用Graphics对象的DrawBezier方法画一条Bezier曲线 格式： DrawBezier(pen As SystemDrawingPen，x1 As Single， y1 As_Single，x2 As Single，y2 As Single，x3 As Single，y3 As Single，_x4 As Single，y4 As Single) 功能：绘制一条Bezier曲线。 说明： pen：画笔。 x1，y1起点。 x2，y2控制点。 x3，y3控制点。 x4，y4终点。 3次Bezier曲线需要2个控制点和1

24、个起点，1个终点，四个点决定一条Bezier曲线。,第32页,八.绘制多边形 使用Graphics对象的DrawPolygon方法可以绘制多边形。 格式1： DrawPolygon(ByVal pen As Pen，ByVal points()As Point) 功能：绘制由一组Point结构定义的多边形。 说明： pen：画笔。 points：是Point结构的数组，用来表示多边形的顶点。,第33页,格式2： DrawPolygon(ByVal pen As Pen，ByVal points()As PointF) 功能：绘制由一组PointF结构定义的多边形。 说明： pen：画笔。 po

25、ints：是PointF结构的数组，用来表示多边形的顶点。 PointF结构与Point结构的不同之处在于PointF可以使用实数表示点的坐标，而Point结构只能使用整数。,第34页,九.绘制样条曲线 使用Graphics对象的DrawCurve方法绘制经过一组由指定的Point结构的基数样条曲线。 格式： DrawCurve(ByVal pen As Pen，ByVal points() As Point) 功能：绘制由一组Point结构定义的样条曲线。 说明： pen：画笔。 points：是Point结构的数组，用来表示多边形的顶点。,第35页,十.绘制闭合曲线 使用Graphics对

26、象的DrawClosedCurve方法可以绘制闭合曲线。 格式1： DrawClosedCurve(ByVal pen As Pen,ByVal points()As Point) 功能：绘制由Point结构的数组定义的闭合曲线。 说明： pen：画笔。 points：用来定义绘制曲线的样点，此方法绘制经过数组中每个点的闭合曲线。如果最后一个点不匹配第一个点，则在最后一个点和第一个点之间添加一条附加曲线段以使该图闭合。此方法使用默认张力0.5。另外Points也可以是PointF结构的数组。,第36页,格式2： DrawClosedCurve(ByVal pen As Pen，ByVal po

27、ints()As Point， ByVal tension As Single，ByVal fillmode As FillMode) 功能：使用指定的张力绘制由Point结构数组定义的闭合基数样条。 说明： pen：画笔。 points：用来定义绘制曲线的样点，此方法绘制经过数组中每个点的闭合曲线。如果最后一个点不匹配第一个点，则在最后一个点和第一个点之间添加一条附加曲线段以使该图闭合。Points也可以是PointF结构的数组。 tension：是一个大于或等于0.0F的值，该值指定曲线的张力。通过张力，可更改基数样条曲线的弯曲方式。请注意，当张力为 0 时，这些点由一条直线连接。 fil

28、lmode：是FillMode枚举的成员，它确定填充曲线的方式，需要此参数但其值被忽略。,第37页,8.3 填充图形,一.填充矩形 FillRectangle 语法：FillRectangle(画刷，矩形对象或坐标) 二.填充椭圆内部 用FillEllipse可以画一个填充椭圆 语法：FillEllipse(画刷，矩形对象或坐标) 三.填充多边形 用FillPolygon画一个填充多边形 语法：PillPolygon(画刷，坐标，填充方式),第38页,四.填充饼图 使用Graphics对象的FillPie方法可以填充饼图。 格式1： FillPie(ByVal brush As Brush，B

29、yVal rect As Rectangle，ByVal startAngle As Single，ByVal sweepAngle As Single) 功能：填充椭圆所定义的扇形区的内部，该扇形区由Rectangle结构和两条射线指定。 说明： brush：画刷。 rect：是一个Rectangle或RectangleF结构，它定义椭圆的边界。 startAngle：定义了从x轴到弧线的起始点沿顺时针方向度量的角(以度为单位)。 sweepAngle：定义了从startAngle参数到弧线的结束点沿顺时针方向度量的角(以度为单位)。,第39页,格式2： FillPie(ByVal brus

30、h As Brush，ByVal x As Integer,ByVal y AsInteger,ByVal width As Integer,ByVal height As Integer,ByVal startAngle As Integer,ByVal sweepAngle As Integer) 功能：填充由一对坐标、一个宽度、一个高度及两条射线指定的椭圆所定义的扇形区的内部。 说明： brush：画刷。 x、y：分别定义了椭圆的外接矩形的左上角的横坐标和纵坐标。 width：定义了椭圆的外接矩形的宽度。 height：定义了椭圆的外接矩形的高度。 startAngle：定义了从x轴到弧

31、线的起始点沿顺时针方向度量的角。 sweepAngle：定义了从startAngle参数到弧线的结束点沿顺时针方向度量的角。,第40页,五.填充闭合曲线内部 使用Graphics对象的FillClosedCurve方法用当前画刷填充一由Point结构数组定义的闭合曲线的内部。 格式： FillClosedCurve(brush， points()As SystemDrawingPoint) 功能：用画刷填充由Point结构数组定义的闭合曲线的内部。 说明： brush：画刷。 points()：Point结构的数组。,第41页,8.4 交互绘图,使用鼠标事件取坐标值，进行坐标的指定从而实现交互

32、绘图的方法。 常用的鼠标事件：MouseDown、MouseUp、MouseMove、MousePress 参数e记载了鼠标所在位置，例如ex是横坐标，ey是纵坐标。 例如：使用鼠标画任意曲线。 分析：使用MouseMove事件和DrawLine方法可以在窗体或图形框上依拖动鼠标的轨迹显示任意曲线。注意，MouseMove事件只是在移动鼠标时产生，当松开鼠标按钮后画线停止。同样，须设置监视鼠标单击的标志。当MouseDown事件发生时，设定表示按下鼠标按钮的标志值；当MouseUp事件发生时，对标志变量的值初始化。,第42页,了解GDI+和绘图的基础知识。 掌握绘制常用图形的方法。 了解交互绘图的方法。,总结：,第43页,作业：,1.理解本章的内容。 2.完成教材P194习题1、2 3.完善自己所选系统的功能实现。,第44页,