原文: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),每一部分的起點,都是上一部分的終點:

上邊的直線:終點(95,0)

右上角的圓弧:終點(100,5),Size(5,5) 因為圓弧表示的是橢圓的圓弧,Size就是Size(寬,高),當寬和高都一樣設置為5時,就指的是半徑為5的圓的圓弧了

右邊的直線:終點(100,85)

右下角的圓弧:終點(95,90),Size(5,5)

下邊的折線:點的集合(55,90 50,100 45,90 5,90) 由于我們是順時針來的,下邊點的集合是從右到左依次來的

左下角圓弧:終點(0,85),Size(5,5)

左邊的直線:終點(0,5)

左上角的圓弧:終點(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> View Code

?

總結

以上是生活随笔為你收集整理的WPF绘制简单常用的Path的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。