WPF图形图像编程实用教案

1、 能够使用WPF技术编写图形图像程序 掌握三类(sn li)绘制图形的方法 掌握画笔、画刷绘图形工具 能够进行图形变换 能够如何处理图像和剪贴板 了解WPF 3D图形 学习(xux)目的第1页/共153页第一页，共154页。主要(zhyo)内容 5.1 WPF和GDI 5.2 常用的结构 5.3 使用Shape派生类 5.4 使用Drawing派生类 5.5 使用Visual类派生类 5.6 Pen类和Brush类 5.7 图形变换(binhun) 5.8 位图效果 5.9 处理图像 5.10 图像剪贴板功能 5.11 3D图形 5.12 DirectX 3D和XNA介绍 第2页/共153页第

2、二页，共154页。5.1 WPF和GDI WPF和GDI的图形图像编程方法有很大不同。 GDI一般采用即时模式显示图形和图像，当窗口图形和图像被破坏后，程序员要自己在OnPaint事件处理函数中恢复被破坏的图形和图像。而WPF采用保留模式显示图像，一般由WPF系统自己恢复被破坏的图形和图像。 WPF控件外观一般用矢量图形实现，控件能够(nnggu)记录生成控件矢量图形的方法，当外观需要恢复时自动调用这些方法重现自己外观。这样做的好处是图形外观和显示器分辨率无关，能够(nnggu)自适应不同分辨率显示器。 第3页/共153页第三页，共154页。 WPF提供了三类显示图形的方法，它们是： Syst

3、em.Windows.Shapes.Shape类派生类：这些类都是控件，设置必要的属性，就可以绘制所需要的图形。这类控件最容易使用，但是由于这些控件支持布局和数据绑定等功能，能够响应较多的事件，使用这些控件将会大大增加应用程序的资源消耗，一般只用来在窗口显示少量的图形。 System.Windows.Media.Drawing类派生类：这些类都支持XAML，能够实现Shape类派生类相同的功能。这类控件只支持少量的事件及少量的功能，使用这类控件将能极大(j d)减少资源消耗，相对于Shape类派生类要写较多的XAML标记。 System.Windows.Media.Visual类派生类：这些类

4、对XAML支持有限，绘制图形方法类似GDI+，一般要编写大量的代码，使用类的方法绘制图形，其占用的资源最少 第4页/共153页第四页，共154页。5.2 常用(chn yn)的结构 5.2.1 Point和Size结构点结构System.Windows.Point定义点的位置，点结构有两个成员：X，Y，表示点的x轴和y轴的坐标。其构造函数如下：public Point(double x,double y)System.Windows.Size结构用属性Width和Height描述(mio sh)对象宽和高。其构造函数如下：public Size(double width,double heig

5、ht) 第5页/共153页第五页，共154页。5.2.2 Rect结构(jigu) 矩形结构System.Windows.Rect，用来描述一个矩形，其常用属性和方法如下： 属性X、Y：矩形结构左上角的x、y坐标。 只读属性Left、Top：矩形结构左上角的x、y坐标。 只读属性Right和Bottom：矩形结构对象右下角的x坐标和y坐标。 属性Width、Height和Size：矩形结构对象的宽度(kund)和高度。 构造函数Rect(Point location, Size size)：参数1代表矩形结构左上角点结构，参数2是表示代表矩形宽和高的Size结构。第6页/共153页第六页，共1

6、54页。 构造函数Rect(Double x, Double y, Double width, Double height)：参数依次为矩形左上角x坐标、y坐标、宽和高。还有其他三个构造函数，请参考帮助系统有关内容。 静态方法public static Rect Intersect(Rect rect1,Rect rect2)：返回Rect结构，是两个参数表示的矩形结构的交集。如果(rgu)没有交集，则返回空。交集概念见5.4.4节。 方法public void Intersect(Rect rect)：得到调用该方法的矩形结构对象和参数表示的矩形结构的交集。 静态方法public stati

7、c Rect Union(Rect rect1,Rect rect2)：返回Rect结构，是两个参数表示的矩形结构的并集。并集概念见5.4.4节。参数2也可为Point。 方法public bool Contains(Point或Rect)：判断参数表示的点或矩形结构是否在调用该方法的矩形结构对象中。第7页/共153页第七页，共154页。5.2.3 Color结构(jigu) System.Windows.Media.Color结构用来表示颜色。任何一种颜色可以用透明度(a)，蓝色(b)，绿色(g)，红色(r)合成。Color结构支持两种色彩(sci)空间sRGB和scRGB。sRGB用无符号

