SilverLight中的几何形状

 

原来说过，几何形状只是对形状的数学描述。用来描述图形时，需要放到Path的Data属性中。但Path不需要这些形状描述，直接使用字符串的图形描述语法也可以描述出各种图形。那还需要几何形状干嘛吗？

其实，几何形状最主要的用处就是裁剪，可以把显示元素显示成各种各样的形状。几何形状有：

RectangleGeometry（ 矩形），EllipseGeometry（椭圆），LineGeometry（线段），PathGeometry（路径）。

而每个显示元素都会有一个Clip属性，可以把形状放到这个Clip属性里对显示元素进行裁剪。

1. RectangleGeometry（矩形）。主要属性有：

Rect: 用来描述尺寸。如 Rect=”30,0,240,100”, 对应于 x, y, width, height.

RadiusX， RadiusY: 用来定义圆角矩形。

2. EllipseGeometry （椭圆）。主要属性有：

RadiusX, RadiusY: 用来定义X半径和Y半径。

Center: 用来描述原点位置。

3. LineGeometry （线段）。主要属性有：

StartPoint, EndPoint: 定义起始点和结束点。

4. PathGeometry （路径）。主要属性有：

PathFigure: 描述内容。这是一个集合。里面可以放以下：

    LineSegment: 线段。属性有Point. 

    PolyLineSegment: 多线段。属性有Points.

    ArcSegment: 弧线。属性有Point, Size.

    BezierSegment：贝塞尔曲线。属性有Point1, Point2, Point3.

    QuadraticBezierSegment: 二次贝塞尔曲线。属性有Point1, Point2.

    PolyBezierSegment: 多段贝塞尔曲线。属性有Points.

    PolyQuadraticBezierSegment: 多段二次贝塞尔曲线。属性有Points.

以下通过实例来看一下：

1. 如使用EllipseGeometry对图形Rectangle进行裁剪。

EllipseGeometry默认的原点就是0，0. RadiusX, RadiusY分别设为宽度和高度的一半，相当于把矩形的左上角裁出来。

<Canvas
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Rectangle Width="150" Height="100"
        Fill="Red" Stroke="Black" StrokeThickness="10">
        <Rectangle.Clip>
            <EllipseGeometry RadiusX="75" RadiusY="50" />        
        </Rectangle.Clip>
    </Rectangle>
</Canvas>

下来，通过设置不同的原点位置，把矩形的四个角裁出来。

<Canvas
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Rectangle Width="150" Height="100"
        Fill="Red" Stroke="Black" StrokeThickness="10">
        <Rectangle.Clip>
            <EllipseGeometry RadiusX="75" RadiusY="50" />        
        </Rectangle.Clip>
    </Rectangle>
    <Rectangle Width="150" Height="100"
        Fill="Red" Stroke="Black" StrokeThickness="10">
        <Rectangle.Clip>
            <EllipseGeometry RadiusX="75" RadiusY="50" Center="150, 0" />
        </Rectangle.Clip>
    </Rectangle>
    <Rectangle Width="150" Height="100"
        Fill="Red" Stroke="Black" StrokeThickness="10">
        <Rectangle.Clip>
            <EllipseGeometry RadiusX="75" RadiusY="50" Center="0, 100" />
        </Rectangle.Clip>
    </Rectangle>
    <Rectangle Width="150" Height="100"
        Fill="Red" Stroke="Black" StrokeThickness="10">
        <Rectangle.Clip>
            <EllipseGeometry RadiusX="75" RadiusY="50" Center="150, 100" />
        </Rectangle.Clip>
    </Rectangle>
</Canvas>

 

2. 使用PathGeometry, 里面放一个ArcSegment. 用来裁剪Rectangle。

 

<Canvas
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Rectangle Width="150" Height="100"
        Fill="Red" Stroke="Black" StrokeThickness="10">
        <Rectangle.Clip>
            <PathGeometry>
                <PathFigure StartPoint="10,10">
                    <ArcSegment  Point="75,50" Size="10,20" />
                </PathFigure>
            </PathGeometry>        
        </Rectangle.Clip>
    </Rectangle>
</Canvas>

 

 

以上，PathFigure里面的StartPoint代表起始点，ArcSegment中的Point代表结束点。

ArcSegment中的Size代表弧线的宽度和高度。

3. 使用LineSegment来裁剪Rectangle。

<Canvas
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Rectangle Width="150" Height="100"
        Fill="Red" Stroke="Black" StrokeThickness="10">
        <Rectangle.Clip>
            <PathGeometry>
                <PathFigure StartPoint="10,10">
                    <LineSegment Point="75,50"/>
                    <LineSegment Point="0, 100" />
                </PathFigure>
            </PathGeometry>        
        </Rectangle.Clip>
    </Rectangle>
</Canvas>

以上，PathFigure中的StartPoint代表起始点，两个LineSegment代表两个端点。

4. 使用多个PathFigure中的LineSegment来裁剪Rectangle。

<Canvas
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Rectangle Width="150" Height="100"
        Fill="Red" Stroke="Black" StrokeThickness="10">
        <Rectangle.Clip>
            <PathGeometry>
                <PathFigure StartPoint="10,10">
                    <LineSegment Point="75,50"/>
                    <LineSegment Point="0, 100" />
                </PathFigure>
                <PathFigure StartPoint="150,0">
                    <LineSegment Point="150, 100"/>
                    <LineSegment Point="75, 50" />
                </PathFigure>
            </PathGeometry>        
        </Rectangle.Clip>
    </Rectangle>
</Canvas>

这个例子比较简单，就不用多说了吧。其它的也就不多说了，没什么好说的，就是设一下相关属性就行了。

最后说一下，使用几何形状裁剪的不仅包括各种图形，还有各种显示元素，如图像，电影等等。可以把电影直接裁成圆的，挺有意思的。通过这些就可以做成各种各样的图形。