Silverlight 参考： 几何图形 - MSDN

用 Silverlight Geometry 对象来定义形状？

 什么是 Geometry？

Geometry 对象（如 EllipseGeometry、PathGeometry 和 GeometryGroup）可以用于描绘二维 (2-D) 形状的几何图形。这些几何图形的描绘具有许多用途，例如，定义一个要绘制到屏幕的形状或者定义剪辑区域。Geometry 对象可以很简单（如矩形和圆），也可以是基于两个或更多个 Geometry 对象创建的复合形状。使用 PathGeometry 对象可以创建更复杂的几何图形，这些对象可用于描绘弧线和曲线。 我们这里，将 Geometry 对象和 Shape 元素进行了比较：

Geometry 与 Shape 的比较

Geometry 和 Shape 类的相似之处在于它们均描绘二维形状（例如，比较 EllipseGeometry 和 Ellipse），但它们之间也存在一些重要的区别。例如，Shape 对象是 UIElement 对象，而 Geometry 对象不是。因为是 UIElement 对象，所以 Shape 对象可以进行自我呈现并具有 Opacity、OpacityMask 以及 Geometry 对象所没有的其他图形属性。尽管 Shape 对象比 Geometry 对象更易于使用，但 Geometry 对象更通用。

一个 Shape（Path 类）使用 Geometry 来描绘内容。通过使用 Geometry 设置 Path 的 Data 属性以及设置它的 Fill 和 Stroke 属性，可以呈现 Geometry。

 采用 Geometry 的常见属性

下表列出了采用 Geometry 对象的一些属性。

 

类型	属性
Path	Data
UIElement	Clip

 

简单的几何图形类型

Geometry 对象可以分为三个类别：简单几何图形、路径几何图形以及复合几何图形。

简单的几何图形类包括 LineGeometry、RectangleGeometry 和 EllipseGeometry，用于创建基本的几何形状，如直线、矩形和圆。

• LineGeometry 通过指定直线的起点和终点来定义。

• RectangleGeometry 通过使用 Rect 结构来定义，该结构指定矩形的相对位置、高度和宽度。您可以通过设置 RadiusX 和 RadiusY 属性来创建圆角矩形。

• EllipseGeometry 通过中心点、x 半径和 y 半径来定义。

尽管可以通过使用 PathGeometry 或通过将 Geometry 对象组合在一起来创建这些形状以及更复杂的形状，但是简单几何图形类提供了一种生成这些基本几何形状的简单方式。

下面的示例演示如何创建并呈现 LineGeometry。前面已提到，Geometry 对象无法进行自我绘制，因此本示例使用 Path 形状来呈现直线。因为直线没有面积，设置 Path 的 Fill 属性没有任何效果；因此仅指定 Stroke 和 StrokeThickness 属性。

 

 

<Canvas Width="200" Height="200">
  <Path Stroke="Black" StrokeThickness="1" >
    <Path.Data>
      <LineGeometry StartPoint="10,20" EndPoint="100,130" />
    </Path.Data>
  </Path>
</Canvas>

 

 

下图显示此示例的输出。

从 (10,20) 绘制到 (100,130) 的 LineGeometry

下一个示例演示如何创建并呈现 EllipseGeometry。该示例将 EllipseGeometry 的 Center 设置为点 (50,50) 并将 x 半径和 y 半径均设置为 50，这将创建一个直径为 100 的圆。通过为 Path 元素的 Fill 属性赋值（在本例中为 Gold）来绘制椭圆的内部。

 

<Canvas>
  <Path Fill="Gold" Stroke="Black" StrokeThickness="1">
    <Path.Data>
      <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
    </Path.Data>
  </Path>
</Canvas>

 

 

下图显示此示例的输出。

绘制在 (50,50) 处的 EllipseGeometry

 

下面的示例演示如何创建并呈现 RectangleGeometry。矩形的位置和尺寸由 Rect 结构定义。位置是 (50,50)，高度和宽度均为 25，这将创建一个正方形。

 