8、32位数代表一种颜色，红色、绿色、蓝色以及透明度各占一个字节，透明度等于0为完全透明，255为完全不透明，完全不透明红色用16进制数表示为：#ffff0000。scRGB代表的颜色中的红色、绿色、蓝色以及透明度分别用0-1之间的Single类型数表示，透明度等于0.0为完全透明，1.0为完全不透明，红色、绿色、蓝色全为0.0表示黑色，全为1.0表示白色，不透明红色表示为：sc#1.0,1.0,0.0,0.0。第8页/共153页第八页，共154页。 其常用属性和方法如下: 属性R、G、B和A：分别(fnbi)表示sRGB空间的红色、绿色、蓝色以及透明度。 属性scR、scG、scB和scA：分别

9、(fnbi)表示scRGB空间的红色、绿色、蓝色以及透明度。 public static Color FromRgb(byte r,byte g,byte b)：得到不透明sRGB颜色。 public static Color FromArgb(byte a,byte r,byte g,byte b)：sRGB颜色。 public static Color FromScRgb(float a,float r,float g,float b)：scRGB颜色。 public static bool AreClose(Color color1,Color color2)：由于scRGB颜色可能无法

10、完全相等，用此函数比较两个scRGB颜色是否近似相等。第9页/共153页第九页，共154页。5.3 使用(shyng)Shape派生类 Shape派生类包括(boku)画线段控件Line、画矩形控件Rectangle、画圆或椭圆控件Ellipse、画多条线段控件Polyline、画由多条线段组成的闭合图形控件Polygon和画任意曲线控件Path。 5.3.1 公用属性 Fill：Brush类对象，指定封闭图像的填充颜色。 Stroke: Brush类对象，指定线的颜色或封闭图形外轮廓线的颜色。 StrokeThickness: 指定线的宽度或封闭图形外轮廓线的宽度。 GeometryTran

11、sform：对图形位置进行变换。 第10页/共153页第十页，共154页。5.3.2 画线控件Line 控件Line用来画线段，属性X1和Y1为线段起点，属性X2和Y2为线段终点。【例5.1】画一条线段的XAML标记如下，注意实际程序必须(bx)添加省略的标记。 第11页/共153页第十一页，共154页。5.3.3 画矩形(jxng)控件Rectangle 控件Rectangle可用来画各种矩形，属性Width、Height、RadiusX和RadiusY分别(fnbi)是矩形的宽、高、圆角矩形的圆角x 轴半径和y 轴半径。x 轴半径要小于等于Width二分之一，y 轴半径要小于等于Heigh

12、t二分之一，当二者都等于二分之一，则图形变为圆或椭圆。第12页/共153页第十二页，共154页。【例5.2】画矩形和圆角矩形的XAML标记(bioj)如下，如果Width=Height，为正方形。 第13页/共153页第十三页，共154页。【例5.3】用代码生成矩形(jxng)，为Grid控件添加属性Name=grid1，在窗体增加按钮，其事件函数如下，单击按钮，则出现一个黑轮廓线，内部填充天蓝色的正方形。private void button1_Click(object sender, RoutedEventArgs e) Rectangle myRect = new Rectangle()

13、; myRect.Stroke = Brushes.Black; myRect.Fill = Brushes.SkyBlue; myRect.Height = 50; myRect.Width = 50; RotateTransform rotateTransform1 = new RotateTransform(-45); myRect.RenderTransform = rotateTransform1; grid1.Children.Add(myRect); 第14页/共153页第十四页，共154页。【例5.4】绘制3个重叠的矩形，演示透明效果(xiogu)。将如下标记放到Grid标记中

14、。请读者仔细分析运行后不同位置为什么会产生相应颜色。 第15页/共153页第十五页，共154页。5.3.4 画圆或椭圆(tuyun)控件Ellipse 控件Ellipse画椭圆时如果Width=Height，则为圆。 【例5.5】本例用键盘4个箭头键推动一个红色圆，可以在窗体的4个方向上移动，当圆到了窗体边界，圆就不能继续移动了。 （1）创建WPF项目。放置Ellipse控件到Grid面板，拖动Ellipse控件向左上方移动，一直(yzh)到只有左方和上方的两根指示距离边界的线(图5.1)，修改Ellipse控件的控制边界颜色属性Stroke=Red，控制填充颜色属性Fill=Red。此时El

