原文:WPF繪制簡(jiǎn)單常用的Path

寫代碼出身的我們經(jīng)常需要使用一些簡(jiǎn)單 但是不是規(guī)則圖形的Path 但限于美工功底有限 不知道怎么去畫

下面我告訴大家一些簡(jiǎn)單的小技巧 用代碼來畫Path 個(gè)人還是比較喜歡用代碼 因?yàn)閿?shù)值控制的更精細(xì)

?

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

ArcSegment 類?表示兩點(diǎn)之間的一條橢圓弧。

BezierSegment 類?表示在兩個(gè)點(diǎn)之間繪制的一條三次貝塞爾曲線。

LineSegment 類?在PathFigure中的兩個(gè)點(diǎn)之間創(chuàng)建一條直線。

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

PolyLineSegment 類?表示由PointCollection定義的線段集合，每個(gè)Point指定線段的終點(diǎn)。

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

QuadraticBezierSegment 類?在PathFigure的兩點(diǎn)之間創(chuàng)建一條二次貝塞爾曲線。

?

說了這么多,好復(fù)雜呀,我們可以挑最簡(jiǎn)單的來用:

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

其實(shí)有了這三個(gè)類,我們可以畫絕大多數(shù)簡(jiǎn)單常用的形狀了,下面我舉兩個(gè)例子

?

?

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

對(duì)于這樣有棱角的圖形,我們只需要找到他所有的頂點(diǎn)就行了

?

然后順時(shí)針依次連起來,用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

?

來看這個(gè)帶有圓角的圖形,4個(gè)圓弧的半徑是5,其他屬性和上圖一樣.我們需要將它拆分,拆分成8個(gè)部分,4個(gè)圓弧和4個(gè)邊,因?yàn)樽笊辖菆A弧的關(guān)系,起點(diǎn)設(shè)置成(5,0),每一部分的起點(diǎn),都是上一部分的終點(diǎn):

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

右上角的圓弧:終點(diǎn)(100,5),Size(5,5) 因?yàn)閳A弧表示的是橢圓的圓弧,Size就是Size(寬,高),當(dāng)寬和高都一樣設(shè)置為5時(shí),就指的是半徑為5的圓的圓弧了

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

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

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

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

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

左上角的圓弧:終點(diǎn)(5,0) 與起點(diǎn)重合

1 <Path Stroke="Red" StrokeThickness="1"> 2 <Path.Data> 3 <PathGeometry> 4 <PathFigure StartPoint="5,0"> 5 <LineSegment Point="95,0"></LineSegment> 6 <!--SweepDirection獲取或設(shè)置一個(gè)值，該值指定是以 Clockwise 方向還是以 Counterclockwise 方向繪制弧--> 7 <!--順時(shí)針繪制還是逆時(shí)針繪制,你試下另一個(gè)值,看下效果就知道怎么回事了--> 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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。