C#.net.ppt

1、第八章,GDI+图形编程基础,2,学习目标,了解Point、Size、Rectangle等基本结构； 掌握GDI坐标系统； 掌握Graphics类的基本用法； 理解颜色和字体对话框； 会使用画笔和画刷。,3,第8章 GDI+图形编程基础,8.1 图形概述 8.2 基本图形结构 8.3 Graphics类 8.4 GDI+坐标系统 8.5 颜色 8.6 字体 8.7 画笔与画刷 8.8 图形程序案例,4,GDI+是如何工作的呢？为了弄清这个问题，让我们来分析一个示例绘制一条线段。实质上，一条线段就是一个从一个开始位置(X0，Y0)到一个结束位置(Xn，Yn)的一系列像素点的集合。为了画出这样的一

2、条线段，设备(在本例中指显示器)需要知道相应的设备坐标或物理坐标。 然而，开发人员不是直接告诉该设备，而是调用GDI+的drawLine()方法，然后，由GDI+在内存（即“视频内存”）中绘制一条从点A到点B的直线。GDI+读取点A和点B的位置，然后把它们转换成一个像素序列，并且指令监视器显示该像素序列。简言之，GDI+把设备独立的调用转换成了一个设备可理解的形式；或者实现相反方向的转换。,8.1 图形概述,return,5,8.2.1 Point结构 GDI+使用Point结构表示一个点。这是一个二维平面上的点- 一个像素的表示方式。许多GDI+函数例如DrawLine()，都把Point作

3、为其参数。声明和构造Point的代码如下所示： Point p = new Point(1, 1); 公共属性X和Y可以获得和设置Point的坐标。其中X和Y属性的类型是int。 GDI+还使用PointF结构表示一个点。PointF结构与Point结构完全相同，但X和Y属性的类型是float，而不是int。,8.2 基本图形结构,6,8.2.2 Size结构 Size表示一个尺寸(像素)。Size结构包含宽度和高度。声明和构造Size的代码如下所示： Size s = new Size(5, 5); 公共属性Height和Width可以获得和设置Size的宽度和高度。其中Height和Wid

4、th类型为int。上例表示这个矩形s的高和宽均为(5,5)。 GDI+还使用SizeF结构表示一个尺寸。SizeF结构与Size结构完全相同，但X和Y属性的类型是float，而不是int。,8.2 基本图形结构,7,Size和Point之间可以通过显式转换互相转换，Size的Width、Height属性转换为Point对应的X、Y属性； 实例如下： Size s = new Size(20, 30); Console.WriteLine(s); /Point与Size之间的转换 Point p = new Point(20,10); Console.WriteLine(p); Size new

5、S = (Size)p; Console.WriteLine(newS); Point newP = (Point)newS; Console.WriteLine(newP);,8.2.3 Point结构与Size结构的转换,8,GDI+在许多不同的地方使用这个结构，以指定矩形的坐标。Point结构定义矩形的左上角，Size定义其大小。Rectangle有两个构造函数。一个构造函数的参数是X坐标、Y坐标、宽度和高度，另一个构造函数的参数是Point和Size结构，声明和构建Rectangle的两个示例如下所示： Rectangle r1 = new Rectangle(1, 2, 5, 6);

6、 Point p = new Point(1, 2); Size s = new Size(5, 6); Rectangle r2 = new Rectangle(p, s); 有一些公共属性可以获得和设置Rectangle的4个点和大小。另外，还有其他属性和方法可以完成诸如确定矩形是否与另一个矩形相交，提取两个矩形的相交部分，合并两个矩形等工作。,8.2.4 Rectangle结构,return,9,8.3 Graphics类,10,11,Graphics方法,12,13,14,15,16,return,17,1. 图形的放缩实例 private void Form1_Paint(objec

7、t sender, PaintEventArgs e) Graphics g = e.Graphics; g.FillRectangle(Brushes.White, this.ClientRectangle); g.DrawRectangle(Pens.Black, 10, 10, 50, 50); g.DrawEllipse(Pens.Black, 10, 10, 10, 10); g.ScaleTransform(2.0f, 3.0f); g.DrawRectangle(Pens.Black, 10, 10, 50, 50); g.DrawEllipse(Pens.Black, 10,

8、10, 10, 10); g.ScaleTransform(0.5f, 0.3333333f); g.DrawRectangle(Pens.Red, 20, 30, 100, 150); g.DrawEllipse(Pens.Red, 20, 30, 20, 30); ,8.4 GDI+坐标系统,18,2. TranslateTransform实例 TranslateTransform：通过使此 Graphics 的变换矩阵左乘指定的平移来更改坐标系统的原点。 private void button1_Click(object sender, EventArgs e) Graphics g =