15、lipse控件XAML标记如下： 第16页/共153页第十六页，共154页。 （2）选中Window1窗体，为其增加KeyDown事件(shjin)函数如下： private void Window_KeyDown(object sender, KeyEventArgs e) double x1 = ellipse1.Margin.Left; double x2 = ellipse1.Margin.Top; switch (e.Key) case Key.Left: if (ellipse1.Margin.Left 0) x1 -= 1; break; case Key.Right: if (

16、ellipse1.Margin.Left+100) this.Width ) x1 += 1; break; 第17页/共153页第十七页，共154页。 case Key.Down: if (ellipse1.Margin.Top+100 0) x2 -= 1; break; ellipse1.Margin = new Thickness(x1, x2, 0, 0); （3）运行，可以(ky)用4个箭头键移动红色圆。第18页/共153页第十八页，共154页。【例5.6】Windows画图程序用拖动鼠标方法画椭圆或圆，实现的方法是以鼠标左键单击处作为矩形的一个顶点，记为顶点1，该点坐标不改变。拖

17、动鼠标移动到另一位置，以此位置作为矩形另一顶点，记为顶点2，顶点1和顶点2在矩形对角线的两端。绘制由顶点1和顶点2定义(dngy)的矩形的内切椭圆，以显示要绘制椭圆的位置，这个椭圆的位置随着鼠标的移动而改变。鼠标抬起，以鼠标抬起位置为顶点2，用指定的颜色绘制由顶点1和顶点2定义(dngy)的矩形的内切椭圆，作为最终图形。具体步骤如下。（1）创建WPF项目。放置Ellipse控件到面板中，拖动Ellipse控件向左上方移动，一直到只有左方和上方的两根指示距离边界的线。此时Ellipse控件XAML标记见例5.5。（2）为面板增加名字属性：（3）为Window1类增加变量：double x, y;

18、 bool mark = false;第19页/共153页第十九页，共154页。（4）在Window1类中增加MakeRectangle方法，参数(x1,y1)是鼠标左键单击处点的位置，作为矩形的一个(y )顶点，(x2,y2)是拖动鼠标移动到另一点的位置，返回一个(y )数组，4个元素按顺序分别是定义所画椭圆或圆矩形的左上角x、y座标，矩形宽和高。方法如下：private double MakeRectangle(double x1, double y1,double x2,double y2) double top, left, bottom, right; top = y1 = y2 ?

19、 y1 : y2; left = x1 y2 ? y1 : y2; right = x1 x2 ? x1 : x2; double xs = left, top, right-left , bottom-top ; return xs;第20页/共153页第二十页，共154页。 （5）为Window1事件MouseDown、MouseUp、MouseMove增加(zngji)事件处理函数如下： private void Window_MouseDown(object sender, MouseButtonEventArgs e) if (e.LeftButton = MouseButtonSt

20、ate.Pressed) ellipse1.Visibility = Visibility.Visible; Point position = e.GetPosition(grid1); x = position.X; y = position.Y; ellipse1.Width = 1; ellipse1.Height = 1; ellipse1.Margin = new Thickness(x, y, 0, 0); mark = true; 第21页/共153页第二十一页，共154页。private void Window_MouseMove(object sender, MouseEve

21、ntArgs e) if (mark ) Point position = e.GetPosition(grid1); double pX = position.X; double pY = position.Y; double xs = MakeRectangle(x, y, pX, pY); ellipse1.Width = xs2; ellipse1.Height = xs3; ellipse1.Margin = new Thickness(xs0, xs1, 0, 0); private void Window_MouseUp(object sender, MouseButtonEve

22、ntArgs e) mark = false; （6）编译(biny)运行，在Window1控件中拖动鼠标可以画圆或椭圆。第22页/共153页第二十二页，共154页。5.3.5 控件Polyline和Polygon Polyline类的属性Ponints是点结构数组，将数组元素Ponints0和Ponints1、Ponints1和Ponints2、等点连接为多条线段。Polygon和Polyline类功能类似，但将最后一点和开始点连接为线段，由多条线段组成封闭图形(txng)。实际上如设置类Polyline属性IsClose=true，也能完成Polygon类相同功能。XAML标记例子： 【例

