[原]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" />
紅色部分角度設置一直不好用,不知道為什麽?
詳細語法說明:WPF中圖形表示語法詳解(Path之Data屬性語法)
[原]Wpf應用Path路徑繪制圓弧