Silverlight中的变换、投影与像素着色器技术详解

# Silverlight 中的变换、投影与像素着色器技术详解 ## 1. 变换（Transforms）概述 在绘图任务中，变换是一个非常实用的概念。它通过秘密地改变形状或元素所使用的坐标系，来改变其绘制方式。在 Silverlight 里，变换由从 `System.Windows.Media.Transform` 类派生的类来表示，常见的变换类如下表所示： | 名称 | 描述 | 重要属性 | | --- | --- | --- | | TranslateTransform | 按一定量移动坐标系，适用于在不同位置绘制相同形状 | X, Y | | RotateTransform | 旋转坐标系，绘制的形状会围绕选定的中心点旋转 | Angle, CenterX, CenterY | | ScaleTransform | 对坐标系进行缩放，使形状绘制得更小或更大，可在 X 和 Y 维度应用不同程度的缩放 | ScaleX, ScaleY, CenterX, CenterY | | SkewTransform | 以一定角度倾斜坐标系，例如将正方形变成平行四边形 | AngleX, AngleY, CenterX, CenterX | | CompositeTransform | 将 ScaleTransform、SkewTransform、RotateTransform 和 TranslateTransform 融合在一起（按此顺序应用），是一种 XAML 便利方式 | CenterX, CenterY, Rotation, ScaleX, ScaleY, SkewX, SkewY, TranslateX, TranslateY | | MatrixTransform | 使用提供的矩阵进行矩阵乘法来修改坐标系，是最复杂的选项，需要一定的数学技能 | Matrix | | TransformGroup | 组合多个变换，以便一次性应用。应用变换的顺序很重要，会影响最终结果 | N/A | ### 1.1 变换的工作原理 从技术上讲，所有变换都使用矩阵数学来改变形状的坐标。但使用预构建的变换类（如 `TranslateTransform`、`RotateTransform`、`ScaleTransform`、`SkewTransform`）比使用 `MatrixTransform` 并计算所需的矩阵要简单得多。当使用 `CompositeTransform` 或 `TransformGroup` 执行一系列变换时，Silverlight 会将这些变换融合成一个单一的 `MatrixTransform`，以确保最佳性能。 ### 1.2 变换的应用场景 变换在多种不同的上下文中都非常有用，例如： - **形状倾斜**：使用 `RotateTransform` 可以轻松创建特定形状。 - **形状重复**：许多绘图使用相似的形状在不同位置构建。通过变换，可以移动、旋转、调整形状大小等。 - **动态效果和动画**：借助变换可以创建复杂的效果，如旋转形状、将其从一个位置移动到另一个位置以及动态扭曲它。 ### 1.3 变换形状的操作步骤 要对形状进行变换，需要将 `RenderTransform` 属性分配给要使用的变换对象。根据使用的变换对象，需要填写不同的属性来配置它，具体如下： 1. **旋转形状示例**：如果要旋转一个形状，需要使用旋转变换并提供角度（以度为单位）。以下是将矩形旋转 25 度的示例代码： ```xml <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" Canvas.Left="100" Canvas.Top="100"> <Rectangle.RenderTransform> <RotateTransform Angle="25" /> </Rectangle.RenderTransform> </Rectangle> ``` 这种方式旋转形状时，是围绕形状的原点（左上角）旋转的。 2. **围绕不同点旋转形状**：`RotateTransform` 提供了 `CenterX` 和 `CenterY` 属性，可以指定旋转的中心点。以下是将矩形围绕其中心点旋转 25 度的示例代码： ```xml <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" Canvas.Left="100" Canvas.Top="100"> <Rectangle.RenderTransform> <RotateTransform Angle="25" CenterX="45" CenterY="5" /> </Rectangle.RenderTransform> </Rectangle> ``` 3. **使用 `RenderTransformOrigin` 属性**：`CenterX` 和 `CenterY` 属性使用绝对坐标，对于动态内容可能会有问题。Silverlight 提供了 `RenderTransformOrigin` 属性，它使用比例坐标系（从 0 到 1）来设置中心点。以下是使用该属性将矩形围绕其中心点旋转 25 度的示例代码： ```xml <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" Canvas.Left="100" Canvas.Top="100" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <RotateTransform Angle="25" /> </Rectangle.RenderTransform> </Rectangle> ``` ### 1.4 变换与布局容器 `RenderTransform` 和 `RenderTransformOrigin` 属性不仅适用于形状，所有从 `UIElement` 类派生的 Silverlight 元素都支持这些属性，包括按钮、文本框、`TextBlock` 以及整个布局容器等。需要注意的是，对布局容器中的元素应用变换是在布局完成后进行的。对于简单的 `Canvas`（使用基于坐标的布局），这种区别没有影响；但对于其他基于元素的放置和大小相对定位元素的布局容器，效果就很重要了。例如，在 `StackPanel` 中旋转一个按钮，`StackPanel` 会像按钮正常放置一样进行布局，旋转在按钮渲染之前发生，可能导致旋转的按钮与下方的按钮重叠。 ### 1.5 反射效果 变换对于应用多种效果很重要，反射效果就是一个例子。要在 Silverlight 中创建反射效果，操作步骤如下： 1. **复制内容**：首先明确复制要使用该效果的内容。例如，要创建反射效果，需要两个相同的 `Image` 元素，一个显示原始图像，另一个显示反射副本： ```xml <Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition></Ro ```