23、5.7】在Windows画图程序中，可以拖动鼠标画任意曲线。本例实现用拖动鼠标左键在主窗体中画曲线。每条曲线都是由若干很短的线段组成。鼠标左键在按下状态，移动鼠标，每次移动很短距离，画出这段线段，所有这些线段组合起来，形成一条曲线。第23页/共153页第二十三页，共154页。 （1）创建WPF项目。在面板中增加Polyling控件XAML标记。 （2）为Window1类增加如下(rxi)变量： PointCollection myPoints=new PointCollection(); bool mark = false; （3）为Window1控件增加事件处理函数： private voi

24、d Window_MouseDown(object sender, MouseButtonEventArgs e) myPoints.Clear(); Point p1 = e.GetPosition(grid1); myPoints.Add(p1); mark = true; 第24页/共153页第二十四页，共154页。private void Window_MouseMove(object sender, MouseEventArgs e) if (mark) Point p1 = e.GetPosition(grid1); myPoints.Add(p1); polyline1.Poin

25、ts = myPoints; private void Window_MouseUp(object sender, MouseButtonEventArgs e) mark = false; （4）运行(ynxng)，在主窗体中拖动鼠标左键可以画线。第25页/共153页第二十五页，共154页。5.3.6 控件Path 使用Path控件可以画任意曲线。 【例5.8】使用Path控件例子。在Grid标记(bioj)中增加如下标记(bioj)： 第26页/共153页第二十六页，共154页。 属性Data也可采用路径标记语法赋值，上例中第二个Path控件采用路径标记语法生成贝塞尔曲线，依靠XMAL解析

26、器内部类型(lixng)转换器自动将路径标记转换为Geometry 对象。该标记中，逗号前后的两个数值表示一个点，点与点之间用空格分开，字符M或m表示Path起点，L或l表示线段终点(起点是当前点)，H或h后的一个数值(不是点)表示x坐标值，表示当前点到这个x坐标的水平线段，V或v后的一个数值表示y坐标值，表示当前点到这个y坐标的垂直线段，C或c表示三次贝塞尔曲线控制点，Q或q表示二次贝塞尔曲线控制点，T或t表示平滑贝塞尔曲线控制点，A或a表示椭圆弧指令，Z或z表示Path终点。第27页/共153页第二十七页，共154页。5.4 使用(shyng)Drawing派生类 5.4.1 绘图基本方法

27、GeometryDrawing类用来绘制各种形状图形，其属性Geometry用来描述图形的形状，属性Brush用来指定填充封闭图形的刷子，属性Pen指定绘制轮廓的笔。该类必须放在承载容器才能显示所绘制的图形，承载容器必须是FrameworkElement 类的派生类，例如窗口(chungku)或其它内容控件，常用的用法是GeometryDrawing类对象放到DrawingImage控件中，作为Image控件的数据源。 第28页/共153页第二十八页，共154页。【例5.9】本例绘制椭圆，将如下标记放到Grid标记中。这是Drawing类绘图基本(jbn)方法。 第29页/共153页第二十九页

28、，共154页。【例5.10】可以使用XAML标记或代码(di m)绘制图形。public Window1() InitializeComponent(); EllipseGeometry ellipse2 = new EllipseGeometry(); ellipse2.RadiusX = 45; ellipse2.RadiusY = 20; ellipse2.Center = new Point(50, 50); GeometryDrawing aDrawing = new GeometryDrawing(); aDrawing.Geometry = ellipse2; aDrawing.

29、Brush = Brushes.Orange; aDrawing.Pen = new Pen(Brushes.Black, 10.0); DrawingImage di = new DrawingImage(aDrawing); Grid grid = new Grid(); Image image = new Image(); grid.Children.Add(image); image.Source = di; this.Content = grid; 第30页/共153页第三十页，共154页。5.4.2 Geometry类 【例5.11】本例绘制圆角矩形，将如下XAML标记替换例5.9

30、相应(xingyng)XAML标记。 【例5.12】本例绘制一条线段，将如下XAML标记替换例5.9相应(xingyng)XAML标记。 第31页/共153页第三十一页，共154页。【例5.13】本例使用PathGeometry类绘制两条线段，将如下XAML标记(bioj)替换例5.9相应XAML标记(bioj)。 第32页/共153页第三十二页，共154页。【例5.14】本例使用多条首尾连接(linji)线段类PolyLineSegment属性Points路径标记语法重做上例。用如下XAML标记替换上例两条线段的XAML标记，显示效果相同。 【例5.15】如果有两组不连接(linji)或不是

