什么是 Geometry?
Geometry 对象(如 EllipseGeometry、PathGeometry 和 GeometryGroup)可以用于描绘 二维 (2-D) 形状的几何图形,
Silverlight图形:几何图形
。这些几何图形的描绘具有许多用途,例如,定义一个要绘制到 屏幕的形状或者定义剪辑区域。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
下图显示此示例的输出。
从 (10,20) 绘制到 (100,130) 的 LineGeometry
下一个示例演示如何创建并呈现 EllipseGeometry。该示例将 EllipseGeometry 的 Center 设置为点 (50,50) 并将 x 半径和 y 半径均设置为 50,这将创建一个直径为 100 的圆。通过为 Path 元素的 Fill 属性赋值(在本例中为 Gold)来绘制椭圆的内部。
XAML
下图显示此示例的输出。
绘制在 (50,50) 处的 EllipseGeometry
下面的示例演示如何创建并呈现 RectangleGeometry。矩形的位置和尺寸由 Rect 结构定 义。位置是 (50,50),高度和宽度均为 25,这将创建一个正方形。
XAML
下图显示此示例的输出。
绘制在 (50,50) 处的 RectangleGeometry
下面的示例演示如何将 EllipseGeometry 用作图像的剪辑区域。用 Width 200 和 Height 150 定义了一个 Image 对象。一个 RadiusX 值为 100、RadiusY 值为 75、Center 值为 100,75 的 EllipseGeometry 设置为图像的 Clip 属性。只有位于椭圆区域内部的图像 部分才会显示。
XAML
下图显示此示例的输出。
用于剪辑图像的 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) 的竖线 ,
电脑资料
《Silverlight图形:几何图形》(http://meiwen.anslib.com)。下面的示例创建一个简单 PathGeometry(包含具有 LineSegment 的一个 PathFigure) 并使用 Path 元素来显示它。将 PathFigure 对象的 StartPoint 设置为 (10,20),并用终 点 (100,130) 定义一个 LineSegment。
XAML
下图显示了此示例创建的 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
下图显示了此示例创建的形状。
PathGeometry
通过在一个 PathGeometry 内使用多个 PathFigure 对象,可以创建更复杂的几何图形。
下面的示例创建一个具有两个 PathFigure 对象的 PathGeometry,其中每个对象均包含 多个 PathSegment 对象。使用了前面示例中的 PathFigure 以及具有一个 PolyLineSegment 和一个 QuadraticBezierSegment 的 PathFigure。PolyLineSegment 是用点列表定义的, QuadraticBezierSegment 是用控制点和终点定义的。
XAML
下图显示了此示例创建的形状。
具有多个图形的 PathGeometry
路径标记语法
Silverlight Geometry 对象支持使用一系列特殊的移动和绘制命令的 XAML 属性语法。
复合几何图形
可以使用 GeometryGroup 对象来创建复合几何图形对象。GeometryGroup 创建它所包含 的 Geometry 对象的组合体,但不合并其面积。可以向 GeometryGroup 中添加任意数量的 Geometry 对象。下面的示例使用 GeometryGroup 创建复合 Geometry。
XAML
下图显示此示例的输出。
复合几何图形