WPF繪製幾何圖形

扣扣技術交流羣：460189483

一 WPF的基本圖形對象Shape

WPF圖形的基類是Shape，所有的wpf圖形類都是繼承於Shape。WPF提供了許多現成的Shape對象。 所有形狀對象都從Shape類繼承。 可用的形狀對象包括Ellipse、 Line 、Path、PolygonPolyline和Rectangle。 Shape對象共享以下公共屬性。

• Stroke：描述形狀輪廓的繪製方式。

• StrokeThickness：描述形狀輪廓的厚度。

• Fill：描述形狀內部如何繪製。

• 用於指定座標和頂點的數據屬性，以與設備無關的像素來度量。

因爲它們派生自UIElement，形狀對象可以在面板和大多數控件內使用。 該Canvas面板是創建複雜圖形的一個特別好的選擇，因爲它支持其子對象的絕對定位。

該Line類使您能夠在兩點之間畫一條線。 以下示例演示了指定線座標和筆劃屬性的幾種方法。

<Canvas Height="300" Width="300">

  <!-- Draws a diagonal line from (10,10) to (50,50). -->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    Stroke="Black"
    StrokeThickness="4" />

  <!-- Draws a diagonal line from (10,10) to (50,50)
       and moves it 100 pixels to the right. -->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    StrokeThickness="4"
    Canvas.Left="100">
    <Line.Stroke>
      <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
        <RadialGradientBrush.GradientStops>
          <GradientStop Color="Red" Offset="0" />
          <GradientStop Color="Blue" Offset="0.25" />
        </RadialGradientBrush.GradientStops>
      </RadialGradientBrush>
    </Line.Stroke>
  </Line>

  <!-- Draws a horizontal line from (10,60) to (150,60). -->
  <Line
     X1="10" Y1="60"
     X2="150" Y2="60"
     Stroke="Black"
     StrokeThickness="4"/>

</Canvas>

// Add a Line Element
myLine = new Line();
myLine.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
myLine.X1 = 1;
myLine.X2 = 50;
myLine.Y1 = 1;
myLine.Y2 = 50;
myLine.HorizontalAlignment = HorizontalAlignment.Left;
myLine.VerticalAlignment = VerticalAlignment.Center;
myLine.StrokeThickness = 2;
myGrid.Children.Add(myLine);

下圖顯示了渲染的Line。

儘管Line類確實提供屬性Fill，但設置它不起作用，Line因爲 沒有區域。

直線是最簡單的圖形。使用X1、Y1兩個屬性設置起點座標，X2、Y2兩個屬性設置終點座標。控制起點/終點座標可以實現平行、交錯等效果。Stroke（筆觸）屬性的數據類型是Brush（畫刷）。
再看下面一個例子：

<!--StrokeThickness：圖形輪廓的粗細度；StrokeDashArray：形狀輪廓的虛線間隙的樣式；StrokeStartLineCap/StrokeEndLineCap：直線始端/末端的圖形樣式，屬性值有Flat、Round、Square、Triangle-->

        <Line X1="10" Y1="20" X2="500" Y2="20" Stroke="Pink" StrokeThickness="10"/>                            //stroke是顏色，strokethinkness是線條的寬度
        <Line X1="10" Y1="50" X2="500" Y2="50" Stroke="Black" StrokeDashArray="3" StrokeThickness="1"/>        //strokeDashArray是虛線間隙
        <Line X1="10" Y1="80" X2="500" Y2="80" Stroke="Pink" StrokeEndLineCap="Flat" StrokeThickness="10"/>
        <Line X1="10" Y1="110" X2="500" Y2="110" Stroke="Pink" StrokeEndLineCap="Round" StrokeThickness="10"/>
        <Line X1="10" Y1="140" X2="500" Y2="140" Stroke="Pink" StrokeEndLineCap="Square" StrokeThickness="10"/>
        <Line X1="10" Y1="170" X2="500" Y2="170" Stroke="Pink" StrokeEndLineCap="Triangle" StrokeThickness="10"/>

效果如下：

 

另一個常見的形狀Ellipse是 。 通過定義Ellipse形狀Width和Height屬性創建 。 要繪製圓，請指定Ellipse其WidthHeight和 值相等的 。矩形，由筆觸（Stroke）和填充（Fill）構成。

<Ellipse Fill="Yellow" Height="100" Width="200" StrokeThickness="2" Stroke="Black"/>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

