首页 > 代码库 > WPF Path总结(一)

WPF Path总结(一)

    首先来看看Path的定义,参考MSDN:绘制一系列相互连接的直线和曲线。介绍比较简单,我们再来看看备注中有些什么,Path 对象可以绘制封闭式还是开放式形状、 多个形状和甚至曲线的形状。与不 Line 和 Polyline 对象,可以使用此对象来绘制曲线。 请参阅 Data 属性有关的形状的说明, Path 元素支持。

    我们来看看Path的继承关系,以至于对其有一个大概的概念和理解。

    System.Object
      System.Windows.Threading.DispatcherObject
        System.Windows.DependencyObject
          System.Windows.Media.Visual
            System.Windows.UIElement
              System.Windows.FrameworkElement
                System.Windows.Shapes.Shape
                  System.Windows.Shapes.Path

    直接的继承关系是System.Windows.Shapes.Shape,用过的人应该对Shape不会陌生,Rectangle、Ellipse、Line、Polyline、Polygon,而且这些中功能最强大的要属Path了,所有其他Shape具备的功能Path都具备,而且还可以做更多的事情,你甚至只使用Path就足以完成矢量绘图,但是Path的不足就是使用过于繁琐,Path自己唯一定义的属性是Data,为Geometry类型的对象。

    1 使用Path绘制直线。    

  <Canvas>        <Path Fill="Blue" Stroke="Red" StrokeThickness="3">            <Path.Data>                <LineGeometry StartPoint="96 96" EndPoint="192 192">    </LineGeometry>            </Path.Data>        </Path>            <Path Fill="Blue" Stroke="Red" StrokeThickness="3">                <Path.Data>                    <LineGeometry StartPoint="192 96" EndPoint="96 192"></LineGeometry>                </Path.Data>            </Path>   </Canvas>

  显示的结果为:两条相交的直线。

技术分享

  2 使用Path绘制Rectangle。

       <Canvas HorizontalAlignment="Center" Width="245" Margin="107,0,165,0">            <Path Fill="Blue" Stroke="Red" StrokeThickness="3" Canvas.Left="-69.732" Canvas.Top="29.501">                <Path.Data>                        <RectangleGeometry Rect="96 48 288 192" RadiusX="24" RadiusY="24"></RectangleGeometry>                    </Path.Data>            </Path>                   </Canvas>

  这里面RadiusX和RadiusY用来指定拐角的曲率。  

技术分享

    3 使用Path绘制Ellipse。    

   <Canvas HorizontalAlignment="Center" Width="245" Margin="141,-10,131,10">            <Path Fill="Blue" Stroke="Red" StrokeThickness="3" Canvas.Left="-69.732" Canvas.Top="29.501">                <Path.Data>                    <EllipseGeometry Center="192 144" RadiusX="144" RadiusY="96"></EllipseGeometry>                </Path.Data>            </Path>              </Canvas>

  绘制的椭圆如下,这里需要提醒的是当RadiusX=RadiusY,绘制的是一个圆形。

技术分享

  4 Path绘制自定义图形。      

<Canvas Width="360" Height="230" >                       <Path Stroke="Blue" Fill="Green">                <Path.Data>                    <PathGeometry>                        <PathFigure StartPoint="80,180">                            <LineSegment Point="50,180" ></LineSegment>                            <ArcSegment Point="310,180" Size="130,130"  SweepDirection="Clockwise" />                            <LineSegment Point="280,180" ></LineSegment>                            <ArcSegment Point="80,180" Size="100,100" SweepDirection="Counterclockwise" />                        </PathFigure>                    </PathGeometry>                </Path.Data>                           </Path>            <StackPanel Orientation="Vertical"  Canvas.Left="171" Canvas.Top="90"  Width="18" Height="90">                <Path  Stroke="Red" StrokeDashCap="Triangle" StrokeThickness="1" Fill="Red" >                    <Path.Data>                        <PathGeometry Figures="M 0,18 L 18,18 9,0 Z"></PathGeometry>                    </Path.Data>                </Path>                <Rectangle   Fill="Blue" Height="63" Width="6">                </Rectangle>                <Ellipse Fill="Red" Width="8" Height="9" HorizontalAlignment="Center" Margin="3,0,3,0"></Ellipse>            </StackPanel>            <Label Content="40%" Foreground="Red" Canvas.Left="18" Canvas.Top="160"></Label>            <Label Content="50%" Foreground="Red" Canvas.Left="35.42" Canvas.Top="95"></Label>            <Label Content="60%" Foreground="Red" Canvas.Left="83" Canvas.Top="47.42"></Label>            <Label Content="70%" Foreground="Red" Canvas.Left="158" Canvas.Top="25"></Label>            <Label Content="80%" Foreground="Red" Canvas.Left="240" Canvas.Top="47.42"></Label>            <Label Content="90%" Foreground="Red" Canvas.Left="290" Canvas.Top="95"></Label>            <Label Content="100%" Foreground="Red" Canvas.Left="310" Canvas.Top="160"></Label>        </Canvas>

  这里使用一个稍微复杂一些的仪表盘作为示例,介绍怎么使用PathGeometry,我们来看看绘制出来的结果。

技术分享

  5 Path使用GeometryGroup来组合图形。

<Canvas HorizontalAlignment="Center" Width="245" Margin="141,-10,131,10">            <Path Fill="Blue" Stroke="Red" StrokeThickness="3" Canvas.Left="-69.732" Canvas.Top="29.501">                <Path.Data>                    <GeometryGroup>                        <EllipseGeometry Center="150 150" RadiusX="96" RadiusY="96"></EllipseGeometry>                        <EllipseGeometry Center="250 150" RadiusX="96" RadiusY="96"></EllipseGeometry>                        <EllipseGeometry Center="150 250" RadiusX="96" RadiusY="96"></EllipseGeometry>                        <EllipseGeometry Center="250 250" RadiusX="96" RadiusY="96"></EllipseGeometry>                    </GeometryGroup>                </Path.Data>            </Path>                   </Canvas>

  我们来看看结果。

技术分享

  本节就介绍这么多,后续的文章中会陆续介绍更加重要的如何使用CombineGeometry来进行几何图形的组合,未完待续......

 

WPF Path总结(一)