WPF and Silverlight学习笔记（二十七）：基本图形的使用（2）Path和位图操作

WPF and Silverlight学习笔记（二十七）：基本图形的使用（2）Path和位图操作2010-12-18 博客园龙腾于海一、使用Path构建复杂图形

Path所构建的图形由Data属性来定义，其属性的类型为Geometry（几何类），几何类类型的继承关系请参考我上一篇文章。例如要创建一个100*30的矩形，可以有两种做法：

1:  <StackPanel>
2:   <！--使用Rectangle直接创建矩形图形- ->
3:   <Rectangle Fill="Red"  Width="100" Height="30"  HorizontalAlignment="Left" />
4:   <！--使用 Path创建矩形图形-->
5:   <Path  Fill="Blue">
6:     <Path.Data>
7:        <RectangleGeometry Rect="0,0,100,30"  />
8:     </Path.Data>
9:    </Path>
10: </StackPanel>

从上面的代码来看，如果创建单一的图形，使用相应的图形类更简单，但是通过Path可以构建更加复杂的图形，例如想创建一个圆环，一种做法是使用两个圆形构建，另一种做法就是例如Path，可以直接绘制出圆环：

1: <Grid>
2:   <Grid.RowDefinitions>
3:      <RowDefinition />
4:     <RowDefinition />
5:   </Grid.RowDefinitions>
6:   <！--使用两个圆 形叠加出圆环，但要受到其所有容器的限制-->
7:   <Canvas  Grid.Row="0">
8:     <Ellipse  Fill="Red" Canvas.Left="10"  Canvas.Top="10"
9:          Width="100" Height="100" />
10:      <Ellipse Fill="White" Canvas.Left="35"  Canvas.Top="35"
11:          Width="50" Height="50" />
12:    </Canvas>
13:   <！--直接使用Path构建圆环-->
14:   <Canvas Grid.Row="1">
15:      <Path Fill="Red">
16:        <Path.Data>
17:         <GeometryGroup>
18:           <！--Center为圆心的坐标，RadiusX、RadiusY 分别为X、Y两轴的半径-->
19:            <EllipseGeometry RadiusX="50" RadiusY="50"
20:                   Center="60,60"  />
21:           <EllipseGeometry  RadiusX="25" RadiusY="25"
22:                    Center="60,60" />
23:          </GeometryGroup>
24:        </Path.Data>
25:     </Path>
26:    </Canvas>
27: </Grid>