namespace SDKSample
{
    public partial class SetBackgroundColorOfShapeExample : Page
    {
        public SetBackgroundColorOfShapeExample()
        {
            // Create a StackPanel to contain the shape.
            StackPanel myStackPanel = new StackPanel();

            // Create a red Ellipse.
            Ellipse myEllipse = new Ellipse();

            // Create a SolidColorBrush with a red color to fill the
            // Ellipse with.
            SolidColorBrush mySolidColorBrush = new SolidColorBrush();

            // Describes the brush's color using RGB values.
            // Each value has a range of 0-255.
            mySolidColorBrush.Color = Color.FromArgb(255, 255, 255, 0);
            myEllipse.Fill = mySolidColorBrush;
            myEllipse.StrokeThickness = 2;
            myEllipse.Stroke = Brushes.Black;

            // Set the width and height of the Ellipse.
            myEllipse.Width = 200;
            myEllipse.Height = 100;

            // Add the Ellipse to the StackPanel.
            myStackPanel.Children.Add(myEllipse);

            this.Content = myStackPanel;
        }
    }
}

下圖顯示了渲染Ellipse的示例。

看下面一個例子，將矩形繪製成圓角的矩形

<Rectangle Width="200" Height="200" StrokeDashArray="3" Fill="Transparent" Stroke="Blue" StrokeThickness="15"
StrokeDashCap="Flat" StrokeDashOffset="100" StrokeEndLineCap="Triangle" StrokeMiterLimit="10"
StrokeLineJoin="Round"/>

虛線也叫破折號模式

StrokeDashArray屬性，裏面是一組double類型的數值，標識虛線，實線的長短，一個數字表示相同大小的虛部分和實部分，兩個數字表示虛部分和實部分的小小，再多表示第一段，第二段，第三段...

RadiusX和RadiusY屬性需要聯合使用表示角的角度，單獨設置不生效，RadiusX表示X軸方向角的彎曲度，RadiusY表示Y軸方向的彎曲度。

StrokeDashCap屬性用於設置虛線的時候，虛線段開除的形狀，無虛線不生效

StrokeDashOffset表示破折號開始的距離，偏移量

StrokeEndLineCap設置開始或結束處的形狀，閉合曲線無效

StrokeMiterLimit斜接長度與筆畫厚度之比的極限。這個值總是大於等於1的正數。

Polygon多邊形，
看下面一個例子：

<Polygon Points="100,150 400,150 140,320 250,50 360,320" StrokeThickness="2" Stroke="Pink"/>

 

Points屬性則代表了多邊形點的集合。

IsClosed 指定多邊形的最後一個點是否和第一個點閉合。爲了成爲一個多邊形。一般應該被設置爲true

ArcRoundness 屬性指定了從距離LineSegment終點多遠的距離開始彎曲，通常和UseRoundnessPercentage 一起使用。

UseRoundnessPercentage屬性指定了ArcRoundness 值是百分比還是一個固定的值。

例如：ArcRoundness 被設置成10，而且UseRoundnessPercentage 被設置成false，那麼彎曲將會在距離線段終點10的地方開始。而如果UseRoundnessPercentage 被設置成ture。則會是從線段終點10%的地方開始彎曲。

 

Polyline多線型，由多條首尾相接的直線組成。
看下面一個例子：

<Polyline Points="50,200 100,80 200,80 150,120" StrokeThickness="2" Stroke="Pink"/>

注意：

Polyline繪製折線在小角度（比如幾度）的時候會出現不連續的現象，形成拐角的兩條線段中有一段會超出，角度越小越明顯。

問題如下圖：

可以通過自定義shape解決，在重寫DefiningGeometry時如下書寫代碼即可：

using (StreamGeometryContext context = sg.Open())
{
context.BeginFigure(Points[0], true, false);
foreach (Point p in Points)
{
context.LineTo(p, true, true);
}
}

二 使用路徑和幾何圖形

Path路徑，可以將直線、弧形、曲線等基本元素結合起來，形成更復雜的圖形。 這些曲線和形狀使用Geometry對象進行描述。 要使用Path， 創建Geometry並使用它來設置Path對象的屬性Data。WPF提供兩個類來描述路徑數據：一個是StreamGeometry，另一個是PathFigureCollection。  有多種Geometry對象可供選擇。 RectangleGeometryEllipseGeometry和LineGeometry類描述相對簡單的形狀。 要創建更復雜的形狀或創建曲線，請使用 PathGeometry。

