微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Silverlight开发历程—(绘制几合图形,GeometryGroup,PathGeometry)


 Silverlight 还提供了几合绘制图形类Geometry比Share更加的灵活。

一、Geometry和Share

Geometry类(几何绘图)包括,LineGeometry(几何线条)、RectangleGeometry(几何矩形)、EllipesGeometry(几何椭圆图形)、GeometryGroup(几何组合)、PathGeometry(几何路径)他可以描述任何几何的2D形状。

从绘图来看Geometry类和Share类似乎都是绘制2D图形,但是这两个类有着重要的区别。Geometry(几何绘图)类更加轻量级,绘图效率更高于Share。

 

二、Geometry和Path

LineGeometry(几何线条)、RectangleGeometry(几何矩形)、EllipesGeometry(几何椭圆图形)、GeometryGroup(几何组合)、PathGeometry(几何路径)都是由Geometry继承而来的。

 

事实上Path还可以做为一个容器,允许容纳任何Geometry形状的几何图形包含在Path.Data内。

LineGeometry

类似于Share的Line对象用来生成一条线,区别在于Line用的是X和Y坐标来生成线条,而LineGeometry是利用StartPoint和EndPoint来完成线条的绘制。

如:

<LineGeometry StartPoint="0,0" EndPoint="100,500" />


RectangleGeometry(几何矩形)、EllipesGeometry(几何椭圆图形)类似于Share中的Rectangle和Ellipes这里不做过多描述。

GeometryGroup

有些时候需要将某些图形组合起来,GeometryGroup就具备这个功能,如下面的例子:

<StackPanel x:Name="LayoutRoot" Orientation="Horizontal" Background="AliceBlue">
        <Path Fill="Cyan" stroke="Black" strokeThickness="3">
            <Path.Data>
                <!--GeometryGroup 组合-->
                <GeometryGroup FillRule="EvenOdd">
                    <RectangleGeometry  RadiusX="2" RadiusY="2" Rect="80,50 200,100"></RectangleGeometry>
                    <EllipseGeometry Center="300,100" RadiusX="80" RadiusY="60"></EllipseGeometry>
                </GeometryGroup>
            </Path.Data>
        </Path>
        <Path Fill="Cyan" stroke="Black" strokeThickness="3">
            <Path.Data>
                <!--GeometryGroup 组合-->
                <GeometryGroup FillRule="Nonzero">
                    <RectangleGeometry  RadiusX="2" RadiusY="2" Rect="80,100" RadiusX="80" RadiusY="60"></EllipseGeometry>
                </GeometryGroup>
            </Path.Data>
        </Path> 
    </StackPanel>


运行结果如下:

@H_502_58@

在两个图形交叉的时候,可以使用Geometry的FillRule属性来定义组合图形的填充规则。FillRule属性有两个枚举值(EvenOdd)和(Zonzero).

PathGeometry

PathGeometry是Geometry中最灵活的,他可以绘制任意的2D几何图形。

 <Path stroke="Black" strokeThickness="1">
            <Path.Data>
                <!--指定Path.Data的填充是PathGeometry-->
                <PathGeometry>
                    <!--定义PathGeometry的figuress-->
                    <PathGeometry.figures>
                        <PathfigureCollection>
                            <!--Pathfigure表示几何图形的一个子部分、一系列单独连接的二维几何线段。
                            IsClosed:获取或设置一个值,该值指示是否连接该图形的第一条线段和最后一条线段。 -->
                            <Pathfigure IsClosed="True" StartPoint="50,100">
                                <Pathfigure.Segments>
                                    <BezierSegment Point1="100,0" Point2="200,200" Point3="300,100"/>
                                    <Linesegment Point="400,100" />
                                    <ArcSegment Size="50,50" RotationAngle="45" IsLargeArc="False"  SweepDirection="Clockwise" Point="200,100"/>
                                </Pathfigure.Segments>
                            </Pathfigure>
                        </PathfigureCollection>
                    </PathGeometry.figures>
                </PathGeometry>
            </Path.Data>
        </Path>


运行结果:

 

为简化上面xaml,wpf提供了路径语法解析器,由

       

   <Path stroke="Black" strokeThickness="1" 

            Data="M 10,100 L 100,100 100,50 Z M 10,10 100,40 Z" />

 

Linesegment对象

利用Linesegment对象创建直线对象
<Path stroke="DarkCyan" strokeThickness="3">
            <Path.Fill>
                <LinearGradientBrush>
                    <GradientStop Color="Orange"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Path.Fill>
            <Path.Data>
                <PathGeometry>
                    <!-- 指明是闭线条并且指定起始位置-->
                    <Pathfigure IsClosed="True" StartPoint="50,100">
                        <Linesegment Point="200,200" />
                        <Linesegment Point="200,150" />
                        <Linesegment Point="400,50" />
                        <Linesegment Point="200,0" />
                    </Pathfigure>
                </PathGeometry>
            </Path.Data>
        </Path>

运行结果:

 
ArcSegment 对象  
 
利用ArcSegment对象来绘制弧线元素:
 <Path stroke="DarkCyan" strokeThickness="3">
            <Path.Data>
                <PathGeometry>
                    <!--ArcSegment 指定弧的起始点-->
                    <Pathfigure IsClosed="False" StartPoint="50,50">
                        <!--ArcSegment 声明第一条弧的结束点和弧度-->
                        <ArcSegment Size="280,280" Point="400,50" />
                        <!--ArcSegment 声明第二条弧的结束点和弧度-->
                        <ArcSegment Size="90,280" Point="550,150" />

                        <ArcSegment Size="50,50" Point="600,50" />
                    </Pathfigure>
                </PathGeometry>
            </Path.Data>
        </Path>

运行结果:

 
BezierSegment对象
 
利用BeezierSegment对象来绘制贝塞尔曲线,贝塞尔曲线是由比较复杂的数学公式产生的。它用来计算两个控制点之间如何确定一条曲线的轮廓。如下例子:
  <!--开始绘制贝塞尔曲线-->
        <Path stroke="DarkCyan" Fill="YellowGreen" strokeThickness="5">
            <Path.Data>
                <PathGeometry>
                    <!--声明贝塞尔曲线-->
                    <Pathfigure StartPoint="10,10">
                        <BezierSegment Point1="130,30" Point2="40,140" Point3="150,150"/>
                    </Pathfigure>
                </PathGeometry>
            </Path.Data>
        </Path>

运行结果:

 
下一节将会学习利用C#代码来绘制几何图形。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