Silverlight图形变换与特效全解析

### Silverlight 图形变换与特效全解析 #### 1. 动态效果与图形变换基础 在图形处理中，变换可以创造出许多复杂的效果，如旋转形状、移动形状以及动态扭曲等。要对形状进行变换，需将 `RenderTransform` 属性赋值给想要使用的变换对象。不同的变换对象需要填充不同的属性来进行配置。 例如，旋转一个形状时，需要使用 `RotateTransform` 并提供以度为单位的角度。以下是一个将矩形旋转 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> ``` 这种方式默认绕形状的原点（左上角）旋转。 若想绕不同的点旋转，`RotateTransform` 提供了 `CenterX` 和 `CenterY` 属性来指定旋转中心点。示例代码如下： ```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> ``` 不过，`CenterX` 和 `CenterY` 使用的是绝对坐标，对于动态内容不太方便。此时，可使用 `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> ``` `RenderTransformOrigin` 属性通常比 `CenterX` 和 `CenterY` 更实用，且设置该属性时，可使用大于 1 或小于 0 的值来指定形状边界框外的点。 #### 2. 变换与布局容器 `RenderTransform` 和 `RenderTransformOrigin` 属性不仅适用于形状，所有继承自 `UIElement` 类的 Silverlight 元素都支持这些属性，包括按钮、文本框、`TextBlock` 以及整个布局容器等。 需要注意的是，对布局容器中的元素应用变换时，变换是在布局之后进行的。对于使用基于坐标布局的 `Canvas` 来说，这没有影响，但对于其他基于元素相对位置和大小进行布局的容器，效果就很重要了。例如，在 `StackPanel` 中放置一个旋转的按钮，`StackPanel` 会先正常布局按钮，旋转操作在渲染前进行，可能导致旋转的按钮与下方的按钮重叠。 #### 3. 反射效果 变换可用于实现多种效果，反射效果就是其中之一。创建反射效果的步骤如下： 1. 显式复制要应用效果的内容。例如，创建反射效果需要两个相同的 `Image` 元素，一个显示原始图像，另一个显示反射副本。示例代码如下： ```xml <Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Image Grid.Row="0" Source="harpsichord.jpg"></Image> <Image Grid.Row="1" Source="harpsichord.jpg"></Image> </Grid> ``` 2. 修改副本内容使其更像反射效果。使用 `ScaleTransform` 翻转图像，并使用 `OpacityMask` 使其逐渐淡出。示例代码如下： ```xml <Image Grid.Row="1" Source="harpsichord.jpg" RenderTransformOrigin="0,0.4"> <Image.RenderTransform> <ScaleTransform ScaleY="-0.8"></ScaleTransform> </Image.RenderTransform> <Image.OpacityMask> <LinearGradientBrush StartPoint="0,0 ```