9、 this.CreateGraphics(); g.FillRectangle(Brushes.White, this.ClientRectangle); Font f = new Font(Times New Roman, 24); g.DrawString(Traslation,f,Brushes.Black,0,0); g.TranslateTransform(150, 75); g.DrawString(Traslation, f, Brushes.Black, 0, 0); ,19,3. TranslateTransform实例 private void button2_Click(

10、object sender, EventArgs e) Graphics g = this.CreateGraphics(); g.FillRectangle(Brushes.White, this.ClientRectangle); for (int i = 1; i = 5; +i) g.DrawRectangle(Pens.Black, 10, 10, 30, 50); g.TranslateTransform(2, 10); ,20,4. TranslateTransform实例 private void button3_Click(object sender, EventArgs e

11、) Graphics g = this.CreateGraphics(); g.FillRectangle(Brushes.White, this.ClientRectangle); g.DrawEllipse(Pens.Black, 20, 20, 30, 50); g.TranslateTransform(-15, 0); g.DrawEllipse(Pens.Black, 20, 20, 30, 50); g.ResetTransform(); g.TranslateTransform(0, 30); g.DrawEllipse(Pens.Black, 20, 20, 30, 50);

12、,21,5. RotateTransform实例 private void button4_Click(object sender, EventArgs e) Graphics g = this.CreateGraphics(); g.FillRectangle(Brushes.White, this.ClientRectangle); Font f = new Font(Times New Roman, 24); g.DrawString(Rotation, f, Brushes.Black, 0, 0); g.RotateTransform(45); g.TranslateTransfor

13、m(100, 10); g.DrawString(Rotation, f, Brushes.Black, 0, 0); ,22,6. 坐标系变换与旋转综合示例 private void button5_Click(object sender, EventArgs e) Graphics g = this.CreateGraphics(); g.FillRectangle(Brushes.White, this.ClientRectangle); Font f = new Font(Times New Roman, 16); for (float angle = 0; angle 360; an

14、gle += 45) g.ResetTransform(); g.TranslateTransform(ClientRectangle.Width / 2, ClientRectangle.Height / 2); g.RotateTransform(angle); g.DrawString(Hello World, f, Brushes.Red, 50, 0); ,23,7. 图形的变换 private void button6_Click(object sender, EventArgs e) Graphics g = this.CreateGraphics(); g.FillRectan

15、gle(Brushes.White, this.ClientRectangle); Font f = new Font(Times New Roman, 24); g.TranslateTransform(175, 50); g.DrawString(BOBUI.DH, f, Brushes.Black, 0, 0); g.ScaleTransform(-1, 1); g.DrawString(BOBUI.DH, f, Brushes.Black, 0, 0); ,24,8. 图形的变换 private void button7_Click(object sender, EventArgs e

16、) Graphics g = this.CreateGraphics(); g.FillRectangle(Brushes.White, this.ClientRectangle); Matrix m = new Matrix(); m.Shear(0.6f, 0); g.DrawRectangle(Pens.Black, 10, 10, 50, 50); g.MultiplyTransform(m); g.DrawRectangle(Pens.Black, 70, 10, 50, 50); ,return,25,8.5.1 color结构 在GDI+中用Color 结构定义处理颜色的方法和常

17、量，颜色是一个32 位的值，由红色、绿色、蓝色及通道组成。每种颜色及通道各占8 位，取值范围是0255 之间的整数值，这些值结合起来可以定义某种具体的颜色。通道代表颜色的透明度，即颜色被背景色混合的程度。颜色的RGB 值和背景色的RGB值产生一种加权混合效果，其取值在0255 之间变化，O 代表全透明，255 代表全不透明。通道混合是背景色和源色一个像素一个像素地混合，源色中的3 个元素（红色、绿色和监色）各自根据下面的公式和背景色中相应元素混合。 显示色源色alpha255 背景色（255 alpha ) / 255,8.5 颜色,26,要绘制一条不透明的直线，将颜色的通道值设为255； 要

18、绘制一条半透明的直线，将通道值设为从1254 中的任何值。 当在背景上绘制半透明的直线时，直线的颜色和背景的颜色混合在一起。通道值接近O 的以背景色为主，接近255 的以直线色为主。 例：绘制一个位图，然后将位图作为背景在上面绘制一条直线。第一条直线通道值为255，不透明 。第二条通道值为128，看上去是半透明的，可以通过直线看到背景。,8.5.2 用不透明和半透明的直线绘制图形,27,创建一个脱离屏幕的位图，该位图有如下特征： 1. 颜色的通道值不到255 。 2. 当创建位图时彼此间没有颜色混合。 3. 当显示完成的位图时，位图中的颜色在显示设备上和背景色通过通道混合在一起。 常用的Gra

