天天看點

3. 幾何圖形(Geometry)

前面示例中,其中一種形狀Path使用Geometry來繪圖。Geometry元素也用于其他地方,如用于DrawingBrush。

在某些方面,Geometry元素非常類似于形狀。與Line、Ellipse和Rectangle形狀一樣,也有繪制這些形狀的Geometry元素:LineGeometry、EllipseGeometry和RectangleGeometry。形狀與幾何圖形有顯著的差別。Shape是一個FrameworkElement,可以用于把派生自UIElement的任意類用作其子元素。FramewrokElement派生自UIElement。形狀會參與系統的布局,并呈現自身。而Geometry類不呈現自身,特性與系統開銷也比Shape類少。Geometry類直接派生自DependencyObject。

Path類使用Geometry來繪圖。幾何圖形可用用Path的Data屬性設定。可以設定的簡單的幾何圖形元素有繪制橢圓的EllipseGeometry、繪制線條的LineGeometry和繪制矩形的RectangleGeometry。

1. 使用段的幾何圖形

也可以使用段來建立幾何圖形。幾何圖形類PathGeometry使用段來繪圖。下面的代碼段使用BezierSegment和LineSegment元素繪制一個紅色的圖形和一個綠色的圖形,如下圖所示,第一個BezierSegment在圖形的起點(70,40)、終點(150,63)、控制點(90,37)和(130,46)之間繪制了一條貝塞爾曲線。下面的LineSegment使用貝塞爾曲線的終點和(120,110)繪制了一條線段:

3. 幾何圖形(Geometry)
<Canvas>
            <Path Canvas.Left="0" Canvas.Top="0" Fill="Red" Stroke="Blue" StrokeThickness="2.5">
                <Path.Data>
                    <GeometryGroup>
                        <PathGeometry>
                            <PathGeometry.Figures>
                                <PathFigure StartPoint="70,40" IsClosed="True">
                                    <PathFigure.Segments>
                                        <BezierSegment Point1="90,37" Point2="130,46"
                                                       Point3="150,63"/>
                                        <LineSegment Point="120,110"/>
                                        <BezierSegment Point1="100,95" Point2="70,90"
                                                       Point3="45,91"/>
                                    </PathFigure.Segments>
                                </PathFigure>
                            </PathGeometry.Figures>
                        </PathGeometry>
                    </GeometryGroup>
                </Path.Data>
            </Path>
            <Path Canvas.Left="0" Canvas.Top="0" Fill="Green" Stroke="Blue" StrokeThickness="2.5">
                <Path.Data>
                    <GeometryGroup>
                        <PathGeometry>
                            <PathGeometry.Figures>
                                <PathFigure StartPoint="160,70">
                                    <PathFigure.Segments>
                                        <BezierSegment Point1="175,85" Point2="200,99" Point3="215,100"/>
                                        <LineSegment Point="195,148"/>
                                        <BezierSegment Point1="174,150" Point2="142,140" Point3="129,115"/>
                                        <LineSegment Point="160,70"/>
                                    </PathFigure.Segments>
                                </PathFigure>
                            </PathGeometry.Figures>
                        </PathGeometry>
                    </GeometryGroup>
                </Path.Data>
            </Path>
        </Canvas>
           

除了BezierSgement和LineSegment元素之外,還可以使用ArcSegment元素在兩點之間繪制橢圓狐。使用PolyLineSegment可以繪制一組線段,PolyBezierSegment由多條貝塞爾曲線組成,QuadraticBezierSegment建立一條二次貝塞爾曲線,PolyQuadraticBezierSgement由多條二次貝塞爾曲線組成。

2. 使用Path标記文法的幾何圖形

Path标記文法可以與Path類的Data屬性一起使用。特殊字元定義點的連接配接方式。在下面的示例中,M标記起點,L是到指定點的線條指令,Z是閉合圖形的筆和指令。下圖顯示了這個繪圖操作的結果。Path标記文法允許使用更多的指令,如水準線(H)、垂直線(V)、三次貝塞爾曲線(C)、二次貝塞爾曲線(Q)、光滑的三次貝塞爾曲線(S)、光滑的二次貝塞爾曲線(T),以及橢圓弧(A):

<Canvas>
        <Path Canvas.Left="0" Canvas.Top="200" Fill="Yellow" Stroke="Blue"
              StrokeThickness="2.5"
              Data="M 120,5 L 128,80 L 220,50 L 160,130 L 190,220 L 100,150 
              L 80,230 L 60,140 L 0,110 L 70,80 Z" StrokeLineJoin="Round"/>
    </Canvas>
           
3. 幾何圖形(Geometry)

繼續閱讀