WPF繪制簡單常用的Path

原文: WPF繪制簡單常用的Path

寫代碼出身的我們經常需要使用一些簡單 但是不是規則圖形的Path 但限于美工功底有限 不知道怎麼去畫

下面我告訴大家一些簡單的小技巧 用代碼來畫Path 個人還是比較喜歡用代碼 因為數值控制的更精細

MSDN告訴我們,Path可以用這些形狀繪制:

ArcSegment 類 表示兩點之間的一條橢圓弧。

BezierSegment 類 表示在兩個點之間繪制的一條三次貝塞爾曲線。

LineSegment 類 在PathFigure中的兩個點之間建立一條直線。

PolyBezierSegment 類 表示一條或多條三次方貝塞爾曲線。

PolyLineSegment 類 表示由PointCollection定義的線段集合，每個Point指定線段的終點。

PolyQuadraticBezierSegment 類 表示一系列二次貝塞爾線段。

QuadraticBezierSegment 類 在PathFigure的兩點之間建立一條二次貝塞爾曲線。

說了這麼多,好複雜呀,我們可以挑最簡單的來用:

LineSegment 畫直線,PolyLineSegment 畫折線,ArcSegment 畫圓弧

其實有了這三個類,我們可以畫絕大多數簡單常用的形狀了,下面我舉兩個例子

這個形狀寬和高都是100,其中矩形寬100高90,三角寬10高10居中

對于這樣有棱角的圖形,我們隻需要找到他所有的頂點就行了

然後順時針依次連起來,用PolyLineSegment折線來表示就行了

1 <Path Stroke="Red" StrokeThickness="1">
2             <Path.Data>
3                 <PathGeometry>
4                     <PathFigure StartPoint="0,0">
5                         <PolyLineSegment Points="100,0 100,90 55,90 50,100 45,90 0,90 0,0"></PolyLineSegment>
6                     </PathFigure>
7                 </PathGeometry>
8             </Path.Data>
9         </Path>      

View Code

來看這個帶有圓角的圖形,4個圓弧的半徑是5,其他屬性和上圖一樣.我們需要将它拆分,拆分成8個部分,4個圓弧和4個邊,因為左上角圓弧的關系,起點設定成(5,0),每一部分的起點,都是上一部分的終點:

1. 上邊的直線:終點(95,0)
2. 右上角的圓弧:終點(100,5),Size(5,5) 因為圓弧表示的是橢圓的圓弧,Size就是Size(寬,高),當寬和高都一樣設定為5時,就指的是半徑為5的圓的圓弧了
3. 右邊的直線:終點(100,85)
4. 右下角的圓弧:終點(95,90),Size(5,5)
5. 下邊的折線:點的集合(55,90 50,100 45,90 5,90) 由于我們是順時針來的,下邊點的集合是從右到左依次來的
6. 左下角圓弧:終點(0,85),Size(5,5)
7. 左邊的直線:終點(0,5)
8. 左上角的圓弧:終點(5,0) 與起點重合

1 <Path Stroke="Red" StrokeThickness="1">
 2             <Path.Data>
 3                 <PathGeometry>
 4                     <PathFigure StartPoint="5,0">
 5                         <LineSegment Point="95,0"></LineSegment>
 6                         <!--SweepDirection擷取或設定一個值，該值指定是以 Clockwise 方向還是以 Counterclockwise 方向繪制弧-->
 7                         <!--順時針繪制還是逆時針繪制,你試下另一個值,看下效果就知道怎麼回事了-->
 8                         <ArcSegment Point="100,5" Size="5,5" SweepDirection="Clockwise"></ArcSegment>
 9                         <LineSegment Point="100,85"></LineSegment>
10                         <ArcSegment Point="95,90" Size="5,5" SweepDirection="Clockwise"></ArcSegment>
11                         <PolyLineSegment Points="55,90 50,100 45,90 5,90"></PolyLineSegment>
12                         <ArcSegment Point="0,85" Size="5,5" SweepDirection="Clockwise"></ArcSegment>
13                         <LineSegment Point="0,5"></LineSegment>
14                         <ArcSegment Point="5,0" Size="5,5" SweepDirection="Clockwise"></ArcSegment>
15                     </PathFigure>
16                 </PathGeometry>
17             </Path.Data>
18         </Path>