C WinForm实践开发教程 chp4 图型图像GDI编程

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,-,基于,C#,语言,主讲教师：钱 哨,本课学时：,72,课时,联系方式：,qianshao,Windows,程序设计,第四章、,图型图像,GDI,编程,本章主要内容介绍,4.1,繪圖的基本觀念,4.2,繪圖屬性與方法,4.3,繪圖相關類別,CONTENT,本章学习目标：,了解,System.,Drawing,命名空间,掌握矢量图形和绘制对象,可以绘制简单的几何图形,掌握图像的基本处理技术,4.1,什么是,GDI+,首先先了解什么是,GDI,呢？,GDI,是从,Windows 95,到,Windows 2000,随附的旧版绘图装置接口,(,Graphics Device Interface,),是属于绘图方面的,API (,Application Programming Interface,),。因为应用程序不能直接控制硬件,所以当我们要进行绘图的动作时,必须透过,GDI,才能完成。,那,GDI+,又是什么呢？,GDI+,是,GDI,的后续产品,是一种绘图装置接口,可将应用程序和绘图硬件分隔,让我们能够撰写与装置无关的应用程序。它可以让我们不需注意特定显示装置的详细数据,便可在屏幕或打印机显示信息。我们可以呼叫,GDI+,类别所提供的方法,然后这些方法会适当地呼叫特定的装置驱动程序,而完成绘图。,4.2 System.,Drawing,命名空间,System.Drawing,命名空间包含许多基本与进阶的绘图类别,供程序开发者来完成各种绘图功能。本章在此仅介绍,System.Drawing,命名空间中一些常用的绘图类别。,4.2 System.,Drawing,命名空间,在,GDI+,中所采用的坐标系统，与平时人们较常用的坐标系统不同，主要差别在于，一般的二维坐标系，,x,轴与,y,轴分别是,往右往上,递增,(,左图,),，而,GDI+,所采用的坐标系，,x,轴与,y,轴则分别是,往右往下,递增,(,右图,),1,、坐标系统,4.2 System.,Drawing,命名空间,在数学定义中，坐标上的最基本元素：点，其实是个长度与宽度都无穷小的概念单位，但是在计算器图学中，作画的最基本元素是,像素,(pixel),当我们的屏幕分辨率设定为,1024*768,时，表示在,x,轴横坐标总共可以画,1024,个像素，在,y,轴纵坐标总共可以画,768,个像素,2,、绘图基本单位,4.3,Graphics,类别简介,Graphics,类别是,GDI+,的核心,若要绘制任何图形,都需要先取得,Graphics,对象,设定它的属性,呼叫它的方法来完成绘图的工作。由于,Graphics,类别并未公开其建构子,故无法以建构子来建立一个,Graphics,对象,而是要从您所要绘图的组件取得一个,Graphics,对象,其语法如下：,Graphics g =,物件,.,CreateGraphics,；,以上叙述中的对象可为窗体,(Form),及,Control,类别的衍生类别,(,例如, Label,PictureBox,及,TextBox,等,.),当上述对象呼叫,CreateGraphics,方法后,会传回一个,Graphics,对象,您可利用此一,Graphics,对象在建立它的对象上绘图。例如以下叙述可取得窗体的,Graphics,对象。,Graphics g =,this.CreateGraphics,；,4.3,Graphics,类别简介,private void Form10_Paint(object sender, PaintEventArgs e),Graphics g = e.Graphics;,1,、在,FORM,的,Paint,方法中创建,2,、直接创建,public Form10(),InitializeComponent();,Graphics g;,g=this.CreateGraphics();,3,、由图像创建,Bitmap mybitmap = new Bitmap(c:1.jpg);,Graphics g = Graphics.FromImage(mybitmap);,4.3,Graphics,类别简介,private void Form10_Paint(object sender, PaintEventArgs e),e.Graphics.Clear(Color.Red);,4,、填充背景颜色案例,指定顏色也可以利用,RGB,來指定,如,:,純紅色畫布：,e.Graphics.Clear(Color.FromARGB(255,0,0);,純綠色畫布：,e.Graphics.Clear(Color.FromARGB(0,255,0);,純藍色畫布：,e.Graphics.Clear(Color.FromARGB(0,0,255);,5,、表单,paint,事件绘制图形,private void Form10_Paint(object sender, PaintEventArgs e),Pen drawPen = new Pen(Color.Black, 3);,e.Graphics.DrawLine(drawPen, 10, 10, 300, 100);,4.4 Pen,类别简介,C#,的绘图至少必须藉助,Graphics,与,Pen,类别对象的协助,其中,Graphics,对象就好比一块画布,而,Pen,类别对象就是画笔了。以下叙述可产生画笔对象,画笔的线条颜色为黑色,线条粗细为,3,。,drawPen,= New,Pen(Color.Black, 3),；,绘图方法,Graphics,类别的常用绘图方法有,DrawLine,(,直线,),、,DrawRectangle,(,矩形,),、,DrawEllipse,(,椭圆,),、,DrawCurve,(,曲线,),、,DarwArc,(,弧线,),、,DrawPie,(,扇形,),、,DrawLines,(,多边形,),、,DrawPolygon,(,封闭多边形,),DrawBezier,(,贝兹曲线,),等。,4.4 Pen,类别简介,private void Form10_Click(object sender, EventArgs e),Graphics g = this.CreateGraphics();,Pen mypen = new Pen(Color.Red, 5);,g.DrawLine(mypen, 10, 10, 300, 100);,案例,1,（绘制直线）,请写一程序,当使用者按一下按键时,可于窗体绘制一条起点为,(10,10),终点为,(300, 100),的直线。,案例,2,：,（绘制弧线）,將於一個左上角位於,(50, 50),寬度為,100,高度為,350,的矩形內,繪出一起始角為,0,度,弧角為,120,度的弧線。,private void Form10_Paint(object sender, PaintEventArgs e),Pen drawPen = new Pen(Color.Red, 3);,e.Graphics.DrawArc(drawPen,50, 50, 100, 350, 0, 120,);,4.4 Pen,类别简介,private void Form10_Click(object sender, EventArgs e),Graphics g = this.CreateGraphics();,e.Graphics.DrawPie(drawPen, 50, 50, 100, 50, 0, 90);,案例,3,：,（绘制扇形）,左上角位於,(50, 50),寬度為,100,高度為,50,的矩形內,繪出一起始角為,0,度,弧角為,90,度的扇形。,案例,4,：,（绘制折线）,繪出一條起點為,(100, 10),終點為,(200, 110),並通過,(120, 70),及,(160, 30),兩點的連續線段。,private void Form10_Paint(object sender, PaintEventArgs e),Graphics g = this.CreateGraphics();,Pen drawPen = new Pen(Color.Black, 1);,Point p1, p2, p3, p4;,p1 = new Point(100, 10);,p2 = new Point(120, 70);,p3 = new Point(160, 30);,p4 = new Point(200, 110);,Point points = p1, p2, p3, p4 ;,g.DrawLines(drawPen, points);,4.4 Pen,类别简介,private void Form10_Paint(object sender, PaintEventArgs e),Graphics g = this.CreateGraphics();,Pen drawPen = new Pen(Color.Black, 1);,Point p1, p2, p3, p4;,p1 = new Point(100, 10);,p2 = new Point(120, 70);,p3 = new Point(200, 110);,p4 = new Point(300, 10);,Point points = p1, p2, p3, p4 ;,g.DrawPolygon(drawPen, points);,案例,5,：,（绘制多边形）,繪出一個封閉多邊形,其起點為,(100, 10),終點為,(300, 10),並通過,(120, 70),及,(200,110),兩點,最後此方法會在起點與終點之間補上一條直線。,案例,6,：,（绘制文字）,於座標,(100, 50),的位置繪製文字,private void Form10_Paint(object sender, PaintEventArgs e),Graphics g = this.CreateGraphics();,Font drawFont = new Font(,隶书, 15);,SolidBrush drawBrush = new SolidBrush(Color.Blue);,g.DrawString(,欢迎光临, drawFont, drawBrush, 100, 50);,4.4 Pen,类别简介,DashStyle,属性,取得或设定线条的样式,此样式必须是,DashStyle,列举型别的成员,例如,以下敘述可將,drawPen,畫筆物件的線條樣式設定為虛線。,drawPen.DashStyle,= System.Drawing.Drawing2D.DashStyle.Dot;,小技巧：,可於程式開頭使用,using System, Drawing, Drawing2D;“,先行宣告,以避免鍵入全名。,4.4 Pen,类别简介,StartCap,与,EndCap,属性,取得或设定线条的端点样式,此样式必须,LineCap,列举型别的成员,如下表所示。,例如,以下叙述可将,drawPen,画笔对象的线条端点设为箭头及菱形。,drawPen.StartCap,=,System.Drawing.Drawing2D.LineCap.ArrowAnchor;,drawPen.EndCap,=,System.Drawing.Drawing2D.LineCap.DiamondAnchor;,4.4 Pen,类别简介,综合实验：,4.5 Brush,类别简介,Graphics,类别像是一块画布, Pen,类别像是一支画笔,但是这支画笔只具有画直线及外框,(,例如,椭圆形及扇形,),的能力,若要,对某一块区域进行填色的动作, Pen,类别就没有办法做到了,而,Brush,类别就是用来对各种封闭图形填色的工具,。针对各种需要, GDI+,提供了五种,Brush,的衍生类别,分别是,SolidBrush,(,单色,),TextureBrush,(,材质,),HatchBrush,(,预设图案,),PathGradientBrush,(,自定义,),LinearGradientBrush,(,渐层,),等,以下仅针对,SolidBrush,(,单色,),与,TextureBrush,(,材质,),类别作进一步的介绍。,4.5 Brush,类别简介,private void Form10_Paint(object sender, PaintEventArgs e),Pen drawPen = new Pen(Color.Red, 3);,SolidBrush,mybrush = new SolidBrush(Color.Blue);,e.Graphics.DrawRectangle(drawPen, 10, 10, 300, 100);,e.Graphics.,FillRectangle,(mybrush, 10, 10, 300, 100);,案例,1,FillRectangle,（绘制填充矩形）：,在一個左上角位於,(10, 10),寬度,300,高度,100,的矩形內填入蓝色。,private void Form10_Paint(object sender, PaintEventArgs e),Pen drawPen = new Pen(Color.Red, 3);,TextureBrush,mybrush = new TextureBrush(Image.FromFile(c:1.jpg);,e.Graphics.DrawRectangle(drawPen, 10, 10, 300, 100);,e.Graphics.,FillRectangle,(mybrush, 10, 10, 300, 100);,案例,2,FillRectangle,（绘制填充图形）：,在一個左上角位於,(10,10),寬度為,300,高度為,100,的矩形內填入檔名為,c:1.jpg,的圖檔。,4.5 Brush,类别简介,private void Form10_Paint(object sender, PaintEventArgs e),Graphics g = this.CreateGraphics();,SolidBrush sb = new SolidBrush(Color.Blue);,g.FillEllipse(sb, 50, 30, 200, 100);,案例,3,FillEllipse,（填充椭圆）：,在指定左上角座標,(50, 30),寬度,(200),及高度,(100),的矩形內繪製一個填滿顏色的橢圓。,private void Form10_Paint(object sender, PaintEventArgs e),Graphics g = this.CreateGraphics();,SolidBrush sb = new SolidBrush(Color.Yellow);,g.FillPie(sb, 50, 10, 150, 100, 0, 90);,案例,4,FillPie,（填充扇形）：,在指定左上角座標,(50, 10),寬度,(150),及高度,(100),，初始角度为,0,，终止角度为,90,的扇形內繪製一個填滿顏色的扇形。,4.5 Brush,类别简介,private void Form10_Paint(object sender, PaintEventArgs e),Graphics g = this.CreateGraphics();,SolidBrush sb = new SolidBrush(Color.Green);,Point p1, p2, p3, p4;,p1 = new Point(100, 10);,p2 = new Point(120, 70);,p3 = new Point(200, 110);,p4 = new Point(160, 30);,Point points = p1, p2, p3, p4 ;,g.FillPolygon(sb, points);,案例,5,FillPolygon,（填充多边形）：,填充一個封閉多邊形,其起點為,(100, 10),終點為,(160, 30),並通過,(120, 70),及,(200,110),兩點,最後此方法會在起點與終點之間補上一條直線。,案例,6,HatchBrush,（系统图案填充笔触）：,填充矩形，前景色为红，背景色为蓝，波形图案；,（,using System.Drawing.Drawing2D;,）,private void Form10_Paint(object sender, PaintEventArgs e),Pen drawPen = new Pen(Color.Red, 3);,HatchBrush,mybrush = new HatchBrush(HatchStyle.Wave, Color.Red, Color.Blue);,e.Graphics.FillRectangle(mybrush, 10, 10, 300, 100);,4.5 Brush,类别简介,private void Form10_Paint(object sender, PaintEventArgs e),Pen drawPen = new Pen(Color.Red, 3);,LinearGradientBrush,mybrush = new LinearGradientBrush(ClientRectangle, Color.Red, Color.Yellow, LinearGradientMode.Vertical);,e.Graphics.FillRectangle(mybrush, 10, 10, 500, 500);,案例,7,LinearGradientBrush,（系统复杂渐变填充笔触）：,填充矩形，由红色逐渐向黄色混合渐变；,4.5 Brush,类别简介,综合练习,4.6 Font,类,绘制文本时，可设置字体的样式，字体的大小，以及字体的种类。还是通过图形对象，在窗体或控件上直接画出，调用,Graphics,类,DrawString,方法。在调用方法前需先设置字体的选项。需要注意的是，,不同的字体绘制出的文本宽度不同,。,在窗体上直接写出“,Windows,应用程序设计”，使用隶书、斜体，调整汉字显示的位置，修改源代码：,小实验,小实验：写字,Font f = new Font(,隶书,24,FontStyle.Italic);,Pen p = new,Pen(Color.Blue,);,g.DrawString(Windows,应用程序设计,f, p.Brush,50,50);,4.7,坐标平移与缩放,我们看到，前面的例子都是默认以绘图界面的左上角作为原点，坐标值以像素为单位，画图以左上角为参照点，绘制每一点都要重新计算，并不方便。因此可以使用,Graphics,类中对于坐标系统操作的几个方法进行坐标变换。,小实验,小实验：平移,private void Form4_Paint(object sender, PaintEventArgs e),Graphics g = this.CreateGraphics();,g.Clear(Color.White);,Pen myPen = new Pen(Color.Red, 3);,g.DrawRectangle(myPen, 0, 0, 200, 100);,g.DrawEllipse(myPen, 0, 0, 200, 100);,g.Dispose();,myPen.Dispose();,/ ,/,坐标移动,/ ,/ ,/ ,private void button1_Click(object sender,EventArgs,e),Graphics g =,this.CreateGraphics,();,g.Clear(Color.White,);,Pen,myPen,= new,Pen(Color.Red, 3);,g.TranslateTransform(30, 120);,g.DrawRectangle(myPen, 0, 0, 200, 100);,g.DrawEllipse(myPen, 0, 0, 200, 100);,g.Dispose,();,myPen.Dispose,();,4.7,坐标平移与缩放,小实验,小实验：缩放,private void Form4_Paint(object sender, PaintEventArgs e),Graphics g = this.CreateGraphics();,g.Clear(Color.White);,Pen myPen = new Pen(Color.Red, 3);,g.DrawRectangle(myPen, 0, 0, 200, 100);,g.DrawEllipse(myPen, 0, 0, 200, 100);,g.Dispose();,myPen.Dispose();,/ ,/,坐标缩放,/ ,/ ,/ ,private void button1_Click(object sender, EventArgs e),Graphics g = this.CreateGraphics();,g.Clear(Color.White);,Pen myPen = new Pen(Color.Red, 3);,g.ScaleTransform(3, 3);/,关键变换语句：放大,3,倍,g.DrawRectangle(myPen, 0, 0, 200, 100);,g.DrawEllipse(myPen, 0, 0, 200, 100);,g.Dispose();,myPen.Dispose();,4.8,绘制图形,小实验,本次实验目标是掌握绘制曲线的基本要领，可以在任意窗体或控件上找到各相关点，计算绘制曲线，以正弦曲线为例，首先应找到坐标原点，然后找到每一个曲线上的对应点的坐标，在两点之间画一条直线，如此反复直到曲线末尾。,实验步骤（,1,）：,先定制坐标轴，确定坐标原点，依次画两条直线分别作为,X,Y,轴。因为窗体的左上角坐标为（,0,，,0,），在代码中使用的坐标定位都是相对的，相对于窗体的左上角位置。为了看得清楚，在窗体的四周留出了一部分边缘，使用绝对像素值，将坐标原点定位在（,30,，窗体高度,-100,），按钮的上方。随着窗体大小的变化，横坐标轴根据窗体高度绘制在不同位置。,4.8,绘制图形,小实验,小实验：绘制坐标轴,private void button1_Click(object sender, EventArgs e),/,绘制坐标轴开始,Graphics g = this.CreateGraphics();,Pen myPen = new Pen(Color.Blue, 3);,Point oo1 = new Point(30, this.ClientSize.Height - 100);,Point oo2 = new Point(this.ClientSize.Width - 50, this.ClientSize.Height - 100);,g.DrawLine(myPen, oo1, oo2);,Point oo3 = new Point(30, 30);,g.DrawLine(myPen, oo1, oo3);,Font f = new Font(,宋体, 12, FontStyle.Bold);,g.DrawString(x, f, myPen.Brush, oo2);,g.DrawString(y, f, myPen.Brush, 10, 10);,/,绘制正弦曲线,float x1, x2,y1,y2,a;,x1 = x2 = 0;,y1 = 0; y2 = this.ClientSize.Height - 100;,for (x2 = 0; x2 this.ClientSize.Width; x2+),a = (float)(2 * Math.PI * x2 / (this.ClientSize.Width);,y2 = (float)Math.Sin(a);,y2 = (1 - y2) * (this.ClientSize.Height - 100) / 2;,g.DrawLine(myPen, x1 + 30, (float)y1, x2 + 30, (float)y2);,x1 = x2;,y1 = y2;,4.8,绘制图形,小实验,小实验：绘制饼形图,/ ,/,绘制饼形图,/ ,/ ,/ ,private void button2_Click(object sender, EventArgs e),Graphics g = this.CreateGraphics();,g.Clear(Color.White);,Pen p = new Pen(Color.Blue);,Rectangle r = new Rectangle(50, 50, 200, 100);,Brush b = new SolidBrush(Color.Blue);,g.FillPie(p.Brush, r, 0, 60);,g.FillPie(b, r, 60, 150);,b = new SolidBrush(Color.Yellow);,g.FillPie(b, r, 210, 250);,4.8,绘制图形,小实验,小实验：利用方法,动态绘制饼形图,/ ,/,饼形图绘制方法,/ ,/ ,/ ,private void Fill(int percent, Color percolor),Graphics g = this.CreateGraphics();,Rectangle r = new Rectangle(10, 10, 400, 400);,Brush b;,int beginAngle = 0;,for (int i = 0; i = percent.GetUpperBound(0); i+),b = new SolidBrush(percolori);,g.FillPie(b, r, beginAngle, percenti);,beginAngle += percenti;,/ ,/,绘制饼形图,/ ,/ ,/ ,private void button2_Click(object sender, EventArgs e),int percent = new int 40,100,50,80,70,20;/,总数达到,360,即可,Color percolor = new Color Color.Tan, Color .Orange,Color.Red,Color.Black,Color.Blue,Color.BurlyWood;,Fill(percent, percolor);,4.9,绘制图形,小实验,小实验：利用方法,动态绘制饼形图,/ ,/,饼形图绘制方法,/ ,/ ,/ ,private void Fill(int percent, Color percolor),Graphics g = this.CreateGraphics();,Rectangle r = new Rectangle(10, 10, 400, 400);,Brush b;,int beginAngle = 0;,for (int i = 0; i = percent.GetUpperBound(0); i+),b = new SolidBrush(percolori);,g.FillPie(b, r, beginAngle, percenti);,beginAngle += percenti;,/ ,/,绘制饼形图,/ ,/ ,/ ,private void button2_Click(object sender, EventArgs e),int percent = new int 40,100,50,80,70,20;/,总数达到,360,即可,Color percolor = new Color Color.Tan, Color .Orange,Color.Red,Color.Black,Color.Blue,Color.BurlyWood;,Fill(percent, percolor);,