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