[原]Wpf應用Path路徑繪制圓弧

原文: [原]Wpf應用Path路徑繪制圓弧

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 結束點坐标 或: 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表示。

1    <Canvas Margin="123,0,10,22">
 2             <Path  Stroke="#FFE23838" StrokeThickness="5" Width="500" Height="800" StrokeDashArray="2 1" StrokeDashCap="Round">
 3                 <Path.Data>
 4                     <GeometryGroup>
 5                         <PathGeometry Figures="M 100,10 A 100,100 0 0 0 200,10" />
 6                         <PathGeometry Figures="M 100,50 A 100,100 0 1 0 200,50" />
 7                         <PathGeometry Figures="M 100,450 A 100,100 0 1 1 200,450" />
 8                         <PathGeometry Figures="M 100,500 A 100,50 45 1 0 300,500" />
 9                     </GeometryGroup>
10                 </Path.Data>
11             </Path>
12         </Canvas>      

效果圖  

PS:

<PathGeometry Figures="M 100,500 A 100,50 45 1 0 300,500" /> 
紅色部分角度設定一直不好用，不知道為什麼？      

詳細文法說明：

WPF中圖形表示文法詳解（Path之Data屬性文法）