Silverlight Geometry 对象定义形状

本概述说明如何使用 Silverlight Geometry 对象来定义形状。它还将 Geometry 对象和 Shape 元素进行了比较。

　　什么是 Geometry？

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

　　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 属性。

　　XAML

<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）来绘制椭圆的内部。

　　XAML

<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，这将创建一个正方形。

　　XAML

<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 属性。只有位于椭圆区域内部的图像部分才会显示。

　　XAML

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

　　XAML

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

　　XAML

<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 是用控制点和终点定义的。

　　XAML

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

　　XAML

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

　　下图显示此示例的输出。

　　复合几何图形