Path最重要的屬性：Data，看下面一個例子：

<!-- M：移動到起始點 C：三次方貝塞爾曲線-->

<Path Stroke="Red" StrokeThickness="2" Data="M 240,240 C 160,80 320,80 240,240"/>

<Path x:Name="PathFillColor" Fill="{TemplateBinding Property=Button.Background}">
    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="1,24" IsClosed="True">
                <LineSegment Point="35,58"/>
                <ArcSegment Size="55,20" Point="59,48" SweepDirection="Clockwise"/>
                <LineSegment Point="59,1"/>
                <ArcSegment Size="80,80" Point="1,24" SweepDirection="Counterclockwise"/>
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

 WPF提供兩個類來描述路徑數據：一個是StreamGeometry，另一個是PathFigureCollection。 

<Path Stroke="Black" Data="M 100,240 C 510,300 80,100 300,160 H40 v80" />

的形式是StreamGeometry的XAML代碼表示形式，也是最簡潔的表示形式。 

<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF"> 
  <Path.Data> 
    <PathGeometry Figures="M 10,100 C 10,300 300,-160 300,100" /> 
  </Path.Data> 
</Path> 

這樣的方式是使用PathFigureCollection的XAML代碼表示方式。 
這兩種方式都可以達至同一種顯示效果，那麼，什麼時候使用StreamGeometry，什麼時候使用PathFigureCollection方式呢？ 
一般地，當你建立路徑後，不再需要修改時，可使用StreamGeometry方式，如果還需要對路徑數值進行修改，則使用PathFigureCollection方式（這裏就是PathGeometry）。 

下面來解釋一下“M 100,240 C510,300 80,100 300,160 H40 v80”這樣字符串的意義。 
分爲四種情況來解釋： 
1. 移動指令：Move Command（M）：M 起始點  或者：m 起始點 
比如：M 100,240或m 100,240 
使用大寫M時，表示絕對值; 使用小寫m時; 表示相對於前一點的值，如果前一點沒有指定，則使用(0,0)。 

2. 繪製指令(Draw Command): 
我們可以繪製以下形狀： 
(1) 直線:Line(L) 
(2) 水平直線: Horizontal line(H) 
(3) 垂直直線: Vertical line(V) 
(4) 三次方程式貝塞爾曲線: Cubic Bezier curve(C) 
(5) 二次方程式貝塞爾曲線: Quadratic Bezier curve(Q) 
(6) 平滑三次方程式貝塞爾曲線: Smooth cubic Bezier curve(S) 
(7) 平滑二次方程式貝塞爾曲線: smooth quadratic Bezier curve(T) 
(8) 橢圓圓弧: elliptical Arc(A) 

上面每種形狀後用括號括起的英文字母爲命令簡寫的大寫形式，但你也可以使用小寫。使用大寫與小寫的區別是：大寫是絕對值，小寫是相對值。 比如：L 100, 200 L 300,400表示從絕對座標點(100,200)到另一絕對座標點(300,400)的一條直線。而l 100, 200 l 300,400則表示相對上一點（如果未指定，則默認爲(0,0)座標點）開始計算的座標點(100,200)到座標點爲(300,400)的一條直線。 

當我們重複使用同一種類型時，就可以省略前面的命令。比如：L 100, 200 L 300,400簡寫爲：L 100, 200 300,400。 

<Path Stroke="Black" StrokeThickness="1" Data="M 10,10 100,10 100,40 Z M 10,100 L 100,100 100,50 Z" /> 

這裏有一個你暫時還沒見過的Z指令，它就是一個關閉指令（close Command），表示封閉指定形狀，即將首尾點連接起來形成封閉的區域。 
繪製指令格式語法: 

(1) 直線:Line(L) 
格式：L 結束點座標 或: l 結束點座標。 
比如：L 100,100 或 l 100 100。座標值可以使用x,y（中間用英文逗號隔開）或x y（中間用半角空格隔開）的形式。 

(2) 水平直線  Horizontal line(H)：繪製從當前點到指定x座標的直線。 
格式：H x值 或 h x值(x爲System.Double類型的值) 
比如：H 100或h 100，也可以是：H 100.00或h 100.00等形式。 

(3) 垂直直線 Vertical line(V)：繪製從當前點到指定y座標的直線。 
格式：V y值 或 v y值(y爲System.Double類型的值) 
比如：V 100或y 100，也可以是：V 100.00或v 100.00等形式。 

