1. 程式人生 > 其它 >[原]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)

繪製指令格式語法:

(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表示。

 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" /> 
紅色部分角度設定一直不好用,不知道為什麼?