繪制圖形

繪制圖形

Rectangle

我們開篇先介紹一個之前用過，也是比較簡單的 Rectangle。簡單的矩形就只用定義長和寬了，但如果要有圓角的話呢，用 RadiusX 和 RadiusY 就好。那么 RadiusX 和 RadiusY 到底是什么呢？看看下圖就知道了。

<Rectangle Fill="Yellow" Width="300" Height="200" Stroke="Blue"
                   StrokeThickness="10" RadiusX="80" RadiusY="40"/>

和 Rectangle 類似，Border 也可以創(chuàng)建矩形，而且后者還可以有自對象以及會自動調(diào)整大小，前者只能有固定的大小哦。

Ellipse

看到這個名字大家應(yīng)該都知道是什么意思吧，如果要定義成圓的話讓 Height 和 Width 屬性相等即可。

那童鞋們都知道 ProgressRing 是由 6 個 Ellipse 組成的嗎，RadioButton 也是由 2 個同心的 Ellipse 組成的哦。

<Ellipse Fill="Blue" Height="200" Width="350"/>

Polygon

Polygon 則顯得比較自由，只需要定義出各個頂點(diǎn)，它就會將這些點(diǎn)連接起來。那么我們可能會有疑問，需不需要確定圖形的起始點(diǎn)和終點(diǎn)呢？答案是不用的，因?yàn)?Polygon 會自動將終點(diǎn)和起始點(diǎn)連接起來（它會假設(shè)圖形是閉合的）。

<Polygon Fill="Green" Points="0,0,100,0,100,100,0,100  "/>

如果要在后臺 C# 文件中來寫的話呢，原本的 Point 則由 PointCollection 來定義所有點(diǎn)后添加到一起。

Line

Line 的使用也比較簡單，但有一點(diǎn)要注意，必須設(shè)置好 Stroke 和 StrokeThickness 的屬性值，否則 Line 就不會顯示出來。原因很簡單，因?yàn)樗侵本€。

<Line Stroke="Red" StrokeThickness="10" X1="100" Y1="0" Y2="400" X2="400"/>

Path

最后上臺的自然是最厲害的啦，先上圖。

<Path Stroke="Gold"  StrokeThickness="7" 
              Data="M 0,0 C 100,200 50,200 40,150 H 200 V 100 "/>

前兩個屬性用過多次了，Data 卻還挺復(fù)雜的。這里有 3 個命令，M、C、H 和 V。如果按英文來記可能會容易些吧，分別是：Move、Control、Horizontal 和 Vertical。

那么，重頭戲來了，先看圖^_^

接著上代碼。

  <Path Stroke="Black" StrokeThickness="1" Fill="red">
                <Path.Data>
                    <GeometryGroup>           
                        <RectangleGeometry Rect="5,5 180,10" />
                        <RectangleGeometry Rect="5,5 95,180" />  
                        <RectangleGeometry Rect="90,175 95,180"/>   
                        <RectangleGeometry Rect="5,345 180,10" />    
                        <EllipseGeometry            
                            Center="95, 180" RadiusX="20"   
                            RadiusY="30"/>                         
                        <PathGeometry>
                            <PathGeometry.Figures>
                                <PathFigureCollection>
                                    <PathFigure IsClosed="true" StartPoint="50,50">
                                        <PathFigure.Segments>
                                            <PathSegmentCollection>
                                               <BezierSegment Point1="100,180" 
                                                Point2="125,100" Point3="150,50"/>                                                
                                            </PathSegmentCollection>
                                        </PathFigure.Segments>
                                    </PathFigure>                                     
                                    <PathFigure IsClosed="true" StartPoint="40,310">
                                        <PathFigure.Segments>
                                            <PathSegmentCollection>
                                               <BezierSegment Point1="90,180"  
                                               Point2="115,250"Point3="140,310"/>  
                                            </PathSegmentCollection>
                                        </PathFigure.Segments>
                                    </PathFigure>
                                </PathFigureCollection>
                            </PathGeometry.Figures>
                        </PathGeometry>                  
                    </GeometryGroup>
                </Path.Data>
            </Path>  

這張圖花了我好久時間呢，希望大家也都會畫，雖然作用不大，不過花著玩玩也不錯。

我在圖上大概加了一些標(biāo)注啦，另外 RectangleGeometry 的 Rect 屬性有 2 個值，后者是相對于前者增加的長度哦。

最難的部分是 BezierSegment，也就是貝賽斯曲線，其中 StartPoint 和 Point3 分別為起點(diǎn)和終點(diǎn)，而 Point1 和 Point2 不是路徑喲，只是給曲線的一個參考偏移方向。具體大家可以上維基百科看看。