Silverlight 2 转换和剪辑区域

核心提示： 图 4 在 3D 空间中围绕竖直轴旋转照片图 5 显示了实现 3D 旋转功能的 XAML，它声明了四个独立的图像：两个是前面的照片及其倒影，Silverlight 2 转换和剪辑区域(5)，另外两个是后面的照片及其倒影，倒影是通过使用 ScaleTransform 上下颠倒图像并将 Op

图 4 在 3D 空间中围绕竖直轴旋转照片

图 5 显示了实现 3D 旋转功能的 XAML。它声明了四个独立的图像：两个是前面的照片及其倒影，另外两个是后面的照片及其倒影。倒影是通过使用 ScaleTransform 上下颠倒图像并将 OpacityMask 和 LinearGradientBrush 组合使用以使反射图像随距离的延伸逐渐淡化而实现的。旋转是通过以编程方式处理 ScaleTransform (SpinScaleTransform) 和 SkewTransform (SpinSkewTransform) 实现的。随着旋转角的加大，SkewTransform 会增加顶部和底部边缘的角度，而 ScaleTransform 会水平挤压图像。经过精心设计后，就会得到一个很有说服力的 3D 旋转模拟。

图 5 Page.xaml

<UserControl x:Class="SpinAndZoom.Page"
　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　<Grid x:Name="LayoutRoot" Background="Black"
　　MouseLeftButtonDown="OnMouseLeftButtonDown" MouseMove="OnMouseMove"
　　MouseLeftButtonUp="OnMouseLeftButtonUp">
　　<Canvas x:Name="SpinCanvas" Width="400" Height="300">
　　　<Canvas.RenderTransform>
　　　　<TransformGroup>
　　　　　<ScaleTransform x:Name="SpinScaleTransform" CenterX="200" />
　　　　　<SkewTransform x:Name="SpinSkewTransform" CenterX="200" />
　　　　　<ScaleTransform x:Name="ZoomScaleTransform" CenterX="200"
　　　　　　CenterY="150" />
　　　　</TransformGroup>
　　　</Canvas.RenderTransform>
　　　<!-- Front -->
　　　<Image x:Name="Front" Source="Images/Abby.jpg" Canvas.Left="0"
　　　　Canvas.Top="0" Width="400" Height="300" Visibility="Visible"
　　　　Stretch="Fill" />
　　　<!-- Front reflection -->
　　　<Image x:Name="FrontReflection" Source="Images/Abby.jpg"
　　　　Canvas.Left="0" Canvas.Top="500" Width="400" Height="200"
　　　　Visibility="Visible" Stretch="Fill">
　　　　<Image.RenderTransform>
　　　　　<ScaleTransform ScaleY="-1" />
　　　　</Image.RenderTransform>
　　　　<Image.OpacityMask>
　　　　　<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
　　　　　　<GradientStop Offset="0.5" Color="#00000000" />
　　　　　　<GradientStop Offset="1" Color="#80000000" />
　　　　　</LinearGradientBrush>
　　　　</Image.OpacityMask>
　　　</Image>
　　　<!-- Back -->
　　　<Image x:Name="Back" Source="Images/Amy.jpg" Canvas.Left="0"
　　　　Canvas.Top="0" Width="400" Height="300" Visibility="Collapsed"
　　　　Stretch="Fill" />
　　　<!-- Back reflection -->
　　　<Image x:Name="BackReflection" Source="Images/Amy.jpg" Canvas.Left="0"
　　　　Canvas.Top="500" Width="400" Height="200" Visibility="Collapsed"
　　　　Stretch="Fill">
　　　　<Image.RenderTransform>
　　　　　<ScaleTransform ScaleY="-1" />
　　　　</Image.RenderTransform>
　　　　<Image.OpacityMask>
　　　　　<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
　　　　　　<GradientStop Offset="0.5" Color="#00000000" />
　　　　　　<GradientStop Offset="1" Color="#80000000" />
　　　　　</LinearGradientBrush>
　　　　</Image.OpacityMask>
　　　</Image>
　　</Canvas>
　</Grid>
</UserControl>