1. 程式人生 > >WPF畫圖の利用Path畫扇形(僅圖形)

WPF畫圖の利用Path畫扇形(僅圖形)

默認 dir 添加數據 class geo sent 內部 繪圖 表現

一、畫弧

Path繼承自Sharp,以System.Windows.Shapes.Shape為基類,它是一個具有各種方法的控件。

我們先看一段xaml代碼:

        <Path Stroke="Red">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="100,0">
                        <ArcSegment Point="200,100" Size="100,200" SweepDirection="
Clockwise" RotationAngle="45" IsSmoothJoin="False" IsLargeArc="True"/> </PathFigure> </PathGeometry> </Path.Data> </Path>

畫出圖形的效果如下:

技術分享

如上紅色部門。

Path的屬性 Stroke無可置疑,就是決定顏色,Fill作為內部填充顏色。

Path.Date就是決定了這個Path的數據信息

PathGeometry是繪圖邏輯(要繪制的圖形,只能用Path表現出來),不是控件;也可以用數值的形式標識出來(後面說明)

PathFigure是幾何圖形的子部分,需要指定StartPoint,它有一個集合Segments,裏面是各種類型的Segment(部分)

ArcSegment是橢圓弧 Point值得是到達點,size是X、Y軸,SweepDirection設置畫的方向,RotationAngle標識旋轉角度

IsSmoothJoin表示是不是和上一個鏈接部分是角,默認False,IsLargeArc標識是優弧還是劣弧,默認劣弧,

      IsStroke是否顯示邊

二、有了上面的基礎,我們畫一個扇形

        <Path Stroke="Blue">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0,100"   >
                        <LineSegment Point="100,50"/>
                        <ArcSegment Point="100,150" Size="300,200" SweepDirection="Clockwise" />
                        <LineSegment Point="0,100"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

三、下面我用數值表示

wpf 前臺繪制圓弧很簡單,如:<Path x:Name="path_data" Stroke="#FFE23838" StrokeThickness="1" Data="M 100,0 A 50,100 0 0 0 100,200"></Path>

註解:M 起始點 (100,0) A 尺寸(X50,Y100半徑) 圓弧旋轉角度值(0) 優勢弧的標記(否,弧角度小於180) 正負角度標記(0 逆時針畫圓) 結束點(100,200)

下面是兩個半圓連接到一起,其余的類似,只要添加數據就可以

        <Path Stroke="Red" Fill="Aqua" Data="M 100,100 A 50,50 0 0 0 100,200 A 50 50 0 0 1 100,300">

        </Path>

基本是一段A表示一段弧 A 50,50 0 0 0 100,200 ,一段L表示一段線L 300,300,另起線段要聲明M

四、後臺代碼實現

後臺動態繪制圓弧,切入點ArcSegment,一步步摸索出繪制方法。

ArcSegment(Point point, Size size, double rotationAngle, bool isLargeArc, SweepDirection sweepDirection, bool isStroked);

由於Point是結束點,需要定義起始點StartPoint,嘗試還真有這個屬性,後臺繪制就出來了。代碼如下

Path path = new Path();
PathGeometry pathGeometry = new PathGeometry();
ArcSegment arc = new ArcSegment(new Point(100, 200), new Size(50, 100), 0, false, SweepDirection.Counterclockwise, true);
PathFigure figure = new PathFigure();
figure.StartPoint = new Point(100, 0);
figure.Segments.Add(arc);
pathGeometry.Figures.Add(figure);
path.Data = pathGeometry;
path.Stroke = Brushes.Orange;
canvas.Children.Add(path);

五、Date指令詳解

1. 移動指令:Move Command(M):M 起始點 或者:m 起始點
比如:M 100,240或m 100,240
使用大寫M時,表示絕對值; 使用小寫m時; 表示相對於前一點的值,如果前一點沒有指定,則使用(0,0)。

2. 繪制指令(Draw Command):
我們可以繪制以下形狀:
(1) 直線:Line(L)格式:L 結束點坐標 或: l 結束點坐標。
(2) 水平直線: Horizontal line(H)格式:H x值 或 h x值(x為System.Double類型的值)
(3) 垂直直線: Vertical line(V)格式:V y值 或 v y值(y為System.Double類型的值)
(4) 三次方程式貝塞爾曲線: Cubic Bezier curve(C)格式:C 第一控制點 第二控制點 結束點 或 c 第一控制點 第二控制點 結束點
(5) 二次方程式貝塞爾曲線: Quadratic Bezier curve(Q)格式:Q 控制點 結束點 或 q 控制點 結束點
(6) 平滑三次方程式貝塞爾曲線: Smooth cubic Bezier curve(S)格式:S 控制點 結束點 或 s 控制點 結束點
(7) 平滑二次方程式貝塞爾曲線: smooth quadratic Bezier curve(T)格式:T 控制點 結束點 或 t 控制點 結束點
(8) 橢圓圓弧: elliptical Arc(A)

Z指令,它就是一個關閉指令(close Command),表示封閉指定形狀,即將首尾點連接起來形成封閉的區域。

上面每種形狀後用括號括起的英文字母為命令簡寫的大寫形式,但你也可以使用小寫。使用大寫與小寫的區別是:大寫是絕對值,小寫是相對值。

WPF畫圖の利用Path畫扇形(僅圖形)