您可以使用"透视转换"来将三维效果应用于任何 Silverlight UIElement。例如,您可以制造这样一个假象,即对象朝向您或远离您进行旋转,如下图中所示。
使用透视转换的图像
尽管上图中显示了应用于一个简单图像的透视转换,但您可以将透视转换应用于 UIElement,包括控件。例如,您可以将该效果应用于 Grid,而后者又包含 TextBox 和 Button。尽管旋转这些控件,但用户可以在 TextBox 中键入内容并单击 Button(假定这些控件可见)。
使用透视转换的另一个常见情形是相对于彼此对对象进行排列,以便创建三维效果,如下图中所示。
堆叠对象以创建三维效果
除了创建静态的三维效果外,还可以对透视转换属性进行动画处理,以便创建移动的三维效果。
本概述重点介绍透视转换用于在三维空间中旋转和移动对象的属性。下面的示例允许您对这些属性进行试验,以便看看它们对某一对象的效果。以下各节将更详细地说明这些属性。
说明: |
---|
透视转换与三维引擎不等效;但是,它们都可用于使得二维 Silverlight 内容就像是在三维平面上绘制的一样。 |
本主题包括下列各节。
若要将某一属性转换应用于 UIElement,请将 Projection 对象的 UIElement 属性设置为 PlaneProjection。PlaneProjection 定义转换在空间中呈现的方式。下面的示例显示了一个简单的情况。
<StackPanel Margin="35" Background="Gray"> <StackPanel.Projection> <PlaneProjection RotationX="-35" RotationY="-35" RotationZ="15" /> </StackPanel.Projection> <TextBlock Margin="10">Type Something Below</TextBlock> <TextBox Margin="10"></TextBox> <Button Margin="10" Content="Click" Width="100" /> </StackPanel>
在上例中,RotationX、RotationY 和 RotationZ 属性指定围绕一个轴旋转 StackPanel 的度数。例如,RotationX 属性指定围绕对象的水平轴旋转。下图演示了 RotationX 属性如何围绕 x 轴旋转一个对象。
在该图中,还要注意 y 轴和 z 轴是如何显示的。所有这三个轴相交的点称作旋转中心。
RotationY 属性围绕旋转中心的 y 轴旋转。
RotationZ 属性围绕旋转中心的 z 轴(直接穿过对象平面的直线)旋转。
这些旋转属性可以指定负值,这会以反方向将对象旋转某一度数。此外,绝对数可以大于 360,这会使对象旋转的度数超过一个完整旋转(即 360 度)。在下面的示例中,您可以为 RotationX、RotationY 和 RotationZ 属性试验不同值,以便看看效果。
您可以通过使用 CenterOfRotationX、CenterOfRotationY 和 CenterOfRotationZ 属性,移动旋转中心。默认情况下,旋转轴直接穿过对象的中心,这导致对象围绕其中心旋转;但是,如果您将旋转的中心移到对象的外边缘,对象将围绕该外边缘旋转。CenterOfRotationX 和 CenterOfRotationY 的默认值是 0.5,CenterOfRotationZ 的默认值是 0。对于 CenterOfRotationX 和 CenterOfRotationY,0 和 1 之间的值会将轴线设置在对象内的某个位置。值为 0 表示一个对象边缘,值为 1 表示对侧边缘。允许此范围外的值,并且将相应移动旋转中心。因为旋转中心的 z 轴绘制穿过对象的平面,所以,
CenterOfRotationX 沿着与该对象平行的 x 轴移动旋转中心,而 CenterOfRotationY 沿着该对象的 y 轴移动旋转中心。下图演示将不同的值用于 CenterOfRotationY。
CenterOfRotationY = "0.5"(默认值)
CenterOfRotationY = "0.1"(上边缘)
请注意在 CenterOfRotationY 属性设置为默认值 0.5 时图像是如何围绕中心旋转的,以及在设置为 0.1 时是如何靠近上边缘旋转的。在更改 CenterOfRotationX 属性以便移动 RotationY 属性旋转对象的位置时,您会看到相似的行为。
CenterOfRotationX = "0.5"(默认值)
CenterOfRotationX = "0.9"(右侧边缘)
使用下面的滑块示例试验围绕旋转中心的不同位置旋转对象的结果。
到此为止,您已学习了如何在空间中旋转对象。此外,您可以通过使用以下属性,相对于这些旋转的对象彼此的位置在空间中定位它们:
-
LocalOffsetX 沿旋转对象平面的 x 轴平移对象。
-
LocalOffsetY 沿旋转对象平面的 y 轴平移对象。
-
LocalOffsetZ 沿旋转对象平面的 z 轴平移对象。
-
GlobalOffsetX 沿屏幕对齐的 x 轴平移对象。
-
GlobalOffsetY 沿屏幕对齐的 y 轴平移对象。
-
GlobalOffsetZ 沿屏幕对齐的 z 轴平移对象。
本地偏移量
LocalOffsetX、LocalOffsetY 和 LocalOffsetZ 属性在对象已旋转后沿对象平面的相应轴平移对象。因此,对象的旋转确定对象平移的方向。为了演示此概念,下面的示例将 LocalOffsetX 动画处理为从 0 到 400,并且将 RotationY 动画处理为从 0 到 65 度。
请注意,在前面的示例中,对象沿其 x 轴移动。在动画的最开始,当 RotationY 值接近零(与屏幕平行)时,对象沿着 x 轴方向沿屏幕移动,但因为对象朝向您旋转,所以该对象沿对象平面的 x 轴朝向您移动。另一方面,如果您将 RotationY 属性动画处理为 -65 度,则该对象将远离您弯曲。
LocalOffsetY 的工作方式与 LocalOffsetX 类似,只是前者沿着垂直轴移动,这样,更改 RotationX 将影响 LocalOffsetY 移动对象的方向。在下面的示例中,对 LocalOffsetY 动画处理为从 0 到 400,并且对 RotationX 动画处理为从 0 到 65 度。
LocalOffsetZ 垂直于对象的平面移动对象,就像一个向量直接绘制穿过中心(从对象后向外朝向您)。为了演示 LocalOffsetZ 的工作方式,下面的示例将 LocalOffsetZ 动画处理为从 0 到 400,将 RotationX 动画处理为从 0 到 65 度。
在动画的开始,当 RotationX 值接近零(与屏幕平行)时,对象直接向外朝您移动,但因为对象朝下旋转,所以对象向下移动,而非向您移动。
全局偏移量
GlobalOffsetX、GlobalOffsetY 和 GlobalOffsetZ 属性相对于屏幕沿轴平移对象。也就是说,与本地偏移量属性不同,对象沿其移动的轴与应用于该对象的任何旋转无关。当您只是想沿着屏幕的 x、y 或 z 轴移动对象,而不担心应用于对象的旋转时,这些属性很有用。
下面的示例将 GlobalOffsetX 动画处理为从 0 到 400,将 RotationY 动画处理为从 0 到 65 度。
请注意,在前面的示例中,对象并不随着其旋转更改行进路线。这是因为该对象正沿着屏幕的 x 轴移动,而与其旋转无关。
下面的示例允许您试验沿全局偏移量和本地偏移量平移对象。
您可以将 Matrix3DProjection 和 Matrix3D 类型用于比使用 PlaneProjection 可能更复杂的准三维方案。Matrix3DProjection 向您提供一个完整的三维转换矩阵以应用于任何 UIElement,这样能够将任意模型转换矩阵和透视矩阵应用于 Silverlight 元素。请记住,这些 API 是最简化的形式,因此,如果您使用它们,将需要编写正确创建三维转换矩阵的代码。因此,将 PlaneProjection 用于简单的三维方案更容易。