<Canvas>
  <Path Fill="LemonChiffon" Stroke="Black" StrokeThickness="1">
    <Path.Data>
      <RectangleGeometry Rect="50,50,25,25" />
    </Path.Data>
  </Path>
</Canvas>

 

 

下图显示此示例的输出。

绘制在 (50,50) 处的 RectangleGeometry

下面的示例演示如何将 EllipseGeometry 用作图像的剪辑区域。用 Width 200 和 Height 150 定义了一个 Image 对象。一个 RadiusX 值为 100、RadiusY 值为 75、Center 值为 100,75 的 EllipseGeometry 设置为图像的 Clip 属性。只有位于椭圆区域内部的图像部分才会显示。

 

<Grid x:Name="LayoutRoot" Background="White">
  <Image Source="Water_lilies.jpg"
    Width="200" Height="150">
    <Image.Clip>
      <EllipseGeometry RadiusX="100" RadiusY="75" Center="100,75"/>
    </Image.Clip>
  </Image>
</Grid>

 

 

下图显示此示例的输出。

用于剪辑图像的 EllipseGeometry

 

 

路径几何图形

PathGeometry 对象和几何图形 mini-language 提供了描绘由弧线、曲线和直线组成的多个复杂图形的方法。

PathGeometry 的核心是 PathFigure 对象的集合；这些对象之所以这样命名是因为每个图形都描绘 PathGeometry 中的一个离散形状。每个 PathFigure 自身又由一个或多个 PathSegment 对象组成，每个这样的对象均描绘图形的一条线段。下表列出了各种线段类型。

 

线段类型	说明
ArcSegment	在两个点之间创建一条椭圆弧线。
BezierSegment	在两个点之间创建一条三次方贝塞尔曲线。
LineSegment	在两个点之间创建一条直线。
PolyBezierSegment	创建一系列三次方贝塞尔曲线。
PolyLineSegment	创建一系列直线。
PolyQuadraticBezierSegment	创建一系列二次贝塞尔曲线。
QuadraticBezierSegment	创建一条二次贝塞尔曲线。

PathFigure 中的线段将合并为一个几何形状，该形状将每一条线段的终点作为下一条线段的起点。PathFigure 的 StartPoint 属性指定绘制第一条线段的起始点。后面的每条线段都以上一条线段的终点作为起点。例如，通过将 StartPoint 属性设置为 (10,50) 并创建 Point 属性设置为 (10,150) 的 LineSegment，可定义一条从 (10,50) 到 (10,150) 的竖线。

下面的示例创建一个简单 PathGeometry（包含具有 LineSegment 的一个 PathFigure）并使用 Path 元素来显示它。将 PathFigure 对象的 StartPoint 设置为 (10,20)，并用终点 (100,130) 定义一个 LineSegment。

 

<Canvas>
  <Path Stroke="Black" StrokeThickness="1">
    <Path.Data>
      <PathGeometry>
        <PathGeometry.Figures>
          <PathFigure StartPoint="10,20">
            <PathFigure.Segments>
              <LineSegment Point="100,130"/>
            </PathFigure.Segments>
          </PathFigure>
        </PathGeometry.Figures>
      </PathGeometry>
    </Path.Data>
  </Path>
</Canvas>

 

下图显示了此示例创建的 PathGeometry。

包含一个 LineSegment 的 PathGeometry

有必要将此示例与前面的 LineGeometry 示例进行比较。PathGeometry 使用的语法比简单的 LineGeometry 使用的语法要详细得多，在本例中使用 LineGeometry 类可能更有效，但是使用 PathGeometry 的详细语法可以创建极其复杂的几何区域。

通过组合 PathSegment 对象可以创建更复杂的几何图形。

 

下一个示例使用一个 BezierSegment、一个 LineSegment 以及一个 ArcSegment 来创建形状。

• 该示例首先通过定义四个点来创建一个三次方贝塞尔曲线：起点（是前一条线段的终点）、终点 (Point3) 以及两个控制点（Point1 和 Point2）。三次方贝塞尔曲线的两个控制点的作用像磁铁一样，朝着自身的方向吸引本应为直线的部分，从而形成一条曲线。第一个控制点 Point1 影响曲线的开始部分；第二个控制点 Point2 影响曲线的结束部分。