19、phics 对象的混合模式为CompositingMode，用来指定源色与背景色组合的方式。成员为： SourceCopy 指定在显示颜色时，改写背景色。 SourceOver 指定在显示颜色时，与背景色混合。,8.5.3 用合成模式控制通道混合,28,在窗体上绘制一个纯红色的椭圆。代码如下 private void button8_Click(object sender, EventArgs e) Graphics g = this.CreateGraphics(); SolidBrush myBrush = new SolidBrush(Color.Red); g.FillEllipse(

20、myBrush, 10, 10, 50, 50); ,8.5.4 C颜色应用实例,29,通过 Color 结构访问若干系统定义的颜色 Color myColor; myColor = Color.Red; myColor = Color.Aquamarine; myColor = Color.LightGoldenrodYellow; myColor = Color.PapayaWhip; myColor = Color.Tomato; 代码如下： private void button8_Click(object sender, EventArgs e) Color myColor; myC

21、olor = Color.Blue; Graphics g = this.CreateGraphics(); SolidBrush myBrush = new SolidBrush(myColor); g.FillEllipse(myBrush, 10, 10, 50, 50); ,30,8.5.5 颜色对话框(ColorDialog),31,32,1. 如图8.13放置两控件Button1和richTextBox1 2. 双击选择颜色控件，编写代码如下： private void button1_Click(object sender, EventArgs e) ColorDialog co

22、lorDialog = new ColorDialog(); colorDialog.AllowFullOpen = true; colorDialog.FullOpen = true; colorDialog.ShowHelp = true; colorDialog.Color = Color.Black;/初始化当前文本框中的字体颜色，当用户在ColorDialog对话框中点击取消按钮 colorDialog.ShowDialog(); richTextBox1.SelectionColor = colorDialog.Color; ,8.5.6 颜色对话框实例,return,33,8.6

23、.1 使用Font 类绘制文本 Font 类封装了字体的3个主要特性：字体系列、字体大小和字体样式。Font 类在System.Drawing名称空间中。 字体的Size属性表示字体类型的大小。但是，在.NET Framework中，这个Size并不仅仅是点的大小。它可以是点的大小，通过Unit属性可以改变GraphicsUnit属性，Unit定义了字体的测量单位。记住，一个点等于1/72英寸，所以10点的字体有10/72英寸高。在GraphicsUnit枚举中，可以把字体的大小指定为： 点的大小(1/72英寸) 显示大小(1/75英寸) 文档 (1/300英寸) 英寸 毫米 像素,8.6 字