31、首尾连接(linji)的图形，可以放到两个PathFigure标记中。将如下XAML标记替换例5.9相应XAML标记。 第33页/共153页第三十三页，共154页。 第34页/共153页第三十四页，共154页。5.4.3 GeometryGroup类 如同时绘制多个RectangleGeometry、EllipseGeometry、LineGeometry或PathGeometry图形，就必须将它们放到标记GeometryGroup中。在标记中，每个图形都可以使用属性Transform分别实现(shxin)旋转、缩放、扭曲和平移等变换。 【例5.16】用如下标记替换例5.9相应标记。 第35页

32、/共153页第三十五页，共154页。5.4.4 CombinedGeometry类 区域是封闭曲线所围内部平面部分。区域可以是简单(jindn)的（如单个矩形内部）或复杂的（如多边形或闭合曲线的组合）。图5.6中的左边第1图显示了两个区域相交，一个矩形和一个用曲线画出的封闭图形。可以通过合并现有两个区域来创建复杂区域。两个区域的交集(Intersect)是同时属于两个区域的所有点的集合，并集(Union)是多个区域的所有点的集合，两个区域并集减去这两者的交集，即图5.6中的左数第4图显示的黑色区域，称作异或(Xor)。可从矩形区域除去和另一个区域的交集，如图5.6中右数第1图区域，称作Excl

33、ude。 第36页/共153页第三十六页，共154页。【例5.17】用如下XAML标记(bioj)替换例5.9相应XAML标记(bioj)，从Geometry1标记(bioj)内的椭圆除去和Geometry2标记(bioj)内的椭圆相交部分。 第37页/共153页第三十七页，共154页。5.5 使用(shyng)Visual类派生类 Visual类是一个抽象类，其派生类DrawingVisual 是一个轻量(qn lin)绘图类，用于呈现形状、图像或文本，它不提供布局、输入、焦点或事件处理功能，从而能够改善其性能。必须将DrawingVisual 对象放到一个派生自 FrameworkElem

34、ent 类的宿主容器，例如窗体、Image类对象、Panel类对象等。类DrawingVisual对XAML支持很少，大部分图形要用代码实现。 第38页/共153页第三十八页，共154页。5.5.1 绘图(hu t)基本方法 【例5.18】使用DrawingVisual绘制一个(y )椭圆和矩形。其代码如下：public partial class Window1 : Window private VisualCollection _children; DrawingVisual dv = new DrawingVisual(); public Window1() _children = ne

