天天看点

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)

继续阅读