24、体,34,简单的文本示例： private void button1_Click(object sender, EventArgs e) Brush blackBrush = Brushes.Black; Brush blueBrush = Brushes.Blue; Font haettenschweilerFont = new Font(Haettenschweiler, 12); Font boldTimesFont = new Font(Times New Roman, 10, FontStyle.Bold); Font italicCourierFont = new Font(Cou

25、rier, 11, FontStyle.Italic | FontStyle.Underline); Graphics dc = this.CreateGraphics(); dc.DrawString(This is a groovy string, haettenschweilerFont, blackBrush, 10, 10); dc.DrawString(This is a groovy string + with some very long text that will never fit in the box, boldTimesFont, blueBrush, new Rec

26、tangle(new Point(10, 40), new Size(100, 40); dc.DrawString(This is a groovy string, italicCourierFont, blackBrush, new Point(10, 100); ,8.6.2 FontFamily类,35,8.6.3 字体对话框,36,37,38,1. 放置两控件Button1（选择颜色按钮）、Button2（选择字体按钮)和richTextBox1（输入文本控件） 2. 双击选择字体按钮控件，编写代码如下： private void button2_Click(object sende

27、r, EventArgs e) FontDialog fontDialog = new FontDialog(); fontDialog.Color = richTextBox1.ForeColor; fontDialog.AllowScriptChange = true; fontDialog.ShowColor = true; if (fontDialog.ShowDialog() != DialogResult.Cancel) richTextBox1.SelectionFont = fontDialog.Font;/将当前选定的文字改变字体 ,8.6.4 字体对话框实例,return,

28、39,8.7.1 画笔 下面的应用程序演示了利用Pen类属性在窗口中绘制一个蓝色矩形，代码如下： private void button1_Click(object sender, EventArgs e) / Create a new pen. Pen skyBluePen = new Pen(Brushes.DeepSkyBlue); / Set the pens width. skyBluePen.Width = 8.0F; / Set the LineJoin property. skyBluePen.LineJoin = System.Drawing.Drawing2D.LineJo

29、in.Bevel; / Draw a rectangle. Graphics g = this.CreateGraphics(); g.DrawRectangle(skyBluePen, new Rectangle(40, 40, 150, 200); /Dispose of the pen. skyBluePen.Dispose(); ,8.7 画笔与画刷,40,Brush类是一个抽象的基类。要实例化一个Brush对象，应使用派生于Brush的类，例如SolidBrush、TextureBrush和LinearGradientBrush。 Brush和SolidBrush类在System.D

30、rawing名称空间中，但TextureBrush和LinearGradientBrush类在System.Drawing.Drawing2D名称空间中。下面是这些类的作用： SolidBrush用一种单色填充图形。 TextureBrush用一个位图填充图形。在构造这个画笔时，还指定了边框矩形和填充模式。边框矩形指定画笔使用位图的哪一部分-可以不使用整个位图。填充模式有许多选项，如Tile平铺纹理，TileFlipX、TileFlipY和TileFlipXY指定连续平铺时翻转图像。使用TextureBrush可以创建出非常有趣和富有想像力的效果。 LinearGradientBrush封装了

31、一个画笔，该画笔可以绘制两种颜色渐变的图形，其中第一种颜色以指定的角度逐渐过渡到第二种颜色。角度的单位是度。0?表示颜色从左向右过渡。90表示颜色从上到下过渡。 还有一种画笔PathGradientBrush，它可以创建精细的阴影效果，其中阴影从路径的中心趋向路径的边界。这种画笔可以让人想起用彩笔绘制的阴影地图，在不同的州或国家之间的边界上涂上较暗的颜色。,8.7.2 画刷,return,41,1. 新建一个工程，在form上拖放1个button1控件、7个panel控件、一个picturebox控件，如图8.20所示布局。其中button1的text属性为“颜色”；7个panel控件的nam

32、e属性分别为：ShowPanel，Width1Panel，Width2Panel，Width3Panel，Width4Panel，Width5Panel，Width6Panel。,8.8 图形程序案例,42,2. 在form1类里添加如下3个对象。其中a和b分别表示起点和终点坐标；p用于画线所需的具有选择线宽和颜色的画笔。 Point a = new Point(); Point b = new Point(); Pen p = new Pen(Color.Blue );,43,3. 在form1类里添加如下代码，用于绘制线宽面板图形以及颜色。 private void MyOwnPaint(

33、int index) Graphics g; switch (index) case 1: g = Width1Panel.CreateGraphics(); g.DrawLine(new Pen(Color.Black, 1), new Point(4, 6), new Point(46, 6); break; case 2: g = Width2Panel.CreateGraphics(); g.DrawLine(new Pen(Color.Black, 2), new Point(4, 6), new Point(46, 6); break; case 3: g = Width3Pane

34、l.CreateGraphics(); g.DrawLine(new Pen(Color.Black, 3), new Point(4, 6), new Point(46, 6); break; case 4: g = Width4Panel.CreateGraphics(); g.DrawLine(new Pen(Color.Black, 4), new Point(4, 6), new Point(46, 6); break; case 5: g = Width5Panel.CreateGraphics(); g.DrawLine(new Pen(Color.Black, 5), new

35、Point(4, 6), new Point(46, 6); break; case 6: g = Width6Panel.CreateGraphics(); g.DrawLine(new Pen(Color.Black, 6), new Point(4, 6), new Point(46, 6); break; ,44,4. 在form1类里添加如下代码，用于绘制每种线宽面板图形。 private void Width1Panel_Paint(object sender, PaintEventArgs e) MyOwnPaint(1); private void Width2Panel_Pa

36、int(object sender, PaintEventArgs e) MyOwnPaint(2); private void Width3Panel_Paint(object sender, PaintEventArgs e) MyOwnPaint(3); private void Width4Panel_Paint(object sender, PaintEventArgs e) MyOwnPaint(4); private void Width5Panel_Paint(object sender, PaintEventArgs e) MyOwnPaint(5); private voi

37、d Width6Panel_Paint(object sender, PaintEventArgs e) MyOwnPaint(6); ,45,5. 在form1类里添加如下代码，用于显示线宽面板颜色及选中的线型背景色。 private void MyOwnWidth(int index) Width1Panel.BackColor = button1.BackColor; Width2Panel.BackColor = button1.BackColor; Width3Panel.BackColor = button1.BackColor; Width4Panel.BackColor = b

38、utton1.BackColor; Width5Panel.BackColor = button1.BackColor; Width6Panel.BackColor = button1.BackColor; switch (index) case 1: Width1Panel.BackColor = Color.Blue; break; case 2: Width2Panel.BackColor = Color.Blue; break; case 3: Width3Panel.BackColor = Color.Blue; break; case 4: Width4Panel.BackColor = Color.Blue; break; case 5: Width5Panel.BackColor = Color.Blue; break; case 6: Width6Panel.B