第13章 二维图形图像处理

教育部普通高等教育十二五国家级规划教材

《C#程序设计及应用教程》第3版

（包括简化版：《C#程序设计教程》第3版）

第13章二维图形图像处理2Ch13二维图形图像处理13.1图形图像处理基础13.2图形处理13.3图像处理13.4利用画笔绘制图形图像313.1图形图像处理基础WPF采用“保留模式”来负责图形图像的呈现，其内部用一组序列化绘图状态来保存这些对象，这样就可以让WPF自动进行重绘，而不再需要程序员编程去维护这些状态。WPF使用矢量图和与设备无关的技术来处理二维、三维图形的显示，并能根据本机的图形硬件（显卡、GPU）自动选择合适的呈现技术13.1.1与二维三维图形图像处理相关的类System.Windows.Media.Imaging命名空间：提供了对图像进行编码和解码的类。System.Windows.Controls命名空间：提供除了形状控件外的其他各种WPF控件，这些控件都是从Visual类派生的，包括Image控件以及我们在前面的章节中学习过的其他各种控件，这些控件按功能进行了分类，并提供了专门的实现。System.Windows.Shapes命名空间：提供了基本的几何图形形状控件，这些控件都是从Shape类派生的，而由于Shape又是从Visual派生而来的，所以这些控件本质上也都是从Visual派生的。413.1.1与二维三维图形图像处理相关的类Geometry及其派生类Geometry类在System.Windows.Media命名空间内，该类是定义二维图形形状的抽象基类。Shape及其派生类Shape类在System.Windows.Shapes命名空间内，该类是在FrameworkElement级别定义和绘制基本几何图形形状的抽象基类。Drawing及其派生类Drawing类在System.Windows.Media命名空间内。该类是描述二维绘图的抽象基类。13.1.1与二维三维图形图像处理相关的类Visual及其派生类Visual类也在System.Windows.Media命名空间内。

Visual类提供的功能包括：输出显示：呈现Visual对象的持久的序列化绘图内容。转换：对可视对象执行转换。剪辑：为Visual对象提供剪辑区域支持。命中测试：确定指定的坐标点或几何图形是否包含在可视对象的边界内。边界框计算：确定Visual对象的边框。TileBrush及其派生类TileBrush类也在System.Windows.Media命名空间内，该类描述使用一个或多个图块绘制区域的方法。613.2图形处理图形处理简介图形处理是指对二维矢量几何图形的处理，由于矢量图形是根据几何图形的特征来计算并绘制的，因此绘制的矢量图形不会有任何失真。在WPF中，有两种定义二维几何图形形状的技术，一种是用Geometry对象实现，另一种是用Shape对象实现。Geometry对象只定义图形的形状但自身没有绘制功能，适用于将其作为XAML资源的场合；Shape对象除了定义图形的形状外其自身还具有绘制功能，适用于直接对某种图形的形状进行界面级别处理的场合。713.2.1二维几何图形和路径标记语法System.Windows.Media命名空间下的Geometry类是定义二维几何图形的抽象基类，下表列出了其派生类。8图形形状类说明简单几何图形LineGeometry定义一条由两个点连接的直线RectangleGeometry定义一个矩形EllipseGeometry定义一个椭圆路径几何图形PathGeometry用路径定义一系列基本图形StreamGeometry用流定义一系列基本图形复合几何图形CombinedGeometry按照合并规则将两个图形合并在一起GeometryGroup将多个图形组合在一起路径几何图形9路径几何图形是指把一系列图形按照某种方式组合在一起构成的形体。PathGeometry和StreamGeometry提供了描绘由直线、弧线和曲线组成的多个复杂图形的方法。Path控件专门用于绘制定义的路径几何图形。该类从Shape类继承的，利用Geometry对象来定义图形，然后再通过它的下列属性实现绘制功能。Fill属性：描述用哪种画笔（Brush）填充封闭的形状。Stroke属性：描述用钢笔（Pen类的实例）的哪种Color或Brush绘制形状的轮廓。StrokeThickness属性：描述轮廓的粗细。PathGeometryPathGeometry是PathFigure对象的集合，用于创建基本形状以及组合后的复杂形状。