• 然后该示例添加一个 LineSegment，在前面的 BezierSegment 的终点到其 LineSegment 属性所指定的点之间绘制该线段。

• 然后该示例添加一个 ArcSegment，该线段从前面的 LineSegment 的终点绘制到它的 Point 属性所指定的点。该示例还指定弧线的 x 半径和 y 半径 (Size)、旋转角度 (RotationAngle)、指示最终弧线的角度应为多大的标志 (IsLargeArc) 以及指示弧线绘制方向的值 (SweepDirection)。

<Canvas>
  <Path Stroke="Black" StrokeThickness="1" >
    <Path.Data>
      <PathGeometry>
        <PathGeometry.Figures>
          <PathFigure StartPoint="10,50">
            <PathFigure.Segments>
              <BezierSegment Point1="100,0"
                Point2="200,200"
                Point3="300,100"/>
              <LineSegment Point="400,100" />
              <ArcSegment Size="50,50" RotationAngle="45"
                IsLargeArc="True" SweepDirection="Clockwise"
                Point="200,100"/>
            </PathFigure.Segments>
          </PathFigure>
        </PathGeometry.Figures>
      </PathGeometry>
    </Path.Data>
  </Path>
</Canvas>

 

下图显示了此示例创建的形状。

PathGeometry

通过在一个 PathGeometry 内使用多个 PathFigure 对象，可以创建更复杂的几何图形。

下面的示例创建一个具有两个 PathFigure 对象的 PathGeometry，其中每个对象均包含多个 PathSegment 对象。使用了前面示例中的 PathFigure 以及具有一个 PolyLineSegment 和一个 QuadraticBezierSegment 的 PathFigure。PolyLineSegment 是用点列表定义的，QuadraticBezierSegment 是用控制点和终点定义的。

 

<Canvas>
  <Path Stroke="Black" StrokeThickness="1" >
    <Path.Data>
      <PathGeometry>
        <PathGeometry.Figures>
          <PathFigure StartPoint="10,50">
            <PathFigure.Segments>
              <BezierSegment Point1="100,0"
                Point2="200,200"
                Point3="300,100"/>
              <LineSegment Point="400,100" />
              <ArcSegment Size="50,50" RotationAngle="45"
                IsLargeArc="True" SweepDirection="Clockwise"
                Point="200,100"/>
            </PathFigure.Segments>
          </PathFigure>

          <PathFigure StartPoint="10,100">
            <PathFigure.Segments>
              <PolyLineSegment Points="50,100 50,150" />
              <QuadraticBezierSegment Point1="200,200" Point2="300,100"/>
            </PathFigure.Segments>
          </PathFigure>
        </PathGeometry.Figures>
      </PathGeometry>
    </Path.Data>
  </Path>
</Canvas>

 

 

下图显示了此示例创建的形状。

具有多个图形的 PathGeometry

路径标记语法

Silverlight Geometry 对象支持使用一系列特殊的移动和绘制命令的 XAML 属性语法。有关更多信息，请参见路径标记语法。

复合几何图形

可以使用 GeometryGroup 对象来创建复合几何图形对象。GeometryGroup 创建它所包含的 Geometry 对象的组合体，但不合并其面积。可以向 GeometryGroup 中添加任意数量的 Geometry 对象。下面的示例使用 GeometryGroup 创建复合 Geometry。

 

<Canvas>
  <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
    <Path.Data>

      <!-- Creates a composite shape from three geometries. -->
      <GeometryGroup FillRule="EvenOdd">
        <LineGeometry StartPoint="10,10" EndPoint="50,30" />
        <EllipseGeometry Center="40,70" RadiusX="30" RadiusY="30" />
        <RectangleGeometry Rect="30,55 100 30" />
      </GeometryGroup>
    </Path.Data>
  </Path>
</Canvas>

 

 

下图显示此示例的输出。

复合几何图形