35、w VisualCollection(this); InitializeComponent(); _children.Add(dv); using (DrawingContext dc = dv.RenderOpen() Rect rect = new Rect(new Point(100, 100), new Size(100, 50); 第39页/共153页第三十九页，共154页。 dc.DrawRectangle(Brushes.Blue, (Pen)null, rect); dc.DrawEllipse(Brushes.Red, (Pen)null, new Point(100, 50

36、), 100, 50); protected override int VisualChildrenCount get return _children.Count; protected override Visual GetVisualChild(int index) if (index _children.Count) throw new ArgumentOutOfRangeException(); return _childrenindex; 第40页/共153页第四十页，共154页。5.5.2 DrawingContext类方法(fngf) 【例5.19】本例用DrawDrawing方

37、法绘制使用GeometryDrawing方法生成的图形(txng)。用如下语句替换例5.18的Using语句中代码。EllipseGeometry ellipse2 = new EllipseGeometry();ellipse2.RadiusX = 45;ellipse2.RadiusY = 20;ellipse2.Center = new Point(50, 50);GeometryDrawing aDrawing = new GeometryDrawing();aDrawing.Geometry = ellipse2;aDrawing.Brush = Brushes.Orange;dc.

38、DrawDrawing(aDrawing); 第41页/共153页第四十一页，共154页。【例5.20】本例介绍DrawGeometry方法用法。用如下语句(yj)替换例5.18的Using语句(yj)中代码。dc.DrawGeometry(Brushes.Red, (Pen)null, Geometry.Parse(M 0,0 0,100 100,100 Z); 第42页/共153页第四十二页，共154页。5.6 Pen类和Brush类 5.6.1 Pen类Pen类包括如下属性(shxng)：Thickness和 Brush：笔的粗细和笔使用的刷子。DashStyle：默认值为实线，也可为虚

39、线或点划线，其子属性(shxng)Dashes是一个数组，表示虚线或点划线样式，例如Dashes=a,b中的a和b是数字，a表示是一个宽为Thickness (笔的粗细),长为(a+1)*Thickness 的线，其后为空格，按照此规律重复，重复周期长度为(a+b)* Thickness。因此Dashes=0,1表示实线。如果Dashes=a1,b1,a2,b2，则(a1,b1)和(a2,b2)意义同前，重复周期长度为(a1+b1+a2+b2)*Thickness。数组可以有多项，但必须为偶数项。 第43页/共153页第四十三页，共154页。【例5.21】为字符增加虚下划线的XAML标记如下，

40、注意(zh y)省略了一些标记。带下划线字符 第44页/共153页第四十四页，共154页。 DashCap、EndLineCap和StartLineCap：前两个属性是曲线末端的形状，第3个属性是曲线开始的形状，可以是枚举类型PenLineCap的值：Flat(一个未超出直线上最后(zuhu)一点的线帽，等同于无线帽)、Square(一个高度等于直线粗细、长度等于直线粗细一半的矩形)、Round 一个直径等于直线粗细的半圆形)、Triangle(一个底边长度等于直线粗细的等腰直角三角形)。 LineJoin：两条线段连接处的形状。可以是枚举类型PenLineJoin的值：Miter(常规角顶点

41、)、Bevel(斜角顶点)、Round(圆角顶点)。第45页/共153页第四十五页，共154页。【例5.22】本例显示(xinsh)Pen类属性LineJoin、EndLineCap和StartLineCap的具体形状。将如下XAML标记增加到Grid记中，运行效果见图 。第46页/共153页第四十六页，共154页。5.6.2 SolidColorBrush画刷 又称作单色画刷，使用单一颜色填充封闭区域。一般控件属性Background，Shape类属性Fill，GeometryDrawing类属性Brush是一个画刷，如果令其为单一颜色值，实际上设置该属性为SolidColorBrush单色

42、画刷类对象，例如：。单色画刷类SolidColorBrush最常用的属性Color，表示画刷的颜色。 【例5.23】使用SolidColorBrush单色画刷例子。将XAML标记(bioj)放到Grid标记(bioj)中。 第47页/共153页第四十七页，共154页。 又称作颜色线形渐变画刷。其常用属性如下： StartPoint和EndPoint：Point结构对象(duxing)，颜色将沿着两点连线渐变。 GradientStops：GradientStop 类对象(duxing)的集合。GradientStop 类表示渐变的位置和颜色。位置是StartPoint和EndPoint两点连线

43、用分数表示的相对值，例如，0.5表示连线中间位置。例如下例中，从连线开始(0.0)到四分之一处(0.25)，从黄色渐变到红色，从四分之一处到连线终点，从红色渐变到蓝色。 5.6.3 LinearGradientBrush画刷 第48页/共153页第四十八页，共154页。【例5.24】本例绘制(huzh)用颜色线形渐变画刷填充的矩形。将以下标记放到Grid标记中。 第49页/共153页第四十九页，共154页。【例5.25】本例用代码(di m)实现上例相同功能。Rectangle diagonalFillRectangle = new Rectangle();diagonalFillRectan

44、gle.Width = 200;diagonalFillRectangle.Height = 100; LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();myLinearGradientBrush.StartPoint = new Point(0, 0);myLinearGradientBrush.EndPoint = new Point(1, 1);myLinearGradientBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0);m

45、yLinearGradientBrush.GradientStops.Add(new GradientStop(Colors.Red, 0.25); myLinearGradientBrush.GradientStops.Add(new GradientStop(Colors.Blue, 1.0);diagonalFillRectangle.Fill = myLinearGradientBrush;Content = diagonalFillRectangle; 第50页/共153页第五十页，共154页。5.6.4 RadialGradientBrush画刷 又称作颜色径向渐变画刷。其常用属性

46、如下： Center、RadiusX和RadiusY：定义一个(y )矩形，颜色沿该矩形的内切椭圆或圆径向渐变。三个属性意义分别是内切椭圆或圆的圆心、水平半径和垂直半径。 GradientOrigin：颜色渐变开始的点。 GradientStops：意义和LinearGradientBrush同名属性类似。 第51页/共153页第五十一页，共154页。【例5.26】本例绘制用颜色径向渐变(jinbin)画刷填充的矩形。将以下标记放到Grid标记中。 第52页/共153页第五十二页，共154页。5.6.5 ImageBrush画刷 【例5.27】本例在窗体中显示一幅(y f)图像。Stretch

47、属性参见5.6.6节。 第53页/共153页第五十三页，共154页。【例5.28】本例用代码在矩形中显示一幅图像(t xin)。在构造函数中增加如下语句。Rectangle exampleRectangle = new Rectangle();exampleRectangle.Width = 75;exampleRectangle.Height = 75;ImageBrush myBrush = new ImageBrush(); myBrush.ImageSource=new BitmapImage(new Uri(.p.bmp, UriKind.Relative);exampleRecta

48、ngle.Fill = myBrush;Content = exampleRectangle; 第54页/共153页第五十四页，共154页。5.6.6 TileBrush类 TileBrush类是ImageBrush、DrawingBrush和VisualBrush基类，其常用属性如下： Stretch：该属性是Stretch枚举类型，可以取值为：None、Fill、Uniform、UniformToFill。 Viewport 和 ViewportUnits：默认情况下TileBrush画刷完全填充被填充对象(duxing)，也可仅填充一部分。Viewport决定填充大小和位置，Viewpo

49、rtUnits决定了Viewport是使用绝对坐标还是相对坐标指定的。 TileMode：设置该属性可使画刷以基本图块为基础，形成多个基本图块，按照一定规律排列。该属性为TileMode枚举类型值，可取值为：None、Tile、FlipX、FlipY、FlipXY。 第55页/共153页第五十五页，共154页。【例5.29】本例将在矩形中显示(xinsh)4个基本图块。 第56页/共153页第五十六页，共154页。5.6.7 DrawingBrush画刷 【例5.30】本例在窗体中显示一幅图像(t xin)。注意基本块为被填充矩形左上角第一行的一黑、一白，第二行的一白、一灰4个小矩形，在X和Y

50、方向各重复4次。 第57页/共153页第五十七页，共154页。 第58页/共153页第五十八页，共154页。5.6.8 VisualBrush画刷 【例5.31】本例在窗体中显示4个按钮。属性TileMode、Viewport参见5.6.6节。 OK 第59页/共153页第五十九页，共154页。5.7 图形(txng)变换 5.7.1 Transform 派生类Transform类是实现二维变换功能的一些(yxi)类的基类，其派生类包括RotateTransform(旋转)、ScaleTransform (缩放)、SkewTransform (扭曲) 和TranslateTransform (

51、平移)。RotateTransform类：其常用属性包括Angle 、CenterX 和 CenterY ， 该类使图形围绕点(CenterX,CenterY)旋转指定的Angle角度。参见例5.2。ScaleTransform类：其属性CenterX、CenterY指定缩放操作的中心点，属性ScaleX 和 ScaleY 指定图形放大倍数。 第60页/共153页第六十页，共154页。【例5.32】本例定义了两个矩形，然后(rnhu)宽和高分别放大2倍，但属性CenterX、CenterY不同，注意两者的不同，图5.14中小矩形为初始位置，具体XAML标记如下： 第61页/共153页第六十一页

52、，共154页。 第62页/共153页第六十二页，共154页。 SkewTransform类：该类可用于对图像进行扭曲，其属性CenterX和CenterY指定扭曲的中心点，属性AngleX和AngleY指定沿x轴和y轴的扭曲角度。 【例5.33】本例将矩形沿X轴扭曲45度，XAML标记如下： TranslateTransform类：该类平移(pn y)图像，属性X和Y是沿X轴和Y轴方向距离。 第63页/共153页第六十三页，共154页。5.7.2 TransformGroup类 如果要对一个(y )图形完成多个变换，要将多个变换放到TransformGroup标记中。 【例5.34】本例将一个

53、(y )按钮沿Y轴方向放大3倍后，旋转45度，XAML标记如下：Click 第64页/共153页第六十四页，共154页。5.7.3 Matrix结构(jigu) 可以使用矩阵记录所使用的变换。mn矩阵是以m行和n列排列的一组数字，例如一个33矩阵记如图5.15。两个行、列相同的矩阵可以相加，例如：a33+b33=c33，矩阵相加运算的规则是：ci j=ai j+bi j，i和j为常量，即相对应位置的项相加。如果有矩阵am n和bn k，am n矩阵的列数等于bn k矩阵的行数，两个矩阵可以相乘，记为：am n*bn k=cm k，矩阵相乘的运算的规则是：ci j=(ai t*bt j)，其中，

54、i和j为常量，t为变量，初始值为1，最大值为n。如果将平面中的点视为12矩阵，则可通过将该点乘以22变换矩阵来变形该点。图5.16图是点(2,1)在X轴按比例3放大(fngd)，Y轴不变，变换结果如图5.17。图5.18表示点(2,1)旋转了90度。图5.19表示点(2,1)以x轴为对称轴的新点。假定要从点(2,1)开始，将其旋转90度，在x方向将其平移3个单位，在y方向将其平移4个单位。可通过先使用矩阵乘法再使用矩阵加法来完成此操作 第65页/共153页第六十五页，共154页。 图5.15 矩阵(j zhn) 图5.16 矩阵(j zhn)相乘图5.17 比例放大 图5.18 点的旋转(xu

55、nzhun) 图5.19 点的对称(duchn)变换 第66页/共153页第六十六页，共154页。图5.20 点的复合(fh)变换 图5.21用仿射矩阵(j zhn)表示的复合变换 图5.22 仿射矩阵(j zhn) 第67页/共153页第六十七页，共154页。 如果用矩阵2 1 1代表点(2,1)，用33变换矩阵记录两个变换，可用一个矩阵乘法代替以上的两个矩阵运算，见图5.21。注意运算结果(ji gu)的矩阵2 6 1代表点(2,6)，即点(2,1)映射到了点(2,6)。这个33矩阵叫作仿射矩阵，它和前边的两个22矩阵的关系如图5.22，其中第三列固定为0、0、1。WPF使用System.

56、Windows.Media.Matrix结构封装表示3行3列仿射矩阵，用来记录图形的复杂变换。Matrix结构用属性M11、M12、M21、M22、OffsetX和OffsetY表示33变换矩阵的各个项，其结构构造函数如下： public Matrix(double m11,double m12,double m21,double m22,double offsetX,double offsetY) 第68页/共153页第六十八页，共154页。 Matrix常用方法和属性如下(rxi)： 静态属性public static Matrix Identity get; ：得到单位矩阵。 方法Rot

57、ate(double angle)：使矩阵增加相对于原点顺时针旋转angle角度变换。 方法RotateAt(double angle,double centerX,double centerY)：使矩阵增加相对于点(centerX,centerY)顺时针旋转angle角度变换。 方法Scale(double scaleX,double scaleY)：使矩阵增加在X轴和Y轴方向对图形放大或缩小的变换。参数1指定在X轴方向缩放的值，参数2指定在Y轴方向缩放的值。 方法Translate(double offsetX,double offsetY)：使矩阵增加在（在）X轴和Y轴方向移动的变换。参

58、数1指定在X轴方向移动的值，参数2指定在Y轴方向移动的值。 方法Point Transform(Point point)：对point点进行变换，参数也可为点数组 第69页/共153页第六十九页，共154页。5.7.4 MatrixTransform 类 【例5.35】本例说明MatrixTransform.类使用方法，如下(rxi)XAML标记。Click 第70页/共153页第七十页，共154页。然后在构造函数最后增加如下(rxi)语句：Matrix m = myMatrixTransform.Matrix; m.Translate(-100, -100); myMatrixTransfo

59、rm.Matrix = m;第71页/共153页第七十一页，共154页。5.7.5 控件的变换(binhun) 所有控件都可以使用Transform 派生类完成变换，例5.36是对控件Button进行变换。所有控件都有属性LayoutTransform和RenderTransform，前者是在布局之前对控件进行变换，而后者则是在布局之后(zhhu)对控件进行变换在窗体显示。 【例5.36】本例使用LayoutTransform将Button2旋转30度，运行效果见图5.25。如果修改Button.LayoutTransform为Button.RenderTransform，运行效果如图5.26

60、。 第72页/共153页第七十二页，共154页。 Button1 Button2 Button3 第73页/共153页第七十三页，共154页。5.7.6 Drawing类图形(txng)变换 Geometry派生类RectangleGeometry、EllipseGeometry、LineGeometry、PathGeometry、GeometryGroup和CombinedGeometry都有属性Transform，可令其等于RotateTransform(旋转(xunzhun)、ScaleTransform (缩放)、SkewTransform (扭曲) 和TranslateTransfo