(4) 三次方程式貝塞爾曲線 Cubic Bezier curve(C)：通過指定兩個控制點來繪製由當前點到指定結束點間的三次方程貝塞爾曲線。 
格式：C 第一控制點 第二控制點 結束點 或 c 第一控制點 第二控制點 結束點 
比如：C 100,200 200,400 300,200 或 c 100,200 200,400 300,200 
其中，點(100,200)爲第一控制點，點(200,400)爲第二控制點，點(300,200)爲結束點。 

(5) 二次方程式貝塞爾曲線 Quadratic Bezier curve(Q)：通過指定的一個控制點來繪製由當前點到指定結束點間的二次方程貝塞爾曲線。 
格式：Q 控制點 結束點 或 q 控制點 結束點 
比如：q 100,200 300,200。其中，點(100,200)爲控制點，點(300,200)爲結束點。 

(6) 平滑三次方程式貝塞爾曲線: Smooth cubic Bezier curve(S)：通過一個指定點來“平滑地”控制當前點到指定點的貝塞爾曲線。 
格式：S 控制點 結束點 或 s 控制點 結束點 
比如：S 100,200 200,300 

(7) 平滑二次方程式貝塞爾曲線 smooth quadratic Bezier curve(T)：與平滑三次方程貝塞爾曲線類似。 
格式：T 控制點 結束點 或 t 控制點 結束點 
比如：T 100,200 200,300 

(8) 橢圓圓弧: elliptical Arc(A) : 在當前點與指定結束點間繪製圓弧。 
A 尺寸 圓弧旋轉角度值 優勢弧的標記 正負角度標記 結束點 
或： 
a 尺寸 圓弧旋轉角度值 優勢弧的標記 正負角度標記 結束點 
尺寸(Size): System.Windows.Size類型，指定橢圓圓弧X,Y方向上的半徑值。 
旋轉角度（rotationAngle）：System.Double類型。 
圓弧旋轉角度值（rotationAngle）：橢圓弧的旋轉角度值。 
優勢弧的標記（isLargeArcFlag）：是否爲優勢弧，如果弧的角度大於等於180度，則設爲1，否則爲0。 
正負角度標記（sweepDirectionFlag）：當正角方向繪製時設爲1，否則爲0。 
結束點（endPoint）：System.Windows.Point類型。 

3. 關閉指令(close Command):用以將圖形的首、尾點用直線連接，以形成一個封閉的區域。 
用Z或z表示。 

圖形繪圖與幾何繪圖的區別：

圖形對象可以獨立存在，可以獨立繪製出具體需要的圖形。

幾何圖形對象沒有具體的形體，他需要依賴於某一對象元素而存在，不能直接呈現在畫板上
幾何繪圖包含5種對象：

LineGeometry：           直線幾何圖形
RectangleGeometry： 矩形幾何圖形
EllipseGeometry：       橢圓幾何圖形
PathGeometry：          路徑幾何圖形
GeometryGroup：       由多個基本幾何圖形組合在一起，形成的幾何圖形組
看下面一個例子：

<Grid Height="469" VerticalAlignment="Bottom">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="239*"/>
            <ColumnDefinition Width="253*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="100*"/>
            <RowDefinition Height="100*"/>
            <RowDefinition Height="100*"/>
            <RowDefinition Height="169*"/>
        </Grid.RowDefinitions>
        <!--直線-->
        <Path Stroke="Blue" StrokeThickness="2" Grid.Column="0" Grid.Row="0">
            <Path.Data>
                <LineGeometry StartPoint="20,40" EndPoint="200,60"/>
            </Path.Data>
        </Path>

        <!--矩形路徑-->
        <Path Stroke="Pink" StrokeThickness="2" Grid.Column="1" Grid.Row="0">
            <Path.Data>
              <!--Rect="40,20,60,60" 40,20爲座標起點，第三位數爲寬度，第四位數爲長度-->
                <RectangleGeometry Rect="40,20,60,60" RadiusX="10" RadiusY="10"/>
            </Path.Data>
        </Path>
        <!--橢圓路徑-->
        <Path Stroke="Yellow" Fill="Orange" Grid.Column="0" Grid.Row="1">
            <Path.Data>
                <EllipseGeometry Center="100,50" RadiusX="60" RadiusY="40"></EllipseGeometry>
            </Path.Data>
        </Path>

        <!—幾何圖形組-->
