入门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,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" >
    
    <Canvas>
        
        <Ellipse Height="100" Width="100" Canvas.Left="10" Canvas.Top="10"
                stroke="Black" strokeThickness="10" Fill="SlateBlue" >
            <Ellipse.Clip>
                <RectangleGeometry Rect="0,50,50"/>
            </Ellipse.Clip>
        </Ellipse>

<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>

        
        <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>
        
        <Line X1="50" Y1="10" X2="250" Y2="10"
      stroke="Orange" strokeThickness="20"
      strokeStartLineCap="Triangle" strokeEndLineCap="Triangle" />

<Path stroke="Blue" strokeThickness="20"
      strokeStartLineCap="Round" strokeEndLineCap="Round" >
      <Path.Data>
          <LineGeometry StartPoint="100,50" EndPoint="280,50" />
      </Path.Data>
</Path>

<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类型.

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

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

相关推荐