图形与变换：几何图形的强大功能与应用

### 图形与变换：几何图形的强大功能与应用 在图形绘制和界面设计中，几何图形起着至关重要的作用。本文将深入探讨各种几何图形的特性、组合方式以及相关的应用技巧。 #### 简单几何图形的转换 简单的几何图形，如直线和椭圆，可以在不同的表示形式之间进行转换。例如，将直线元素 `<Line Stroke="Blue" X1="0" Y1="0" X2="10" Y2="100"></Line>` 转换为 `LineGeometry` 形式： ```xml <Path Stroke="Blue"> <Path.Data> <LineGeometry StartPoint="0,0" EndPoint="10,100"></LineGeometry> </Path.Data> </Path> ``` 同样，椭圆元素 `<Ellipse Fill="Yellow" Stroke="Blue" Width="100" Height="50"></Ellipse>` 可以转换为 `EllipseGeometry` 形式： ```xml <Path Fill="Yellow" Stroke="Blue"> <Path.Data> <EllipseGeometry RadiusX="50" RadiusY="25" Center="50,25"></EllipseGeometry> </Path.Data> </Path> ``` 这里需要注意的是，椭圆的半径值是其宽度和高度值的一半。并且，使用 `Center` 属性可以偏移椭圆的位置。 这些简单的几何图形与对应的形状在功能上类似，但使用几何图形可以对矩形和椭圆进行偏移操作。不过，如果在 `Canvas` 上放置形状，`Canvas` 本身就可以实现形状的定位，此时偏移功能就不是必需的了。当需要在同一路径中组合多个几何图形或处理更复杂的曲线时，几何图形的优势才会更加明显。 #### 使用 GeometryGroup 组合图形 组合几何图形的最简单方法是使用 `GeometryGroup`，并将其他派生自 `Geometry` 的对象嵌套在其中。以下是一个将椭圆放置在正方形旁边的示例： ```xml <Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="10" Canvas.Left="10"> <Path.Data> <GeometryGroup> <RectangleGeometry Rect="0,0 100,100"></RectangleGeometry> <EllipseGeometry Center="150,50" RadiusX="35" RadiusY="25"></EllipseGeometry> </GeometryGroup> </Path.Data> </Path> ``` 这种标记的效果与提供两个 `Path` 元素（一个包含 `RectangleGeometry`，另一个包含 `EllipseGeometry`）相同，也等同于使用 `Rectangle` 和 `Ellipse` 形状。但这种方法有一个优点，即使用一个 `Path` 元素替代了两个元素（`Rectangle` 和 `Ellipse`），从而减少了用户界面的开销。一般来说，使用较少元素和更复杂几何图形的页面比使用大量简单几何图形元素的页面性能更高。不过，在只有几十个形状的页面中，这种效果并不明显，但在需要数百或数千个形状的页面中，性能差异可能会变得显著。 当然，将几何图形组合在单个 `Path` 元素中也有缺点，即无法分别对不同形状进行事件处理，所有鼠标事件都由 `Path` 元素触发。并且，虽然 Silverlight 提供了 `HitTest()` 方法来进行元素的命中测试，但不支持对几何图形进行命中测试。 需要注意的是，与 WPF 不同，Silverlight 不允许在多个路径中重用单个几何图形对象。如果两个对象共享相同的几何图形，必须为每个对象创建一个不同的副本。 当形状相交时，`GeometryGroup` 会变得更加有趣。它使用 `FillRule` 属性（可以是 `EvenOdd` 或 `Nonzero`）来决定填充哪些形状。例如，将椭圆放置在正方形上方： ```xml <Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="10" Canvas.Left="10"> <Path.Data> <GeometryGroup> <RectangleGeometry Rect="0,0 100,100"></RectangleGeometry> <EllipseGeometry Center="50,50" RadiusX="35" RadiusY="25"></EllipseGeometry> </GeometryGroup> </Path.Data> </Path> ``` 这段标记会创建一个带有椭圆形状空洞的正方形。如果将 `FillRule` 更改为 `Nonzero`，则会得到一个实心椭圆覆盖在实心矩形上，两者都使用相同的黄色填充。 #### PathGeometry 绘制曲线和直线 `PathGeometry` 是几何图形中的强大工具，它可以绘制其他几何图形所能绘制的任何图形，甚至更多。唯一的缺点是语法较长且有些复杂。 每个 `PathGeometry` 对象由一个或多个 `PathFigure` 对象组成（存储在 `PathGeometry.Figures` 集合中）。`PathFigure` 是一组连续的连接直线和曲线，可以是封闭的或开放的。可以根据需要提供任意数量的线段，每个线段从上一个线段的终点继续绘制。如果图形中最后一条线的终点连接到第一条线的起点，则该图形是封闭的。 `PathFigure` 类有四个关键属性，如下表所示： | 属性名 | 描述 | | ---- | ---- | | StartPoint | 指示图形的线条开始的点 | | Segments | 用于绘制图形的 `PathSegment` 对象集合 | | IsClosed | 如果为 `true`，Silverlight 会添加一条直线来连接起点和终点（如果它们不同） | | IsFilled | 如果为 `true`，图形内部的区域将使用 `Path.Fill` 画笔进行填充 | `PathSegment` 类有多种派生类型，包括简单的 `LineSegment`（绘制直线）和复杂的 `BezierSegment`（绘制曲线）等。可以自由组合不同的线段来构建图形，以下是可用的线段类列表： | 类名 | 描述 | | ---- | ---- | | LineSegment | 在两点之间创建一条直线 | | ArcSegment | 在两点之间创建一个椭圆弧 | | BezierSegment | 在两点之间创建一条贝塞尔曲线 | | QuadraticBezierSegment | 创建一种更简单的贝塞尔曲线，只有一个控制点，计算速度更快 | | PolyLineSegment | 创建一系列直线 | | PolyBezierSegment | 创建一系列贝塞尔曲线 | | PolyQuadraticBezierSegment | 创建一系列更简单的二次贝塞尔曲线 | ##### 绘制直线 使用 `LineSegment` 和 `PathGeometry` 类可以轻松创建简单的直线。设置 `StartPoint` 并为每条线段添加一个 `LineSegment`，`LineSegment.Point` 属性标识每个线段的终点。例如，以下标记创建了一个直角三角形： ```xml <Path Stroke="Blue"> <Path.Data> <PathGeometry> <PathFigure IsClosed="True" StartPoint="10,100"> <LineSegment Point="100,100" /> <LineSegment Point="100,50" /> </PathFigure> </PathGeometry> </Path.Data> </Path> ``` Silverlight 允许在代码中操作图形，例如添加或删除路径线段，或通过修改现有线段或更改形状的起点来动态变形。甚至可以使用动画来平滑地、渐进地修改路径中的点。 ##### 绘制弧线 弧线比直线更复杂一些。使用 `ArcSegment.Point` 属性标识弧线的终点，就