　　　　 <Path Fill="Pink" Stroke="Red" StrokeThickness="2">
            <Path.Data>
                <GeometryGroup FillRule="EvenOdd">
                    <EllipseGeometry Center="80,80" RadiusX="30" RadiusY="60"/>
                    <LineGeometry StartPoint="20,40" EndPoint="200,60"/>
                    <RectangleGeometry Rect="20,20,60,60" RadiusX="10" RadiusY="10"/>
                </GeometryGroup>
            </Path.Data>
        </Path>
</Grid>

geometry類（幾何繪圖）包括，LineGeometry（幾何線條）、RectangleGeometry（幾何矩形）、EllipesGeometry（幾何橢圓圖形）、GeometryGroup（幾何組合）、PathGeometry（幾何路徑）他可以描述任何幾何的2D形狀。

從繪圖來看Geometry類和Share類似乎都是繪製2D圖形，但是這兩個類有着重要的區別。Geometry（幾何繪圖）類更加輕量級，繪圖效率更高於Share。

二、Geometry和Path

LineGeometry（幾何線條）、RectangleGeometry（幾何矩形）、EllipesGeometry（幾何橢圓圖形）、GeometryGroup（幾何組合）、PathGeometry（幾何路徑）都是由Geometry繼承而來的。

 

事實上Path還可以做爲一個容器，允許容納任何Geometry形狀的幾何圖形包含在Path.Data內。

LineGeometry

類似於Share的Line對象用來生成一條線，區別在於Line用的是X和Y座標來生成線條，而LineGeometry是利用StartPoint和EndPoint來完成線條的繪製。

如：

<LineGeometry StartPoint="0,0" EndPoint="100,500" />

C#後臺代碼如下：

Path path = new Path();
LineGeometry lg=new LineGeometry();
lg.StartPoint=new Point(0,0);
lg.EndPoint=new Point(100,500);
path.Data=lg;
path.Stroke=new SolidColorBrush(Colors.Yellow);
path.StrokeThickness=5;
Canvas.Children.Add(path);
//全部爲手敲代碼，請注意

RectangleGeometry（幾何矩形）、EllipesGeometry（幾何橢圓圖形）類似於Share中的Rectangle和Ellipes這裏不做過多描述。

GeometryGroup

有些時候需要將某些圖形組合起來，GeometryGroup就具備這個功能，如下面的例子：

<StackPanel x:Name="LayoutRoot" Orientation="Horizontal" Background="AliceBlue">
        <Path Fill="Cyan" Stroke="Black" StrokeThickness="3">
            <Path.Data>
                <!--GeometryGroup 組合-->
                <GeometryGroup FillRule="EvenOdd">
                    <RectangleGeometry  RadiusX="2" RadiusY="2" Rect="80,50 200,100"></RectangleGeometry>
                    <EllipseGeometry Center="300,100" RadiusX="80" RadiusY="60"></EllipseGeometry>
                </GeometryGroup>
            </Path.Data>
        </Path>
        <Path Fill="Cyan" Stroke="Black" StrokeThickness="3">
            <Path.Data>
                <!--GeometryGroup 組合-->
                <GeometryGroup FillRule="Nonzero">
                    <RectangleGeometry  RadiusX="2" RadiusY="2" Rect="80,50 200,100"></RectangleGeometry>
                    <EllipseGeometry Center="300,100" RadiusX="80" RadiusY="60"></EllipseGeometry>
                </GeometryGroup>
            </Path.Data>
        </Path> 
    </StackPanel>

C#後臺代碼如下

Path path = new Path();
RectangleGeometry rg=new RectangleGemetry(new Rect(80,50,200,100),2,2);
EllipseGeometry eg=new EllipseGeometry(new Point(300,100),80,60);
GeometryGroup group=new GeometryGroup();
group.FillRule=FillRule.Nonzero;
group.Children.Add(rg);
group.Children.Add(eg);
path.Data=group;
path.Fill=new SolidColorBrush(Colors.Green);
path.Stroke=new SolidColorBrush(Colors.Yellow);
path.StrokeThickness=5;
Canvas.Children.Add(path);
//全部爲手敲代碼，請注意

運行結果如下：

 

在兩個圖形交叉的時候，可以使用Geometry的FillRule屬性來定義組合圖形的填充規則。FillRule屬性有兩個枚舉值（EvenOdd）和（Zonzero）.

