入门8-Geometry元素对象和Clip（剪切）的应用

Silverlight前面已经介绍过Shape图形元素，如Rectangle，Ellipse, Line等， 这里将介绍Geometry几何图形。Geometry几何图形是用来描述2D图形的，它在WPF(Silverlight是其子集)和Silverlight()中均得到支持,分为三类，这三类又可分为很多子类.

WPF所支持的完整功能如下:
1 简单几何图形(Simple Geometry)
包括:LineGeometry,RectangleGeometry,EllipseGeometry

2 (Composite Geometry)
GeometryGroup, CombinedGroup, Geometry静态方法Combine

3 (Path Geometry)
ArcSegment,BezierSegment,LineSegment,PolyBezierSegment,PolyLineSegment,PolyQuadraticBezierSegment,QuadraticBezierSegment
而Silverlight作为WPF的子集,支持LineGeometry,RectangleGeometry,EllipseGeometry,GeometryGroup,Path Geometry

Geometry和Shape的最本质的区别:
Shape类对象绘制图形是可以自己生成的,而Geometry类对象不具有自我绘制图形的能力,只能帮助其他对象实现图形效果,不能独立存在.

常见使用Geometry几何对象的场合有2个:
1 Path对象的Data属性,即:
<Path.Data>
    <Geometry类对象... />
</Path.Data>

2 UIElement的Clip属性,即:
<UIElement>
    <Geometry类对象... />
</UIElement>

还是看示例代码,代码1:
=====================================
<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <!--Use one Ellipse element and two Image elements-->
    <Canvas>
        <!--Use RectangleGeometry element to clip Ellipse-->
        <Ellipse Height="100" Width="100" Canvas.Left="10" Canvas.Top="10"
                Stroke="Black" StrokeThickness="10" Fill="SlateBlue" >
            <Ellipse.Clip>
                <RectangleGeometry Rect="0, 0, 50, 50"/>
            </Ellipse.Clip>
        </Ellipse>

        <!--Use EllipseGeometry element to clip Image-->
        <Image Canvas.Left="100" Canvas.Top="10"
            Source="MyPic.jpg"
            Width="200" Height="200" >
            <Image.Clip>
                <EllipseGeometry
                    RadiusX="100"
                    RadiusY="75"
                    Center="100,100" />
                </Image.Clip>
        </Image>
 
        <!--Use Clip property to clip Image-->
        <Image
            Canvas.Left="10" Canvas.Top="150"
            Clip="M0,150 L100,0 200,150Z"
            Source="MyPic.jpg"
            Width="200" Height="150" />
    </Canvas>

</Canvas>
======================================
从这里起我们将使用编码规范来整理我们的代码,参考入门7中的规范. 这样的代码,可读性强,修改起来也好控制.
将代码1粘贴到入门中的myxaml.xaml中,并保存,后双击SampleHTMLPage.html运行,就可以看到剪裁效果.
Ellipse元素对象和第一个Image元素对象我们使用了
<UIElement>
    <Geometry类对象... />
</UIElement>
来进行剪裁, 而第二个Image元素对象,我们直接通过设置Clip属性值来实现剪裁效果.

再看一例,代码2:
======================================
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Canvas>
        <!--Shape Line-->
        <Line X1="50" Y1="10" X2="250" Y2="10"
      Stroke="Orange" StrokeThickness="20"
      StrokeStartLineCap="Triangle" StrokeEndLineCap="Triangle" />

        <!--Geometry LineGeometry-->
        <Path Stroke="Blue" StrokeThickness="20"
      StrokeStartLineCap="Round" StrokeEndLineCap="Round" >
      <Path.Data>
          <LineGeometry StartPoint="100,50" EndPoint="280,50" />
      </Path.Data>     
  </Path>

        <!--Two texts: "Line" and "LineGeometry"-->
  <TextBlock FontSize="11" Canvas.Top="0" Text="Line" Foreground="Red" />
  <TextBlock FontSize="12" Canvas.Top="35" Text="LineGeometry" Foreground="Red" />
    </Canvas>

</Canvas>
======================================
这个示例中,使用了
<Path.Data>
    <Geometry类对象... />
</Path.Data>
来对Path对象进行了剪裁, StrokeStartLineCap描述Stroke始端的形状,StrokeEndLineCap描述Stroke末端的形状.

下面介绍一下Geometry类对象的用法和属性:
1 LineGeometry用法:
<Path.Data>
    <LineGeometry StartPoint="X0,Y0" EndPoint="X1,Y1" />
</Path.Data>
用途:
在两点之间绘制一条直线

属性:
StartPoint 起始点  类型:double
EndPoint   终点    类型:double

2 RectangleGeometry用法和属性:
<Path.Data>
    <RectangleGeometry Rect="X,Y,Width,Height" />
</Path.Data>
用途:
绘制矩形图形

属性:
Rect定义RectangleGeometry起始位置和长宽,X,Y表示矩形左上角起点,Width表示矩形的宽度,Height表示矩形的高度,他们均为double类型.

3 EllipseGeometry用法和属性:
<Path.Data>
    <EllipseGeometry RadiusX="半径长度" RadiusY="半径长度" Center="X,Y" />
</Path.Data>
用途:
绘制椭圆形或圆形

属性:
RadiusX表示X轴半径长度
RadiusY=表示Y轴半径长度
Center="X,Y"椭圆形所在中心
类型均为double类型.

                                                                       　　　　　　　　 锐意进取 大胆创新
                                                                        　　　　　　　　     蒙哥马利 朱