Silverlight2D图形绘制与形状应用全解析

### Silverlight 2D 图形绘制与形状应用全解析 #### 1. 引言 Silverlight 的 2D 绘图支持是许多高级功能的基础，如自定义控件、交互式图形和动画等。即便不打算为应用创建定制化图形，也需掌握 Silverlight 的绘图基础，它能用于添加专业效果，还能为图形添加交互性。Silverlight 支持 WPF 绘图功能的一个子集，可通过形状模型用矩形、椭圆、线条和曲线构建图形，还能将现有矢量图形转换为所需的 XAML 格式以重复使用。 #### 2. 基本形状概述 在 Silverlight 用户界面中绘制 2D 图形内容，最简单的方法是使用形状。形状是代表简单线条、椭圆、矩形和多边形的专用类，从技术上讲，它们被称为绘图基元，可组合这些基本元素创建更复杂的图形。 形状都派生自 FrameworkElement，这带来了几个重要结果： - 形状会自行绘制，无需管理失效和绘制过程。例如，当内容移动、页面调整大小或形状属性更改时，无需手动重新绘制形状。 - 形状的组织方式与其他元素相同，可将形状放置在任何布局容器中，其中 Canvas 是最有用的容器，因为它允许在特定坐标放置形状，这在构建复杂图形时很重要。 - 形状支持与其他元素相同的事件，处理按键、鼠标移动和鼠标点击时无需额外工作，可使用与任何元素相同的事件集。 Silverlight 采用了一些优化措施来使 2D 绘图尽可能快。例如，在复杂图形中形状常重叠，Silverlight 使用复杂算法确定形状的哪些部分不可见，从而避免渲染后又被其他形状覆盖的开销。 #### 3. 形状类 每个形状都派生自抽象的 System.Windows.Shapes.Shape 类，从该类派生的类相对较少，具体如下： - Line：代表连接两点的直线。 - Ellipse：椭圆。 - Rectangle：矩形。 - Polyline：一系列相连的直线。 - Polygon：由一系列相连直线组成的封闭形状。 - Path：可在单个元素中组合基本形状的强大类。 Shape 类自身虽不能做什么，但定义了一组重要属性，如下表所示： | 名称 | 描述 | | ---- | ---- | | Fill | 设置用于填充形状表面（边界内所有部分）的画笔对象。 | | Stroke | 设置用于绘制形状边缘（边界）的画笔对象。 | | StrokeThickness | 设置边界的厚度，以像素为单位。 | | StrokeStartLineCap 和 StrokeEndLineCap | 确定线条起点和终点边缘的轮廓，仅对 Line、Polyline 和（有时）Path 形状有影响，其他封闭形状无起点和终点。 | | StrokeDashArray、StrokeDashOffset 和 StrokeDashCap | 允许创建形状的虚线边界，可控制虚线的大小、频率以及每条虚线起点和终点边缘的轮廓。 | | StrokeLineJoin 和 StrokeMiterLimit | 确定形状角的轮廓，影响不同线条相交的顶点，如矩形的角，对无角的形状（如 Line 和 Ellipse）无影响。 | | Stretch | 确定形状如何填充可用空间，可用于创建能扩展以适应容器的形状，但通常很少设置，因为每个形状使用默认值更合适。 | | GeometryTransform | 允许应用变换对象来更改绘制形状的坐标系，可使形状倾斜、旋转或位移，在动画图形时特别有用。 | #### 4. 矩形和椭圆 矩形和椭圆是最简单的形状。创建时，设置熟悉的 Height 和 Width 属性（继承自 FrameworkElement）定义形状大小，再设置 Fill 或 Stroke 属性（或两者）使形状可见，也可使用 MinHeight、MinWidth、HorizontalAlignment、VerticalAlignment 和 Margin 等属性。 需注意，如果未为 Stroke 或 Fill 属性提供画笔，形状将不会显示。以下是一个使用 StackPanel 将椭圆堆叠在矩形上的简单示例： ```xml <StackPanel> <Ellipse Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left"></Ellipse> <Rectangle Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left"></Rectangle> </StackPanel> ``` Ellipse 类不添加任何属性，Rectangle 类添加了 RadiusX 和 RadiusY 两个属性。当设置为非零值时，可创建圆角矩形。可将 RadiusX 和 RadiusY 视为描述用于填充矩形角的椭圆。例如，将两个属性都设置为 10，Silverlight 会使用 10 像素宽的圆的边缘绘制角。半径越大，矩形的圆角部分越多。若 RadiusY 增加得比 RadiusX 多，矩形左右两侧的角会更平缓地圆角，上下边缘的角会更尖锐地圆角。若将 RadiusX 设置为矩形的宽度，RadiusY 设置为矩形的高度，矩形将变成普通椭圆。 #### 5. 形状的大小和放置 硬编码大小通常不是创建用户界面的理想方法，它会限制处理动态内容的能力，也会增加将应用本地化到其他语言的难度。但在绘制形状时，这些问题并非总是适用，很多时候需要更精确地控制形状的放置。不过，在某些情况下，可使用比例大小使设计更灵活。 椭圆和矩形元素都能根据可用空间调整自身大小。如果不提供 Height 和 Width 属性，形状将根据其容器进行大小调整。例如，使用以下精简标记可创建一个填充页面的椭圆： ```xml <Grid> <Ellipse Fill="Yellow" Stroke="Blue"></Ellipse> </Grid> ``` 这里，Grid 包含一个按比例大小的行，椭圆填充整行，行填充 Grid，Grid 填充页面。 这种大小调整行为取决于 Stretch 属性的值（在 Shape 类中定义），默认值为 Fill，若未指定显式大小，形状会拉伸以填充容器。Stretch 枚举的所有可能值如下表所示： | 名称 | 描述 | | ---- | ---- | | Fill | 形状在宽度和高度上拉伸以完全适应容器（若设置了显式高度和宽度，此设置无效）。 | | None | 形状不拉伸，除非设置非零的宽度和高度（使用 Height 和 Width 或 MinHeight 和 MinWidth 属性），否则形状不会显示。 | | Uniform | 宽度和高度按比例增加，直到形状到达容器边缘。对于椭圆，会得到适合容器的最大圆；对于矩形，会得到最大可能的正方形（若设置了显式高度和宽度，形状将在这些边界内调整大小）。 | | UniformToFill | 宽度和高度按比例调整，直到形状填充所有可用的高度和宽度。例如，将设置此 Stretch 的矩形放置在 100×200 像素的页面中，会得到一个 200×200 的矩形，部分会被裁剪掉（若设置了显式高度和宽度，形状将在这些边界内调整大小）。 | 通常，Stretch 值为 Fill 与同时设置 HorizontalAlignment 和 VerticalAlignment 为 Stretch 相同，但如果为形状设置固定的 Width 或 Height 值，HorizontalAlignment 和 VerticalAlignment 值将被忽略，而 Stretch 设置仍会影响形状内容在给定边界内的大小调整。 在放置形状方面，Silverlight 形状使用与其他元素相同的布局系统，但有些布局容器不太合适。例如，StackPanel、DockPanel 和 WrapPanel 通常不是理想选择，因为它们旨在分隔元素。Grid 更灵活，允许在同一单元格中放置多个元素，但不能在单元格的不同部分定位它们。理想的容器是 Canvas，它要求使用附加的 Left、Top、Right 和 Bottom 属性指定每个形状的坐标，能完全控制形状的重叠方式。例如： ```xml <Canvas> <Ellipse Fill="Yellow" Stroke="Blue" Canvas.Left="100" Canvas.Top="50" Width="100" Height="50"></Ellipse> <Rectangle Fill="Yellow" Stroke="Blue" Canvas.Left="30" Canvas.Top="40" Width="100" Height="50"></Rectangle> </Canvas> ``` 在 Canvas 中，标签的顺序很重要。在上述示例中，矩形叠加在椭圆上，因为椭圆在列表中先出现，所以先绘制。若不希望这样，可重新排列标记或使用 Canvas.ZIndex 附加属性将元素移动到特定层。 #### 6. 使用