PathFigureCollection中的每个PathFigure由一个或多个线段组成，下表列出了这些线段的类型及其含义。10线段类型说明ArcSegment在两个点之间创建一条椭圆弧线BezierSegment在两个点之间创建一条三次方贝塞尔曲线LineSegment在两个点之间创建一条直线PolyBezierSegment创建一系列三次方贝塞尔曲线PolyLineSegment创建一系列直线PolyQuadraticBezierSegment创建一系列二次贝塞尔曲线QuadraticBezierSegment创建一条二次贝塞尔曲线PathGeometry例13-1：使用PathGeometry创建一个三角形。11StreamGeometryStreamGeometry是定义一个可包含曲线、弧线和直线的复杂几何形状。PathGeometry和StreamGeometry的选择原则：当需要高效率描绘复杂的几何图形而且不使用数据绑定、动画或修改时，可考虑使用StreamGeometry，否则使用PathGeometry。凡是能用StreamGeometry实现的功能也都可以用PathGeometry来实现。12路径标记语法路径标记语法是StreamGeometry和PathGeometry的一种简化的XAML命令描述形式。13命令类型说明移动（M或m）参数：startPoint示例：M10,20功能：指定新图形的起点。大写的M表示startPoint是绝对值；小写的m表示startPoint是相对于上一个点的偏移量，如果是(0,0)，则表示不存在偏移。当在移动命令之后列出多个点时，即使指定的是线条命令，也将绘制出连接这些点的线直线（L或l）参数：endPoint示例：L20,30功能：在当前点与指定的终点之间创建一条直线水平线（H或h）参数：x示例：M10,50H90功能：在当前点与指定的x坐标之间创建一条水平线。x表示线的终点的x坐标（double类型）路径标记语法命令类型说明垂直线（V或v）参数：y示例：M10,50V200功能：在当前点与指定的y坐标之间创建一条垂直线。y表示线的终点的y坐标（double类型）二次贝塞尔曲线（Q或q）参数：p1endPoint示例：M10,100Q200,200300,100功能：通过使用指定的控制点(p1)在当前点与指定的终点之间创建一条二次贝塞尔曲线平滑的二次贝塞尔曲线（T或t）参数：p2endPoint示例：T100,200,300,200功能：在当前点与指定的终点之间创建一条二次贝塞尔曲线。控制点假定为前一个命令的控制点相对于当前点的反射。如果前一个命令不存在，或者前一个命令不是二次贝塞尔曲线命令或平滑的二次贝塞尔曲线命令，则此控制点就是当前点。p2指曲线的控制点，用于确定曲线的起始正切值。endPoint指曲线将绘制到的点14命令类型说明三次方贝塞尔曲线（C或c）参数：p1p2endPoint示例：M10,100C100,0200,200300,100功能：通过使用两个指定的控制点（p1和p2）在当前点与指定的终点之间创建一条三次方贝塞尔曲线。平滑的三次方贝塞尔曲线（S或s）参数：p2endPoint示例：M10,100C35,0135,0160,100S285,200310,100功能：在当前点与指定的终点之间创建一条三次方贝塞尔曲线。第一个控制点假定为前一个命令的第二个控制点相对于当前点的反射。如果前一个命令不存在，或者前一个命令不是三次方贝塞尔曲线命令或平滑的三次方贝塞尔曲线命令，则假定第一个控制点就是当前点。第二个控制点，即曲线终端的控制点由p2指定椭圆弧线（A或a）参数：size,rotationAngle,isLargeArcFlag,sweepDirectionFlag,endPoint示例：M10,100A100,504510200,100功能：在当前点与指定的终点之间创建一条椭圆弧线。size：弧的X轴半径和Y轴半径；rotationAngle：椭圆的旋转度数；isLargeArcFlag：如果弧线的角度应大于或等于180度，则设置为1，否则设置为0；sweepDirectionFlag：如果弧线按照正角方向绘制，则设置为1，否则设置为0；endPoint：弧线将绘制到的点关闭（Z或z）示例：M10,100L100,100100,50ZM10,10100,10100,40Z功能：终止当前的图形并创建一条连接当前点和图形起点的线。此命令用于在图形的最后一个线段与第一个线段之间创建一条连线（转角）15路径标记语法13.2.2基本图形直线LineGeometry类用StartPoint和EndPoint定义直线的起点和终点，也可以用路径标记语法来描述它。例13-2：绘制一条数学上使用的坐标轴，即让坐标系的原点位于窗口中心，横向从左到右为x正方向，纵向从下到上为y轴正方向，然后在此坐标系统下绘制一条从（0，0）点到（20，20）的直线。1613.2.2基本图形折线折线是将一系列的点依次用直线相连，当这些点之间的距离很近时，其效果与曲线就很相似了。有两种绘制折线的方法，一种是用LineGeometry实现，另一种是用PolyLine实现。例13-3：根据正弦函数计算出多个点，然后将这些点用直线依次相连。1713.2.2基本图形矩形RectangleGeometry类使用System.Windows命名空间下的Rect结构来定义矩形的轮廓，该结构指定矩形的左上角位置以及矩形的高度和宽度，另外还可以通过设置RadiusX和RadiusY属性创建圆角矩形。例13-4：演示矩形的基本绘制方法。运行效果如图所示。1813.2.2基本图形椭圆EllipseGeometry类通过中心点（Center属性）、x半径（RadiusX属性）和y半径（RadiusY）来定义椭圆的形状。当x半径和y半径相同时，其效果就是一个圆。例13-5：演示椭圆的基本绘制方法。运行效果如图所示。1913.2.2基本图形多边形多边形是由3条或3条以上的边组成的闭合图形，包括规则多边形和不规则多边形。有两种技术来实现，一种是用PathGeometry或者StreamGeometry，另一种是用继承自Shape的Polygen或者PolyLine。例13-6：演示用C#实现任意数量的规则多边形的基本绘制方法。运行效果如图所示。2013.2.2基本图形曲线曲线包括椭圆弧、二次贝塞尔曲线、三次贝塞尔曲线等。例13-7：演示椭圆弧、二次贝塞尔曲线、三次贝塞尔曲线的基本绘制方法。运行效果如图所示。2113.2.3复合图形组合图形（GeometryGroup）GeometryGroup类创建它所包含的Geometry对象的组合体，但不合并其包含的区域。可以向GeometryGroup中添加任意数量的Geometry对象，然后再用Path将组合后的结果呈现出来。GeometryGroup的FillRule属性获取或设置如何组合GeometryGroup中所包含对象的相交区域。例13-8：演示GeometryGroup的基本用法以及FillRule的含义。运行效果如图所示。2213.2.3复合图形合并图形（CombinedGeometry）CombinedGeometry对象和该对象的Combine方法用布尔操作合并图形，使用它可以合并两个几何图形所定义的区域，合并后没有封闭区域的Geometry对象将被丢弃。例13-9：演示CombinedGeometry的基本用法。2313.2.4将格式化文本转换为图形在有些应用中，我们可能需要将文本字符串转换为离散的路径几何图形，然后再对其做进一步的处理，例如绘制空心字、沿文字的笔画进行移动的动画等。将文本转换为Geometry对象的关键是使用FormattedText对象，该对象用于创建格式化的文本。2413.2.4将格式化文本转换为图形例13-10：演示如何将格式化文本转换为Geometry对象，并演示如何利用它绘制空心字。运行效果如图所示。2513.3图像处理图像处理简介图像是指按照某种格式编码存储的图，一般用与设备无关的像素保存图像中的每个点的信息（红色通道、蓝色通道、绿色通道以及透明度），图像编码格式不同，每个像素点占用的字节数也不一定相同。图像处理是指对各种图像格式的文件以及绘图结果进行处理，包括图像的编码、解码、元数据存储和读取、创建、加载、保存、压缩、解压缩、显示、绘制、剪裁、合并、平铺、拉伸、旋转、缩放、蒙板以及将矢量图形转换为图像等。2613.3.1图像处理常用类BitmapSource类用于对图像进行解码和编码，它是WPF图像处理管线的基本构造块。该类表示具有特定大小和分辨率的单个不变的像素集，可以用它表示多帧图像中的单个帧，也可以表示在BitmapSource上执行转换的结果。BitmapFrame类BitmapFrame是BitmapSource派生类中比较常用的类之一，该类用于存储图像格式的实际位图数据。利用BitmapFrame能将各种格式的图像转换为位图，然后对其进行处理，比如灰度处理、旋转、缩放、裁切等。2713.3.1图像处理常用类BitmapImage类BitmapImage也是从BitmapSource类派生类的，它是一个为了加载XAML而优化的专用BitmapSource。BitmapImage的特点是只加载自动将缩放后的结果，而不是先在内存中缓存原始大小的图像然后再对其进行缩放，所以该方式与直接指定Image的宽度或高度相比能大大节省内存的容量。2813.3.1图像处理常用类从BitmapSource继承的其他类ColorConvertedBitmap类：更改BitmapSource的颜色空间。FormatConvertedBitmap类：为BitmapSource提供像素格式转换功能。CroppedBitmap类：裁剪一个BitmapSource。CachedBitmap类：为BitmapSource提供缓存功能。RenderTargetBitmap类：将Visual对象转换为位图。WriteableBitmap类：提供一个可写入并可更新的BitmapSource。2913.3.2图像的编码和解码WPF提供了多种格式的图像编码器和解码器30图像格式文件扩展名编码器解码器位图图像（BMP）.bmpBmpBitmapEncoderBmpBitmapDecoder联合图像专家组图像（JPEG）.jpgJpegBitmapEncoderJpegBitmapDecoder可移植网络图形图像（PNG）.pngPngBitmapEncoderPngBitmapDecoder标记图像文件格式图像（TIFF）.tifTiffBitmapEncoderTiffBitmapDecoder图形交换格式图像（GIF）.gifGifBitmapEncoderGifBitmapDecoderWindowsMedia照片图像.wdpWmpBitmapEncoderWmpBitmapDecoder13.3.2图像的编码和解码图像格式编码图像编码是指将图像数据转换为特定图像格式的过程。例13-11：演示TIFF图像编码以及保存图像的基本用法。运行效果如图所示。3113.3.2图像的编码和解码图像格式解码图像格式解码是指将某种图像格式转换为可以由系统使用的图像数据。解码后，即可以对其进行显示、处理或编码为其他格式。例13-12：演示图像解码以及获取原始图像信息的基本用法。运行效果如图所示。3213.3.3像素格式转换（FormatConvertedBitmap）FormatConvertedBitmap类为BitmapSource提供像素格式转换的功能。例13-13：演示如何将彩色图像转换为灰度图和黑白图。运行效果如图所示。3313.3.4旋转裁切和缩放图像TransformedBitmap旋转图像，Image或者CroppedBitmap裁切图像，ScaleTransform缩放图像。旋转图像：位图图像仅支持90度增量的旋转，即只能选择以下旋转角度之一：0、90、180、270。如果希望让图像旋转任意角度，应该用画笔变换来实现。裁切图像：如果只想调整图像的一部分，可以用Image或者CroppedBitmap的Clip属性实现；如果需要编码和保存裁切过的图像，应该用CroppedBitmap来实现。缩放图像：利用TransformedBitmap可缩放图像。也可以用画笔缩放实现。3413.3.4旋转裁切和缩放图像例13-14：演示旋转、裁切和缩放图像并将处理结果保存到新的图像文件中的基本用法。运行效果如图所示。3513.3.5自动播放和逐帧绘制GIF动画GIF和TIFF都可以包含多帧图像，将GIF包含的多帧图像逐帧显示出来。其意义在于：既然可以将每一帧都单独读出来，当然也能对每一帧的图分别进行处理。例13-15：利用GifBitmapDecoder解码器，将所有图像逐帧显示出来。运行效果如图所示。3613.3.6其他基本的图像处理技术将图像作为缩略图加载将图像作为缩略图加载时，可利用BitmapImage的DecodePixelWidth属性设置缩略图的大小，这样可以减少加载图像所需的内存。将一种图像格式转换为另一种图像格式如果希望将一种图像格式转换为另一种图像格式，只需要先从解码器中获取图像信息，然后用编码器设置相应的帧并保存图像信息即可。3713.3.6其他基本的图像处理技术图像处理的一般原则应始终将图像解码为所需的大小而不是图像的原始大小。如有可能，应尽可能将多个图像组合成多帧图像再加载，而不是分别加载和显示单个文件。3813.4利用画笔绘制图形图像——TileBrush类基本组件TileBrush类包括三个主要的组件：内容、图块和输出区域。内容如果画笔为ImageBrush，则表示“内容”为图像。此时用ImageSource属性指定ImageBrush的内容。如果画笔为DrawingBrush，则表示“内容”为绘图。此时用Drawing属性指定DrawingBrush的内容。如果画笔为VisualBrush，则表示“内容”为可视元素。此时用Visual属性指定VisualBrush的内容。39TileBrush类图块图块是用“内容”构造出来的基本块。TileBrush提供了一个Stretch属性，该属性用Stretch枚举指定如何用“内容”来构造图块。输出区域输出区域指如何用“图块”填充目标区域。TileBrush提供了一个TileMode属性，该属性用TileMode指定如何填充目标区域，包括平铺、水平反转、垂直翻转等。40TileBrush类拉伸图块（Stretch）从TileBrush继承的画笔类型都可以用Stretch属性控制如何拉伸“图块”。该属性用Stretch枚举来表示，可用的枚举值有：None：图块保持其原始大小。Fill：调整图块的大小以填充目标尺寸，不保留纵横比。Uniform：在保留图块原有纵横比的同时调整图块的大小，以适合目标尺寸。UniformToFill：在保留图块原有纵横比的同时调整图块的大小，以填充目标尺寸。如果目标矩形的纵横比与图块的纵横比不相同，则对图块进行剪裁（将目标矩形尺寸以外的部分裁剪掉）以适合目标矩形的大小。41TileBrush类例13-16：演示用图像画笔拉伸图像的基本用法。运行效果如图所示。42TileBrush类平铺方式（TileMode）从TileBrush继承的画笔类型都可以用TileMode属性控制如何用“图块”填充“输出区域”。TileMode属性用TileMode枚举来定义，可用的枚举值有：None：不平铺。仅绘制基本图块。Tile：平铺。绘制基本图块，并通过重复基本图块来填充剩余的区域，使一个图块的右边缘靠近下一个图块的左边缘，底边缘和顶边缘也是如此。FlipX：与Tile相同，只不过图块的交替列水平翻转。FlipY：与Tile相同，只不过图块的交替行垂直翻转。FlipXY：FlipX和FlipY的组合。43TileBrush类例13-17：演示用图像画笔填充图像的基本用法。运行效果如图所示。44TileBrush类Viewport和ViewportUnitsTileBrush默认生成单个图块并拉伸此图块以完全填充输出区域，Viewport属性决定了基本图块的大小和位置，ViewportUnits属性决定了Viewport是使用绝对坐标还是相对坐标。Transform和RelativeTransformTileBrush类提供了两个变换属性：Transform和RelativeTransform。使用这些属性可以旋转、缩放、扭曲和平移画笔的内容。45TileBrush类例13-18：演示对画笔进行变换的基本用法。运行效果如图所示。4613.4.2图像画笔（ImageBrush）图像画笔（ImageBrush）是一种“内容”为图像的画笔，一般用它将图像绘制到控件的背景或者轮廓内，或者用图像作为基本图块，然后平铺到某个区域内。例13-19：演示图像画笔的基本用法。运行效果如图所示。4713.4.3绘制画笔（DrawingBrush）DrawingBrush使用Drawing派生类来绘图。这种画笔可将绘图对象（图形、图像、文本、视频）作为“内容”绘制到某个区域。在DrawingBrush的Drawing属性中，可使用以下类定义要绘制的内容：GeometryDrawing：用图形填充一个区域。ImageDrawing：用图像填充一个区域。DrawingGroup：将各种绘图结果组合在一起。DrawingImage：将用Drawing绘制的结果作为图像来处理。4813.4.3绘制画笔（DrawingBrush）绘制图形（GeometryDrawing）GeometryDrawing类使用指定的画笔（Brush属性）和钢笔（Pen属性）来绘制Geometry，

Bru