PathGeometry

PathGeometry是Geometry中最靈活的，他可以繪製任意的2D幾何圖形。

 <Path Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <!--指定Path.Data的填充是PathGeometry-->
                <PathGeometry>
                    <!--定義PathGeometry的Figuress-->
                    <PathGeometry.Figures>
                        <PathFigureCollection>
                            <!--PathFigure表示幾何圖形的一個子部分、一系列單獨連接的二維幾何線段。
                            IsClosed:獲取或設置一個值，該值指示是否連接該圖形的第一條線段和最後一條線段。 -->
                            <PathFigure IsClosed="True" StartPoint="50,100">
                                <PathFigure.Segments>
                                    <BezierSegment Point1="100,0" Point2="200,200" Point3="300,100"/>
                                    <LineSegment Point="400,100" />
                                    <ArcSegment Size="50,50" RotationAngle="45" IsLargeArc="False"  SweepDirection="Clockwise" Point="200,100"/>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathFigureCollection>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>

以上運行結果，爲簡化上面xaml,wpf提供了路徑語法解析器,由 

   <Path Stroke="Black" StrokeThickness="1" 
 
            Data="M 10,100 L 100,100 100,50 Z M 10,10 100,10 100,40 Z" />

LineSegment對

利用LineSegment對象創建直線對象

<Path Stroke="DarkCyan" StrokeThickness="3">
            <Path.Fill>
                <LinearGradientBrush>
                    <GradientStop Color="Orange"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Path.Fill>
            <Path.Data>
                <PathGeometry>
                    <!-- 指明是閉線條並且指定起始位置-->
                    <PathFigure IsClosed="True" StartPoint="50,100">
                        <LineSegment Point="200,200" />
                        <LineSegment Point="200,150" />
                        <LineSegment Point="400,150" />
                        <LineSegment Point="400,50" />
                        <LineSegment Point="200,50" />
                        <LineSegment Point="200,0" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

C#後臺代碼

Path path = new Path();
LineSegment ls1=new LineSegment(new Point(200,200),true);
LineSegment ls2=new LineSegment(new Point(200,150),true);
LineSegment ls3=new LineSegment(new Point(400,150),true);
LineSegment ls4=new LineSegment(new Point(400,50),true);
LineSegment ls5=new LineSegment(new Point(200,50),true);
LineSegment ls6=new LineSegment(new Point(200,0),true);
PathFigure pathFigure=new PathFigure();
pathFigure.IsClosed=true;
pathFigure.Add(ls1);
pathFigure.Add(ls2);
pathFigure.Add(ls3);
pathFigure.Add(ls4);
pathFigure.Add(ls5);
pathFigure.Add(ls6);
PathFigureCollection figures=new PathFigureCollection();
figures.Add(pathFigure);
path.Data=new PathGeometry(figures,FillRule.Nonzero,null);
path.Fill=new SolidColorBrush(Colors.Green);
path.Stroke=new SolidColorBrush(Colors.Yellow);
path.StrokeThickness=5;

運行結果：

 

ArcSegment 對象  

利用ArcSegment對象來繪製弧線元素：

 <Path Stroke="DarkCyan" StrokeThickness="3">
            <Path.Data>
                <PathGeometry>
                    <!--ArcSegment 指定弧的起始點-->
                    <PathFigure IsClosed="False" StartPoint="50,50">
                        <!--ArcSegment 聲明第一條弧的結束點和弧度-->
                        <ArcSegment Size="280,280" Point="400,50" />
                        <!--ArcSegment 聲明第二條弧的結束點和弧度-->
                        <ArcSegment Size="90,280" Point="550,150" />
 
                        <ArcSegment Size="50,50" Point="600,50" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

運行結果：

 

 

BezierSegment對象

 

利用BeezierSegment對象來繪製貝塞爾曲線，貝塞爾曲線是由比較複雜的數學公式產生的。它用來計算兩個控制點之間如何確定一條曲線的輪廓。如下例子：

  <!--開始繪製貝塞爾曲線-->
        <Path Stroke="DarkCyan" Fill="YellowGreen" StrokeThickness="5">
            <Path.Data>
                <PathGeometry>
                    <!--聲明貝塞爾曲線-->
                    <PathFigure StartPoint="10,10">
                        <BezierSegment Point1="130,30" Point2="40,140" Point3="150,150"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

運行結果：