《《图形图像编程》PPT课件》由会员分享，可在线阅读，更多相关《《图形图像编程》PPT课件（38页珍藏版）》请在金锄头文库上搜索。
1、第五篇第五篇ASP.NETASP.NET 高级编程高级编程东鹏电子信息有限公司东鹏电子信息有限公司2内容内容 第第 15 15 章章 图形图像编程图形图像编程第第 16 16 章章 ASP.NET ASP.NET 和和 AJAXAJAX第第 17 17 章章 ASP.NET MVC ASP.NET MVC 基础基础3第第 15 15 章章 图形图像编程图形图像编程主讲：主讲：Jayce_ZouJayce_Zou4本章内容本章内容 主讲：主讲：Jayce_ZouJayce_Zou图形编程图形编程 绘制文字特效绘制文字特效 绘制图片绘制图片 图像特效处理图像特效处理5图像布局图像布局 主讲：主讲：
2、Jayce_ZouJayce_Zou 在页面布局中，很多设计人员喜欢使用在页面布局中，很多设计人员喜欢使用 CSS CSS 设计，这样能够简化页设计，这样能够简化页面代码，将页面布局代码和页面代码相分离，从而提高了维护性。面代码，将页面布局代码和页面代码相分离，从而提高了维护性。虽然随着技术的发展，越来越多的动态生成页面布局，以及动态生成虽然随着技术的发展，越来越多的动态生成页面布局，以及动态生成图像的方法也越来越多的被开发人员和设计人员所认知，但是开发人图像的方法也越来越多的被开发人员和设计人员所认知，但是开发人员和设计人员还是比较喜欢使用员和设计人员还是比较喜欢使用 CSS CSS 和和
3、IMG IMG 标签进行页面布局，这标签进行页面布局，这是因为是因为 CSS CSS 和和 IMG IMG 标签都比较简单，可以说是标签都比较简单，可以说是“轻量级轻量级”的，即不的，即不需要页面进行逻辑处理也不需要动态生成。需要页面进行逻辑处理也不需要动态生成。6IMG IMG 标签标签 主讲：主讲：Jayce_ZouJayce_Zou IMG IMG 标签是图像标签，标签是图像标签，IMG IMG 标签属于标签属于 HTML HTML 控件，在控件，在 Web Web 应用中可应用中可以看到在页面中包含大量的以看到在页面中包含大量的 IMGIMG标签用于图形图像显示，示例代码如标签用于图形
4、图像显示，示例代码如下所示下所示: : / 使用使用 IMG IMG 标签能够轻松的为网页添加图片，标签能够轻松的为网页添加图片，IMG IMG 标签包括以下常用标签包括以下常用属性：属性：SrcSrc：图片的地址，可以是图片的相对地址也可以是绝对地址。：图片的地址，可以是图片的相对地址也可以是绝对地址。WidthWidth：设定图片的宽度。：设定图片的宽度。HeightHeight：设定图片的高度。：设定图片的高度。AltAlt：当图片显示不了时提示的字符。：当图片显示不了时提示的字符。BorderBorder：图片的边框的宽度。：图片的边框的宽度。AlignAlign：图片的周片文字的对齐
5、方式。：图片的周片文字的对齐方式。TitleTitle：当鼠标放在图片上出现的提示字符。：当鼠标放在图片上出现的提示字符。 7CSSCSS 主讲：主讲：Jayce_ZouJayce_Zou 通过通过 CSS CSS 能够使用图像进行页面布局和样式控制。当需要使背景呈能够使用图像进行页面布局和样式控制。当需要使背景呈现渐变效果时，无需使用现渐变效果时，无需使用 JavaScriptJavaScript进行控制，可以直接使用进行控制，可以直接使用 CSS CSS 和图像进行搭配使用即可。和图像进行搭配使用即可。CSS CSS 背景属性包括：背景属性包括：背景颜色属性（背景颜色属性（backgrou
6、nd-colorbackground-color）：该属性为）：该属性为 HTML HTML 元素设定背景颜色。元素设定背景颜色。背景图片属性（背景图片属性（background-imagebackground-image）：该属性为）：该属性为 HTML HTML 元素设定背景图片。元素设定背景图片。背景重复属性（背景重复属性（background-repeatbackground-repeat）：该属性和）：该属性和 background-image background-image 属属性连在一起使用，决定背景图片是否重复。如果只设置性连在一起使用，决定背景图片是否重复。如果只设置 ba
7、ckground-background-image image 属性，没设置属性，没设置 background-repeat background-repeat 属性，在缺省状态下，图片既属性，在缺省状态下，图片既 x x 轴重复，又轴重复，又 y y 轴重复。轴重复。背景附着属性（背景附着属性（background-attachmentbackground-attachment）：该属性和）：该属性和 background-image background-image 属性连在一起使用，决定图属性连在一起使用，决定图 片是跟随内容滚动，还是固定不动。片是跟随内容滚动，还是固定不动。背景位置属
8、性（背景位置属性（background-positionbackground-position）：该属性和）：该属性和 background-image background-image 属性连在一起使用，决定了背景图片的最初位置。属性连在一起使用，决定了背景图片的最初位置。背景属性（背景属性（backgroundbackground）：该属性是设置背景相关属性的一种快捷的综合）：该属性是设置背景相关属性的一种快捷的综合写法。写法。 8JavaScript JavaScript 进行图像编程进行图像编程 主讲：主讲：Jayce_ZouJayce_Zou HTML HTML 图像控件支持图像控件
9、支持 JavaScript JavaScript 进行图像操作，可以为图像控件进进行图像操作，可以为图像控件进行事件处理，行事件处理，JavaScript JavaScript 代码如下所示代码如下所示: :script type=text/function cut()function cut()/获取获取 ID ID 为为 pic1 pic1 的图片的属性的图片的属性 varvar picpic=document.getElementById(“pic1”)=document.getElementById(“pic1”)pic.widthpic.width=100; =100; /设置图片的
10、宽度设置图片的宽度 pic.heightpic.height=100; =100; /设置图片的高度设置图片的高度 上述代码获取图片上述代码获取图片ID ID 为为pic1 pic1 的图片属性，当触发该事件后，的图片属性，当触发该事件后，ID ID 为为 pic1 pic1 的图片的宽度和高度将变为的图片的宽度和高度将变为 100100。 为了让图片被单击时触发该为了让图片被单击时触发该事件，则应该在事件，则应该在 IMG IMG 标签中声明该事件，代码如下所示标签中声明该事件，代码如下所示: : =cut() id=pic1/ 9GDI+GDI+简介简介 主讲：主讲：Jayce_ZouJa
11、yce_Zou 虽然通过虽然通过 IMG IMG 标签和标签和 CSSCSS、JavaScript JavaScript 相配合能够进行图形图像开相配合能够进行图形图像开发，但是其功能有限，并不能够进行高级的图形图像开发。发，但是其功能有限，并不能够进行高级的图形图像开发。GDI+GDI+是是 Windows XP Windows XP 中的一个子系统，它主要负责在显示屏幕和打印中的一个子系统，它主要负责在显示屏幕和打印设备输出有关信息，它是一组通过设备输出有关信息，它是一组通过C+C+类实现的应用程序编程接口。类实现的应用程序编程接口。GDI+GDI+的前身是的前身是 GDIGDI，在，在
12、C+C+应用程序开发中，应用程序开发中，C+C+开发人员经常需要开发人员经常需要使用使用 GDI GDI 进行窗口的绘制与重绘，在进行窗口的绘制与重绘，在 Vista Vista 操作系统之后的操作系操作系统之后的操作系统中，微软对图形图像编程进行了更新统中，微软对图形图像编程进行了更新. .在在 Vista Vista 等系统中，大量的使用了半透明、渐变、边缘模糊化等效等系统中，大量的使用了半透明、渐变、边缘模糊化等效果，这就要求在编程中强化图形图像渲染。果，这就要求在编程中强化图形图像渲染。 10 主讲：主讲：Jayce_ZouJayce_Zou GDI+GDI+相比与相比与 GDIGDI
13、，进行了一些加强，进行了一些加强， 这些加强功能如下所示这些加强功能如下所示: :渐变的画刷（渐变的画刷（Gradient BrushesGradient Brushes）：）：GDI+GDI+允许开发人员使用渐变的画刷来绘制线条、允许开发人员使用渐变的画刷来绘制线条、图形以及外观。图形以及外观。基数样条函数（基数样条函数（Cardinal Cardinal SplinesSplines）：）：GDI+GDI+支持基数样条函数而支持基数样条函数而 GDI GDI 不支持，基数不支持，基数样条能够防止锯齿的出现，使得窗口以及图形的绘制能够平滑过渡。样条能够防止锯齿的出现，使得窗口以及图形的绘制能
14、够平滑过渡。持久路径对象（持久路径对象（Persistent Path ObjectsPersistent Path Objects）：在）：在 GDI GDI 中，绘制路径在窗口更改需中，绘制路径在窗口更改需要通过重绘来保持图形的持久化，而在要通过重绘来保持图形的持久化，而在 GDI+GDI+中，可以通过创建对个对象来持久化。中，可以通过创建对个对象来持久化。变形和矩阵对象（变形和矩阵对象（Transformations Transformations Matrix ObjectMatrix Object）：）：GDI+GDI+提供了强大的矩阵提供了强大的矩阵对象，开发人员可以通过矩阵对象进
15、行图形的翻转、平移和缩放。对象，开发人员可以通过矩阵对象进行图形的翻转、平移和缩放。可伸缩区域（可伸缩区域（Scalable RegionsScalable Regions）：）：GDI+GDI+允许在一定的范围内进行任何图形变换。允许在一定的范围内进行任何图形变换。GDI+GDI+不仅包括这些新特性，还包括混合以及等多种图像类型支持等特性。不仅包括这些新特性，还包括混合以及等多种图像类型支持等特性。ASP.NET ASP.NET 相对于相对于 ASP ASP 的强大之处就在于的强大之处就在于 ASP.NET ASP.NET 可以使用可以使用 GDI+GDI+进行图形图像编程，实现不进行图形图
16、像编程，实现不同的同的 Web Web 应用功能。应用功能。11.NET Framework .NET Framework 绘图类绘图类 主讲：主讲：Jayce_ZouJayce_Zou GDI+GDI+包括很多的类、结构和枚举用于为开发人员提供图形编程，这些包括很多的类、结构和枚举用于为开发人员提供图形编程，这些类、结构和枚举都定义在命名空间中，这些命名控件如下所示类、结构和枚举都定义在命名空间中，这些命名控件如下所示: :System.DrawingSystem.Drawing：提供对：提供对 GDI+GDI+基本图形图像功能的访问，提供了基本图形图像功能的访问，提供了 Graphics
17、Graphics 类进行图形图像处理。类进行图形图像处理。System.Drawing.Drawing2D :System.Drawing.Drawing2D :提供了高级的二维图形和矢量图形的提供了高级的二维图形和矢量图形的处理功能，使用处理功能，使用 System.Drawing.Drawing2D System.Drawing.Drawing2D 能够进行二维图形和能够进行二维图形和二维游戏的开发和编写。二维游戏的开发和编写。 System.Drawing.ImagingSystem.Drawing.Imaging：主要提供了图像处理的功能，例如将图：主要提供了图像处理的功能，例如将图像
18、进行锐化处理，或者将图像像进行锐化处理，或者将图像 变成黑白色或底片都可以通过使用变成黑白色或底片都可以通过使用该命名空间的方法。该命名空间的方法。System.Drawing.TextSystem.Drawing.Text：提供高级的文字处理及排版功能，能够实：提供高级的文字处理及排版功能，能够实现现 Word Word 中艺术字的效果。中艺术字的效果。System.Drawing.PrintingSystem.Drawing.Printing：提供图形打印所需要的类。：提供图形打印所需要的类。System.Drawing.DesignSystem.Drawing.Design：提供开发：提
19、供开发 UI UI 设计时所需要的类。设计时所需要的类。 12类和方法类和方法 主讲：主讲：Jayce_ZouJayce_Zou System.DrawingSystem.Drawing 命名空间提供的类如下所示命名空间提供的类如下所示: :BitmapBitmap：在：在 Bitmap Bitmap 上使用图形工具，并在其中存储图形图像的绘图面板。上使用图形工具，并在其中存储图形图像的绘图面板。GraphicsGraphics：提供直线、曲线、多边形等绘画方法，也提供对一些位图的处：提供直线、曲线、多边形等绘画方法，也提供对一些位图的处理，例如平移、缩放等。理，例如平移、缩放等。PenPen
20、：提供直线、曲线等功能需要的画笔属性。：提供直线、曲线等功能需要的画笔属性。BrushBrush：提供文本填充和图形绘画，可以填充图形如圆形、椭圆形和多边：提供文本填充和图形绘画，可以填充图形如圆形、椭圆形和多边形。形。ColorColor：提供颜色的枚举，用于定义：提供颜色的枚举，用于定义 Pen Pen 和和 Brush Brush 的颜色。的颜色。FontFont：提供文本的字体属性，定义文本的字体类型、样式和大小等。：提供文本的字体属性，定义文本的字体类型、样式和大小等。PointPoint：用于定义有序的坐标对，这些坐标能够定义二维平面上的点。：用于定义有序的坐标对，这些坐标能够定义
21、二维平面上的点。SizeSize：定义区域的大小。：定义区域的大小。ImageImage：用于支持位图、指针和图标等文件类型。：用于支持位图、指针和图标等文件类型。RectangleRectangle：用于定义矩形区域。：用于定义矩形区域。StringFormatStringFormat：用于定义文本在位图上的对齐方式等属性。：用于定义文本在位图上的对齐方式等属性。 13 主讲：主讲：Jayce_ZouJayce_Zou 简而言之，简而言之，Bitmap Bitmap 就相当于绘画时需要的纸，图形能够绘画到纸上面。就相当于绘画时需要的纸，图形能够绘画到纸上面。而而 Graphics Graph
22、ics 相当于绘画的人，相当于绘画的人， 因为人能够提供只写、曲线、多边形等绘画因为人能够提供只写、曲线、多边形等绘画方法。方法。而而 Pen Pen 和和 Brush Brush 相当于绘画工具，如铅笔、笔刷等。相当于绘画工具，如铅笔、笔刷等。Color Color 就相当于是绘画所需要的颜料。就相当于是绘画所需要的颜料。在绘画过程中：在绘画过程中：首先需要使用一张纸，固定到绘画板上，首先需要使用一张纸，固定到绘画板上，然后有一个人能够进行绘画，这个人能够进行素描、水彩等绘画。然后有一个人能够进行绘画，这个人能够进行素描、水彩等绘画。但是在绘画前，需要给这个人基本的工具，包括铅笔、笔刷和颜料
23、盘等。但是在绘画前，需要给这个人基本的工具，包括铅笔、笔刷和颜料盘等。在这些基在这些基 本物质准备完毕后，就能够开始绘制了。本物质准备完毕后，就能够开始绘制了。 14Graphics Graphics 类的属性类的属性 主讲：主讲：Jayce_ZouJayce_Zou DpiXDpiX：获取对象的水平分辨率。：获取对象的水平分辨率。DpiYDpiY：获取对象的垂直分辨率。：获取对象的垂直分辨率。IsClipEmptyIsClipEmpty：为对象指定裁剪区域。：为对象指定裁剪区域。IsVisibleClipEmptyIsVisibleClipEmpty；判断裁剪区域是否为空。；判断裁剪区域是否
24、为空。TextGammaValueTextGammaValue：返回一个提供文本灰度值的信息的整数值。：返回一个提供文本灰度值的信息的整数值。TextRenderingHintTextRenderingHint：获取或设置与该图形相关联的文本着色模式。：获取或设置与该图形相关联的文本着色模式。通过通过 Graphics Graphics 类的属性能够获取类的属性能够获取 Graphics Graphics 对象的水平分辨率和垂对象的水平分辨率和垂直分辨率，并能够为直分辨率，并能够为 Graphics Graphics 对象进行裁剪区域的选择和判断。对象进行裁剪区域的选择和判断。15Graphi
25、cs Graphics 类的方法类的方法 主讲：主讲：Jayce_ZouJayce_Zou DisposeDispose：删除图形并释放已分配的内存。：删除图形并释放已分配的内存。DrawArcDrawArc：绘制弧线。：绘制弧线。DrawBezierDrawBezier：绘制后三次贝塞尔曲线。：绘制后三次贝塞尔曲线。DrawClosedCurveDrawClosedCurve：绘制封闭曲线。：绘制封闭曲线。DrawCurveDrawCurve：绘制曲线。：绘制曲线。DrawEllipseDrawEllipse：绘制椭圆。：绘制椭圆。DrawIconDrawIcon：绘制图标图像。：绘制图标图
26、像。DrawIconUnstretchedDrawIconUnstretched：绘制图标图像，并可将图像缩放到指定大小。：绘制图标图像，并可将图像缩放到指定大小。DrawImageDrawImage：绘制图像。：绘制图像。DrawImageUnscaledDrawImageUnscaled：绘制图像，并可将图像缩放到指定大小。：绘制图像，并可将图像缩放到指定大小。DrawImageUnscaledAndClippedDrawImageUnscaledAndClipped：在不进行缩放的情况下进行图像绘：在不进行缩放的情况下进行图像绘制。制。16 主讲：主讲：Jayce_ZouJayce_Zo
27、u DrawLineDrawLine：绘制线条。：绘制线条。DrawPieDrawPie：绘制扇形。：绘制扇形。DrawPolygonDrawPolygon：绘制多边形。：绘制多边形。DrawRectangleDrawRectangle：绘制矩形。：绘制矩形。DrawStringDrawString：绘制字符串。：绘制字符串。FillClosedCurveFillClosedCurve：填充封闭曲线的内部区域。：填充封闭曲线的内部区域。FillEllipseFillEllipse：填充椭圆内部。：填充椭圆内部。FillPathFillPath：填充：填充 GraphicsPathGraphic
28、sPath 内部。内部。FillPieFillPie：填充扇形内部。：填充扇形内部。RestoreRestore：恢复图形状态。：恢复图形状态。SaveSave：保存图形。：保存图形。SetClipSetClip：为对象设置剪辑区域。：为对象设置剪辑区域。 17绘制线条绘制线条 主讲：主讲：Jayce_ZouJayce_Zou 示例代码如下所示：示例代码如下所示：Bitmap images = new Bitmap(200, 200); Bitmap images = new Bitmap(200, 200); /创建画纸创建画纸Graphics Graphics grgr = = Graph
29、ics.FromImage(imagesGraphics.FromImage(images); ); Pen Pen penpen = new = new Pen(Color.RedPen(Color.Red, 5); , 5); /创建画笔创建画笔 gr.Clear(Color.Whitegr.Clear(Color.White); ); /设置画笔的颜色设置画笔的颜色gr.DrawLine(pengr.DrawLine(pen, 0, 0, 200, 200); , 0, 0, 200, 200); /开始绘画开始绘画images.Save(Response.OutputStreamima
30、ges.Save(Response.OutputStream, , System.Drawing.Imaging.ImageFormat.JpegSystem.Drawing.Imaging.ImageFormat.Jpeg); ); gr.Disposegr.Dispose(); (); /释放绘图对象释放绘图对象 images.Disposeimages.Dispose(); (); /释放图形对象释放图形对象 18绘制矩形绘制矩形 主讲：主讲：Jayce_ZouJayce_Zou 绘制矩形的方法同绘制线条基本相同，但是绘制矩形不仅要指定矩绘制矩形的方法同绘制线条基本相同，但是绘制矩形不仅
31、要指定矩形的坐标，还需要指定矩形的高度和宽度，示例代码如下所示：形的坐标，还需要指定矩形的高度和宽度，示例代码如下所示：Bitmap images = new Bitmap(400, 400); Bitmap images = new Bitmap(400, 400); /创建画纸创建画纸Graphics Graphics grgr = = Graphics.FromImage(imagesGraphics.FromImage(images); ); Pen Pen penpen = new = new Pen(Color.RedPen(Color.Red, 5); , 5); /创建画笔创建
32、画笔gr.Clear(Color.Whitegr.Clear(Color.White); ); /设置画笔颜色设置画笔颜色 gr.DrawLine(pengr.DrawLine(pen, 0, 0, 200, 200); , 0, 0, 200, 200); /绘制线条绘制线条 gr.DrawRectangle(pengr.DrawRectangle(pen, 200, 200, 50, 50); , 200, 200, 50, 50); /绘制矩形绘制矩形images.Save(Response.OutputStreamimages.Save(Response.OutputStream, ,
33、 System.Drawing.Imaging.ImageFormat.JpegSystem.Drawing.Imaging.ImageFormat.Jpeg););gr.Disposegr.Dispose();();images.Disposeimages.Dispose();();19绘制椭圆绘制椭圆 主讲：主讲：Jayce_ZouJayce_Zou 绘制椭圆的方法只需要使用绘制椭圆的方法只需要使用 DrawEllipseDrawEllipse 方法即可，示例代码如下方法即可，示例代码如下所示：所示：gr.DrawEllipse(pengr.DrawEllipse(pen, 0, 0, 3
34、00, 200); , 0, 0, 300, 200); /绘制椭圆绘制椭圆上述代码绘制了一个椭圆形，该椭圆形绘制的起点为（上述代码绘制了一个椭圆形，该椭圆形绘制的起点为（0 0，0 0），宽度），宽度为为 300300，高度为，高度为 200200。DrawEllipseDrawEllipse方法同方法同 DrawRectangleDrawRectangle 方法基本相同，因为这两个方法方法基本相同，因为这两个方法都包括五个参数，这都包括五个参数，这 5 5 个参数都需要指定绘制起点、个参数都需要指定绘制起点、 宽度和高度。宽度和高度。当需要绘制圆形时，只需要将宽度和高度设置相等即可，示例代
35、码如当需要绘制圆形时，只需要将宽度和高度设置相等即可，示例代码如下所示：下所示：gr.DrawEllipse(pengr.DrawEllipse(pen, 0, 0, 200, 200); , 0, 0, 200, 200); /绘制圆绘制圆当设置宽度和高度相等时，该椭圆就会以圆形呈现，上述代码就实现当设置宽度和高度相等时，该椭圆就会以圆形呈现，上述代码就实现了圆形的绘制。了圆形的绘制。20绘制多边形绘制多边形 主讲：主讲：Jayce_ZouJayce_Zou 绘制多边形的方法只需要使用绘制多边形的方法只需要使用 DrawPolygonDrawPolygon 方法即可，与绘制规则图形不同方法即
36、可，与绘制规则图形不同的是，绘制多边形需要指定多边形的各个节点，的是，绘制多边形需要指定多边形的各个节点，DrawPolygonDrawPolygon 方法通过获取方法通过获取这些节点即可组成一个多边形，示例代码如下所示：这些节点即可组成一个多边形，示例代码如下所示：Point pt1 = new Point(50, 50); Point pt1 = new Point(50, 50); /设置节点设置节点Point pt2 = new Point(150, 150); Point pt2 = new Point(150, 150); /设置节点设置节点Point pt3 = new Poin
37、t(200, 200); Point pt3 = new Point(200, 200); /设置节点设置节点 Point pt4 = new Point(350, 170); Point pt4 = new Point(350, 170); /设置节点设置节点Point pt5 = new Point(90, 30); Point pt5 = new Point(90, 30); /设置节点设置节点Point pt6 = new Point(180, 90); Point pt6 = new Point(180, 90); /设置节点设置节点Point pts = pt1, pt2, pt3
38、, pt4, pt5, pt6 ; Point pts = pt1, pt2, pt3, pt4, pt5, pt6 ; /设置节点组设置节点组gr.DrawPolygon(pengr.DrawPolygon(pen, pts); , pts); /绘制多边形绘制多边形21绘制文字绘制文字 主讲：主讲：Jayce_ZouJayce_Zou 通过使用通过使用 DrawStringDrawString 方法能够绘制文字并呈现在图像中，示例代码方法能够绘制文字并呈现在图像中，示例代码如下所示：如下所示：Font Font fontfont = new Font(“ = new Font(“宋体宋体”
39、, 20); ”, 20); /创建文字对象创建文字对象 Brush Brush brushbrush=new =new SolidBrush(Color.RedSolidBrush(Color.Red); ); /创建笔刷对象创建笔刷对象 gr.DrawStringgr.DrawString(我的字符串我的字符串, font, brush, 200,200); , font, brush, 200,200); /绘制文字绘制文字使用使用 DrawStringDrawString 方法，需要对方法，需要对 DrawStringDrawString 方法进行参数传递，方法进行参数传递，DrawS
40、tringDrawString 方法需要五个参数，其中包括需要输出的字符串、文本方法需要五个参数，其中包括需要输出的字符串、文本格式对象、笔刷对象以及文字开始绘制的坐标。格式对象、笔刷对象以及文字开始绘制的坐标。上述代码中，输出字串为上述代码中，输出字串为“我的字符串我的字符串”。文本格式通过。文本格式通过 Font Font 默认默认构造函数构造，并在坐标为构造函数构造，并在坐标为(200,200)(200,200)位置开始绘制。位置开始绘制。22图形绘制实例图形绘制实例 主讲：主讲：Jayce_ZouJayce_Zou protected void protected void Page_
41、Load(objectPage_Load(object sender, sender, EventArgsEventArgs e) e) Bitmap images = new Bitmap(400, 400); Bitmap images = new Bitmap(400, 400); /创建画纸创建画纸Graphics Graphics grgr = = Graphics.FromImage(imagesGraphics.FromImage(images); ); /创建绘图类创建绘图类Pen Pen penpen = new = new Pen(Color.RedPen(Color.Re
42、d, 5); , 5); /创建画笔创建画笔gr.Clear(Color.Whitegr.Clear(Color.White); ); /绘制直线绘制直线gr.DrawLine(pengr.DrawLine(pen, 0, 0, 200, 200); , 0, 0, 200, 200); /绘制矩形绘制矩形gr.DrawRectangle(pengr.DrawRectangle(pen, 200, 200, 50, 50); , 200, 200, 50, 50); /绘制椭圆绘制椭圆 gr.DrawEllipse(pengr.DrawEllipse(pen, 0, 0, 300, 200);
43、 , 0, 0, 300, 200); /绘制多边形绘制多边形 Point pt1 = new Point(50, 50); Point pt1 = new Point(50, 50); /设置节点设置节点Point pt2 = new Point(150, 150); Point pt2 = new Point(150, 150); /设置节点设置节点Point pt3 = new Point(200, 200); Point pt3 = new Point(200, 200); /设置节点设置节点Point pt4 = new Point(350, 170); Point pt4 = ne
44、w Point(350, 170); /设置节点设置节点Point pt5 = new Point(90, 30); Point pt5 = new Point(90, 30); /设置节点设置节点Point pt6 = new Point(180, 90); Point pt6 = new Point(180, 90); /设置节点设置节点gr.DrawPolygon(pengr.DrawPolygon(pen, pts); , pts); /绘制文字绘制文字23 主讲：主讲：Jayce_ZouJayce_Zou Font Font fontfont = new Font( = new Fo
45、nt(宋体宋体, 20); , 20); /设置字体大小设置字体大小Brush Brush brushbrush=new =new SolidBrush(Color.RedSolidBrush(Color.Red); ); /创建红色笔刷创建红色笔刷gr.DrawStringgr.DrawString(我的字符串我的字符串, font, brush, 200,200); /, font, brush, 200,200); /填充矩形填充矩形SolidBrushSolidBrush brush2 = new brush2 = new SolidBrush(Color.YellowGreenSol
46、idBrush(Color.YellowGreen););/填充矩形填充矩形gr.FillRectangle(brush2,new Rectangle(100,100,100,100); gr.FillRectangle(brush2,new Rectangle(100,100,100,100); images.Save(Response.OutputStreamimages.Save(Response.OutputStream, , System.Drawing.Imaging.ImageFormat.JpegSystem.Drawing.Imaging.ImageFormat.Jpeg);
47、);gr.Disposegr.Dispose();();images.Disposeimages.Dispose();(); 24投影特效投影特效 主讲：主讲：Jayce_ZouJayce_Zou 使用使用 System.Drawing.Drawing2D System.Drawing.Drawing2D 和和 System.Drawing.TextSystem.Drawing.Text 能够进能够进行文字投影特效。行文字投影特效。在制作文字投影特效前，首先需要使用命名空间在制作文字投影特效前，首先需要使用命名空间 System.Drawing.Drawing2D System.Drawing
48、.Drawing2D 和和 System.Drawing.TextSystem.Drawing.Text。在实现投影效果前，首先需要了解如何制作投影。在实现投影效果前，首先需要了解如何制作投影。投影特效的难度在于如何描述本体的影子。投影特效的难度在于如何描述本体的影子。其实在画面上，影子是不可能像平常的描述一样呈现在图片上的，这其实在画面上，影子是不可能像平常的描述一样呈现在图片上的，这也就是说，影子其实也是本体对象的另一种表现形式。也就是说，影子其实也是本体对象的另一种表现形式。首先，影子可以看作是本体的压缩和平移，在对本体进行压缩和平移首先，影子可以看作是本体的压缩和平移，在对本体进行压缩
49、和平移后，从一定的角度上看就好像是本地的影子。后，从一定的角度上看就好像是本地的影子。其次，影子是没有颜色的，通常用灰色输出即可实现影子的效果。其次，影子是没有颜色的，通常用灰色输出即可实现影子的效果。在制作投影特效时，需要使用到在制作投影特效时，需要使用到 Matrix Matrix 类，该类需要使用类，该类需要使用 System.Drawing.Drawing2D System.Drawing.Drawing2D 和和 System.Drawing.TextSystem.Drawing.Text 命名空间。命名空间。25示例代码示例代码 主讲：主讲：Jayce_ZouJayce_Zou B
50、itmap images = new Bitmap(600, 150); Bitmap images = new Bitmap(600, 150); /创建创建 Bitmap Bitmap 对象对象 Graphics Graphics grgr= = Graphics.FromImage(imagesGraphics.FromImage(images); /); /创建创建 Graphics Graphics 对象对象 gr.Clear(Color.WhiteSmokegr.Clear(Color.WhiteSmoke); ); /填充背景颜色填充背景颜色 /设置文本输出质量设置文本输出质量g
51、r.TextRenderingHintgr.TextRenderingHint = = TextRenderingHint.ClearTypeGridFitTextRenderingHint.ClearTypeGridFit; ;gr.SmoothingModegr.SmoothingMode = = SmoothingMode.AntiAliasSmoothingMode.AntiAlias; ; Font Font newFontnewFont = new Font( = new Font(宋体宋体, 32);, 32);Matrix Matrix matrixmatrix = new M
52、atrix(); = new Matrix(); /执行投射执行投射 matrix.Shear(-1.5f, 0.0f); matrix.Shear(-1.5f, 0.0f); /执行缩放执行缩放 matrix.Scale(1, 0.5f); matrix.Scale(1, 0.5f); /执行平移执行平移matrix.Translate(130, 88); matrix.Translate(130, 88); /执行坐标转换执行坐标转换gr.Transformgr.Transform = matrix; = matrix;26 主讲：主讲：Jayce_ZouJayce_Zou SolidBr
53、ushSolidBrush grayBrushgrayBrush = new = new SolidBrush(Color.GraySolidBrush(Color.Gray); ); SolidBrushSolidBrush colorBrushcolorBrush = new = new SolidBrush(Color.RedSolidBrush(Color.Red););string text = ASP.NET 3.5 string text = ASP.NET 3.5 开发大全开发大全; /; /设置文字设置文字/绘制阴影绘制阴影gr.DrawString(textgr.DrawS
54、tring(text, , newFontnewFont, , grayBrushgrayBrush, new , new Point(0Point(0, 30);, 30);gr.ResetTransformgr.ResetTransform(); (); /图形变形图形变形/绘制前景绘制前景gr.DrawString(textgr.DrawString(text, , newFontnewFont, , colorBrushcolorBrush, new PointF(0, 40); , new PointF(0, 40); images.Save(Response.OutputStrea
55、mimages.Save(Response.OutputStream, , System.Drawing.Imaging.ImageFormat.JpegSystem.Drawing.Imaging.ImageFormat.Jpeg););27 主讲：主讲：Jayce_ZouJayce_Zou MatrixMatrix类中常用的方法有：类中常用的方法有：ShearShear：通过预先计算比例向量，将指定的比例向量应用到此矩阵。：通过预先计算比例向量，将指定的比例向量应用到此矩阵。ScaleScale：通过预先计算切变向量将指定的切变向量应用到此矩阵。：通过预先计算切变向量将指定的切变向量应用到
56、此矩阵。TranslateTranslate：通过预先计算转换向量，将指定的转换向量应用到此矩阵。：通过预先计算转换向量，将指定的转换向量应用到此矩阵。使用使用 Matrix Matrix 类能够进行对象的投射、缩放以及平移，并通过执行坐类能够进行对象的投射、缩放以及平移，并通过执行坐标转换呈现在图片中。标转换呈现在图片中。作为投影特效，作为投影特效，Matrix Matrix 类通过将现有的对象进行转换、压缩、平移，类通过将现有的对象进行转换、压缩、平移，并通过并通过 Graphics Graphics 对象的对象的 DrawStringDrawString 方法进行输出，方法进行输出， 使
57、之看上去使之看上去向文字的投影效果一样。向文字的投影效果一样。28倒影特效倒影特效 主讲：主讲：Jayce_ZouJayce_Zou Brush Brush shadowBrushshadowBrush = = Brushes.LightBlueBrushes.LightBlue; ; /创建倒影笔刷创建倒影笔刷Brush Brush foreBrushforeBrush = = Brushes.BlueBrushes.Blue; ; /创建本体笔刷创建本体笔刷Font Font fontfont = new Font( = new Font(微软雅黑微软雅黑, Convert.ToInt16
58、(40), , Convert.ToInt16(40), FontStyle.ItalicFontStyle.Italic); ); /配置字体配置字体Bitmap images = new Bitmap(600, 150);Bitmap images = new Bitmap(600, 150);Graphics Graphics grgr = = Graphics.FromImage(imagesGraphics.FromImage(images); ); /创建创建 GraphiceGraphicegr.Clear(Color.WhiteSmokegr.Clear(Color.White
59、Smoke););string text = ASP.NET 3.5 string text = ASP.NET 3.5 开发大全开发大全; ; /设置文字设置文字Size size = Size size = gr.MeasureString(textgr.MeasureString(text, font); , font); /设置矩形大小设置矩形大小intint posXposX = (600 - Convert.ToInt16(size.Width) / 2; / = (600 - Convert.ToInt16(size.Width) / 2; /设置平移坐标设置平移坐标intint
60、 posYposY = (150 - Convert.ToInt16(size.Height) / 2;/ = (150 - Convert.ToInt16(size.Height) / 2;/设置平移坐标设置平移坐标 gr.TranslateTransform(posXgr.TranslateTransform(posX, , posYposY); ); / /执行转换执行转换 GraphicsStateGraphicsState state = state = gr.Savegr.Save(); (); /图形保存图形保存gr.ScaleTransform(1, -1.0F); gr.Sc
61、aleTransform(1, -1.0F); /图形变换图形变换gr.DrawString(textgr.DrawString(text, font, , font, shadowBrushshadowBrush, 0, -120); , 0, -120); /输出倒影输出倒影gr.Restore(stategr.Restore(state); ); /图形重置图形重置 gr.DrawString(textgr.DrawString(text, font, , font, foreBrushforeBrush, 0, 0); , 0, 0); /输出本体输出本体images.Save(Res
62、ponse.OutputStreamimages.Save(Response.OutputStream, , System.Drawing.Imaging.ImageFormat.JpegSystem.Drawing.Imaging.ImageFormat.Jpeg););29旋转特效旋转特效 主讲：主讲：Jayce_ZouJayce_Zou 如果要实现旋转特效，首先需要获取一段文字，该文字进行通过平移坐标原如果要实现旋转特效，首先需要获取一段文字，该文字进行通过平移坐标原点进行变换，当需要实现旋转时，则通过循环不停的实现旋转平移点进行变换，当需要实现旋转时，则通过循环不停的实现旋转平移 :
63、:Bitmap images = new Bitmap(400, 400); Bitmap images = new Bitmap(400, 400); /创建创建 Bitmap Bitmap 对象对象Graphics Graphics grgr = = Graphics.FromImage(imagesGraphics.FromImage(images); /); /创建绘图对象创建绘图对象 gr.Clear(Color.WhiteSmokegr.Clear(Color.WhiteSmoke); ); /格式化画布格式化画布 gr.SmoothingModegr.SmoothingMode
64、= = SmoothingMode.AntiAliasSmoothingMode.AntiAlias; ; / /设置边缘设置边缘for (for (intint i = 0; i = 360; i += 20) i = 0; i = 360; i += 20) /循环旋转循环旋转 gr.TranslateTransform(200, 200); gr.TranslateTransform(200, 200); /变形变形gr.RotateTransform(igr.RotateTransform(i); ); /按角度变形按角度变形Brush Brush brushbrush = = Bru
65、shes.RedBrushes.Red; ; /创建画笔创建画笔Font Font fontfont = new Font( = new Font(微软雅黑微软雅黑, 12); , 12); /创建文字创建文字/绘制文字绘制文字gr.DrawString(ASP.NETgr.DrawString(ASP.NET 3.5 3.5 开发大全开发大全 , font, brush, 0, 0); , font, brush, 0, 0); gr.ResetTransformgr.ResetTransform(); (); /重置变形重置变形 images.Save(Response.OutputStr
66、eamimages.Save(Response.OutputStream, , System.Drawing.Imaging.ImageFormat.JpegSystem.Drawing.Imaging.ImageFormat.Jpeg););30载入图像文件载入图像文件 主讲：主讲：Jayce_ZouJayce_Zou 使用使用 Image Image 控件能够载入图像文件，拖动一个控件能够载入图像文件，拖动一个 Image Image 控件到页面，控件到页面，页面会自动生成页面会自动生成 HTML HTML 代码，示例代码如下所示。代码，示例代码如下所示。 =server /在控件的章节中
67、，讲到在控件的章节中，讲到 Image Image 控件包括以下常用属性：控件包括以下常用属性：AlternateTextAlternateText：在图像无法显示时显示的备用文本。：在图像无法显示时显示的备用文本。ImageAlignImageAlign：图像的对齐方式。：图像的对齐方式。ImageUrlImageUrl：要显示图像的：要显示图像的 URLURL。 配置完成后的图像控件示例代码如下所示：配置完成后的图像控件示例代码如下所示： /31GDI+GDI+输出图像输出图像 主讲：主讲：Jayce_ZouJayce_Zou 示例代码如下所示：示例代码如下所示：protected voi
68、d protected void Page_Load(objectPage_Load(object sender, sender, EventArgsEventArgs e) e) /读取现有图片读取现有图片Bitmap images = new Bitmap images = new Bitmap(Server.MapPath(autom.jpgBitmap(Server.MapPath(autom.jpg); ); /格式化输出格式化输出images.Save(Response.OutputStreamimages.Save(Response.OutputStream, , images.
69、RawFormatimages.RawFormat); ); images.Disposeimages.Dispose(); (); /释放对象释放对象 上述代码使用了上述代码使用了 Bitmap Bitmap 类进行图形输出，类进行图形输出，Bitmap Bitmap 类的默类的默认构造方法能够载入现有的图片并执行输出。认构造方法能够载入现有的图片并执行输出。注意：注意：Bitmap Bitmap 类的类的 RawFormatRawFormat 属性能够直接返回现有文属性能够直接返回现有文件的文件类型，在件的文件类型，在 Bitmap Bitmap 的的 Save Save 方法中可直接使用
70、。方法中可直接使用。32底片效果底片效果 主讲：主讲：Jayce_ZouJayce_Zou 在在 ASP.NET ASP.NET 中，可以通过网页进行图片处理，包括底片、锐化等效中，可以通过网页进行图片处理，包括底片、锐化等效果。果。在进行底片效果制作前，首先需要了解底片效果是如何实现的，在图在进行底片效果制作前，首先需要了解底片效果是如何实现的，在图片显示中，其实是很多很多的点（像素）组成一个图片的，如果像素片显示中，其实是很多很多的点（像素）组成一个图片的，如果像素的数量很多，则图片显示的就清晰，如果像素数量较少，则图片看上的数量很多，则图片显示的就清晰，如果像素数量较少，则图片看上去就不
71、那么清晰。一个图片的组成是通过像素组成的，这也就是说，去就不那么清晰。一个图片的组成是通过像素组成的，这也就是说，一个图片包括很多的小点进行组合，最后组合成图片。一个图片包括很多的小点进行组合，最后组合成图片。在进行底片效果的制作时，只需要分别找到图片中的这些点，并获取在进行底片效果的制作时，只需要分别找到图片中的这些点，并获取这些点的像素的值，再取反保存即可这些点的像素的值，再取反保存即可。33 主讲：主讲：Jayce_ZouJayce_Zou Bitmap images = new Bitmap images = new Bitmap(Server.MapPath(change.jpgBi
72、tmap(Server.MapPath(change.jpg); ); for (for (intint i = 0; i i = 0; i images.Widthimages.Width; i+) ; i+) /循环遍历宽循环遍历宽 for (for (intint j = 0; j j = 0; j images.Heightimages.Height; j+) ; j+) /循环遍历高度循环遍历高度 Color pix = Color pix = images.GetPixel(iimages.GetPixel(i, j); , j); /获取图像像素值获取图像像素值intint r
73、= 255 - r = 255 - pix.Rpix.R; ; /像素值取反像素值取反intint g = 255 - g = 255 - pix.Gpix.G; ; /转换颜色转换颜色intint b = 255 - b = 255 - pix.Bpix.B; ; /转换颜色转换颜色images.SetPixel(iimages.SetPixel(i, j, , j, Color.FromArgb(rColor.FromArgb(r, g, b); , g, b); /保存像素值保存像素值 images.Save(Response.OutputStreamimages.Save(Respon
74、se.OutputStream, , System.Drawing.Imaging.ImageFormat.JpegSystem.Drawing.Imaging.ImageFormat.Jpeg););images.Disposeimages.Dispose();(); 34浮雕效果浮雕效果 主讲：主讲：Jayce_ZouJayce_Zou 执行浮雕效果与底片效果实现手法非常类似，但是浮雕效果的实现与执行浮雕效果与底片效果实现手法非常类似，但是浮雕效果的实现与底片效果的实现中所需要使用的算法又不尽相同。底片效果的实现中所需要使用的算法又不尽相同。实现浮雕效果通常是将图像上每个像素点与其对角线的
75、像素点形成差实现浮雕效果通常是将图像上每个像素点与其对角线的像素点形成差值，使相似颜色值淡化，不同颜色值之间保持突出，从而形成纵深感，值，使相似颜色值淡化，不同颜色值之间保持突出，从而形成纵深感，达到浮雕的效果。达到浮雕的效果。在程序开发中，可以讲像素点的像素值与周边的像素值相减后加上在程序开发中，可以讲像素点的像素值与周边的像素值相减后加上 128128，则可以呈现浮雕效果。，则可以呈现浮雕效果。 35浮雕效果浮雕效果 主讲：主讲：Jayce_ZouJayce_Zou Bitmap images = new Bitmap images = new Bitmap(Server.MapPath(
76、change.jpgBitmap(Server.MapPath(change.jpg); /); /载入图片载入图片for (for (intint i = 0; i images.Width-1; i+) i = 0; i images.Width-1; i+) /循环遍历宽循环遍历宽 for (for (intint j = 0; j images.Height-1; j+) j = 0; j images.Height-1; j+) /循环遍历高度循环遍历高度 Color pix1 = Color pix1 = images.GetPixel(iimages.GetPixel(i, j)
77、; , j); /获取图像像素值获取图像像素值Color pix2 = images.GetPixel(i+1, j+1); Color pix2 = images.GetPixel(i+1, j+1); /获取图像像素值获取图像像素值intint r = Math.Abs(pix1.R - pix2.R + 128); r = Math.Abs(pix1.R - pix2.R + 128); /实现浮雕效果实现浮雕效果intint g = Math.Abs(pix1.G - pix2.G + 128); g = Math.Abs(pix1.G - pix2.G + 128);intint b
78、 = Math.Abs(pix1.B - pix2.B + 128); b = Math.Abs(pix1.B - pix2.B + 128);r = r = check(rcheck(r); ); /判断是否溢出判断是否溢出g = g = check(gcheck(g););b = b = check(bcheck(b););images.SetPixel(iimages.SetPixel(i, j, , j, Color.FromArgb(rColor.FromArgb(r, g, b); /, g, b); /设置像素值设置像素值 images.Save(Response.OutputS
79、treamimages.Save(Response.OutputStream, , System.Drawing.Imaging.ImageFormat.JpegSystem.Drawing.Imaging.ImageFormat.Jpeg););images.Disposeimages.Dispose(); (); 36浮雕效果浮雕效果 主讲：主讲：Jayce_ZouJayce_Zou Bitmap images = new Bitmap images = new Bitmap(Server.MapPath(change.jpgBitmap(Server.MapPath(change.jpg
80、); /); /载入图片载入图片for (for (intint i = 0; i images.Width-1; i+) i = 0; i images.Width-1; i+) /循环遍历宽循环遍历宽 for (for (intint j = 0; j images.Height-1; j+) j = 0; j 255) if (x 255) /如果像素值大于如果像素值大于 255255return 255; return 255; /返回返回 255255else if (x 0) else if (x 0) /如果像素值小于如果像素值小于 0 0return 0; return 0;
81、/返回返回 0 0 elseelsereturn x; return x; /直接返回直接返回 38小结小结 主讲：主讲：Jayce_ZouJayce_Zou 本章介绍了本章介绍了 ASP.NET ASP.NET 图形图像编程，通过图形图像编程，通过 ASP.NET ASP.NET 图形图像编程能图形图像编程能够在够在 Web Web 上执行图形图像的修改以及渲染。在页面中绘制图形图像上执行图形图像的修改以及渲染。在页面中绘制图形图像包含很多方法，最简单的方法就是使用包含很多方法，最简单的方法就是使用 Graphics Graphics 类中的方法进行图类中的方法进行图形的绘制，形的绘制，Gr
82、aphics Graphics 类不仅提供了基本图形的绘制，还提供了图像、类不仅提供了基本图形的绘制，还提供了图像、图标图像的绘制。图标图像的绘制。GDI+GDI+看上去好像比较复杂，但是通过几个实例就能看上去好像比较复杂，但是通过几个实例就能够了解其实够了解其实 GDI+GDI+并不困难，在并不困难，在 ASP.NET ASP.NET 中，最常用的图形图像编程中，最常用的图形图像编程的方类属的方类属 Graphics Graphics 类了。本章还包括：类了。本章还包括：图形图像基础：介绍了图形图像编程基础。图形图像基础：介绍了图形图像编程基础。GDI+GDI+简介：介绍了简介：介绍了 GD
83、I+GDI+编程基础。编程基础。.NET Framework .NET Framework 绘图类：介绍了绘图类：介绍了.NET Framework .NET Framework 绘图类。绘图类。图形绘制实例：进行图形图像编程，通过使用现有类进行基本图形的创建。图形绘制实例：进行图形图像编程，通过使用现有类进行基本图形的创建。绘制文字特效：使用绘制文字特效：使用 GDI+GDI+进行文字绘制和特效渲染。进行文字绘制和特效渲染。图像特效处理：使用图像特效处理：使用 GDI+GDI+进行图像特效的处理。进行图像特效的处理。 本章还介绍了图像显示的基本原理，以及图像特效的实现思路。本章还介绍了图像显示的基本原理，以及图像特效的实现思路。
