Silverlight三维透视+倒影效果

知识概要：

             1.使用2D内容建立3D体验，了解图像的PlaneProjection属性，具体内容读者本身查看文档。

             2.Silverlight图形图形的变换效果的使用。

 

 最终的效果以下图：

              

       

 

 

                 立刻开始动手：

 

 

                 首先准备五张图片：直接在xaml中进行导入：

 

代码

< Grid  x:Name ="LayoutRoot"  Background ="Black" >     //背景色经过background属性设为黑色
  < Image  Source ="1.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" />
  < Image  Source ="2.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" />
  < Image  Source ="3.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" />
  < Image  Source ="4.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" />
  < Image  Source ="5.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" />
</ Grid >

 

其中的Stretch属性设置为Fill;

知识拓展：  关于Stretch属性的四个值------------------------->Start：

----------------------------------->1.None: 不对图像进行拉伸，使得填充完规定的大小尺寸

----------------------------------->2.Uniform:按比例进行拉伸，直到有一边达到规定的尺寸，其他部分不会被填充

----------------------------------->3.UniformToFill:按比例进行拉伸，直到因此的边都知足规定的尺寸。超出大小部分会被剪裁。

----------------------------------->4.Fill：不按比例拉伸，彻底填充规定的尺寸

------END

 

             至此，你已经成功让5张漂亮的图片在屏幕上显示了。

接着，咱们试着让它们出现3D透视效果：

                       

代码

< Image  Source ="1.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" >
      < Image.Projection >
        < PlaneProjection  RotationY ="-70"  GlobalOffsetX ="-230"  GlobalOffsetZ ="-100" />
      </ Image.Projection >
</ Image >
< Image  Source ="2.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" >
      < Image.Projection >
        < PlaneProjection  RotationY ="-70"  GlobalOffsetX ="-155"  GlobalOffsetZ ="-100" />
      </ Image.Projection >
</ Image >
< Image  Source ="3.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" >
      < Image.Projection >
        < PlaneProjection  RotationY ="70"  GlobalOffsetX ="230"  GlobalOffsetZ ="-100" />
      </ Image.Projection >
</ Image >
< Image  Source ="4.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" >
      < Image.Projection >
        < PlaneProjection  RotationY ="70"  GlobalOffsetX ="155"  GlobalOffsetZ ="-100" />
      </ Image.Projection >
</ Image >
< Image  Source ="5.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" />
     

 

 

       在上述代码中，除了第五张图片不对他进行变化（由于他是放在中间的图片），其它的都经过 Projection的PlaneProjection属性进行设置。

PlaneProjection提供的一套属性使得其中的element具备在3维空间中的形状。其中RotationY是对element在三维坐标中沿着Y轴旋转必定的度数，这里第一张图片旋转-70 ；GlobalOffsetX是在X轴坐标上的偏移。例如：GlobalOffsetX=“-230”，就表示在X负半轴上离原点230个单位处。GlobalOffsetZ与GlobalOffsetX同样，只不过它是在Z轴（垂直于屏幕）的偏移。咱们让图像在Z轴向屏幕里面移动100个单位。

到此，咱们已经让图片具备3D效果。

接下来，就开始设置倒影：

              咱们以图片一为例：

代码

             < Image  Source ="1.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" >
             < Image.Projection >
                 < PlaneProjection  RotationY ="-70"  GlobalOffsetX ="-230"  GlobalOffsetZ ="-100" />
             </ Image.Projection >
         </ Image >
         < Image  Source ="1.jpg"  Stretch ="Fill"  Width ="192"  Height ="276"  Opacity ="0.2" >
             < Image.RenderTransform >
                 < TransformGroup >
                     < ScaleTransform  ScaleY ="-1" />
                     < TranslateTransform  Y ="470" />
                     < SkewTransform  AngleY ="-25" />
                 </ TransformGroup >
             </ Image.RenderTransform >
                 < Image.Projection >
                 < PlaneProjection  RotationY ="-70"  GlobalOffsetX ="-230"  GlobalOffsetZ ="-100" />
             </ Image.Projection >
             < Image.OpacityMask >
                 < LinearGradientBrush  StartPoint ="0.5,0.0"  EndPoint ="0.5,1.0" >
                     < GradientStop  Offset ="0.0"  Color ="#00000000" />
                     < GradientStop  Offset ="1.0"   Color ="#FF000000" />             
                 </ LinearGradientBrush >
             </ Image.OpacityMask >
         </ Image >

 

A.实现思路很简单：

                    1.复制图片一

                    2.沿着X轴翻转

                    3.进行图片的倾斜变换进行调整

                    4.制做半遮罩效果

 

 -----------------------------知识延伸：（变换效果)-------------------------

 Silverlight中的变换是由Transform类来定义，其中主要包括：

RotateTransform:旋转变换

ScaleTransform：缩放变换

SkewTransform：倾斜变换

TranslateTransform：移动变换

TransformGroup：变换组

MatrixTransform：矩阵变换

（ 这里不作具体介绍，具体内容及使用方法请查看文档和相关基础书籍）

--------------------------------------------------------------------------------

            复制图片：咱们采用在原有图片基础上再导入图片一；沿着X轴翻转，使用ScaleTransform属性，使它的ScaleY="-1",这样就使得图片翻转。而后经过TranslateTransform属性的Y属性在y 轴上进行位置的调整，使得图像一的副本位于图

像一下面的合适位置，可是你会发现，因为以前进行了3D透视变化。两图像并无在同一基准线上，所以要经过SkewTransform进行图像的倾斜变换。

              最后制做对倒影图片制做半遮罩效果，经过Image属性的OpcityMask 属性进行设置。在其中，咱们放入了一个

LinearGradientBrush线性渐变画刷，经过设置GradientStop属性的Offset以及Color属性，制做出半遮罩效果。

至此，一个简单的三维透视+倒影效果就作好了。

完整的代码：

 

代码

  < Grid  x:Name ="LayoutRoot"  Background ="Black" >
< Image  Source ="1.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" >
             < Image.Projection >
                 < PlaneProjection  RotationY ="-70"  GlobalOffsetX ="-230"  GlobalOffsetZ ="-100" />
             </ Image.Projection >
         </ Image >
         < Image  Source ="1.jpg"  Stretch ="Fill"  Width ="192"  Height ="276"  Opacity ="0.2" >
             < Image.RenderTransform >
                 < TransformGroup >
                     < ScaleTransform  ScaleY ="-1" />
                     < TranslateTransform  Y ="470" />
                     < SkewTransform  AngleY ="-25" />
                 </ TransformGroup >
             </ Image.RenderTransform >
                 < Image.Projection >
                 < PlaneProjection  RotationY ="-70"  GlobalOffsetX ="-230"  GlobalOffsetZ ="-100" />
             </ Image.Projection >
             < Image.OpacityMask >
                 < LinearGradientBrush  StartPoint ="0.5,0.0"  EndPoint ="0.5,1.0" >
                     < GradientStop  Offset ="0.0"  Color ="#00000000" />
                     < GradientStop  Offset ="1.0"   Color ="#FF000000" />             
                 </ LinearGradientBrush >
             </ Image.OpacityMask >
         </ Image >
         < Image  Source ="2.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" >
             < Image.Projection >
                 < PlaneProjection  RotationY ="-70"  GlobalOffsetX ="-155"  GlobalOffsetZ ="-100" />
             </ Image.Projection >
         </ Image >
         < Image  Source ="2.jpg"  Stretch ="Fill"  Width ="192"  Height ="276"  Opacity ="0.2" >
             < Image.RenderTransform >
                 < TransformGroup >
                     < ScaleTransform  ScaleY ="-1" />
                     < TranslateTransform  Y ="500" />
                     < SkewTransform  AngleY ="-25" />
                 </ TransformGroup >
             </ Image.RenderTransform >
             < Image.Projection >
                 < PlaneProjection  RotationY ="-70"  GlobalOffsetX ="-155"  GlobalOffsetZ ="-100" />
             </ Image.Projection >
             < Image.OpacityMask >
                 < LinearGradientBrush  StartPoint ="0.5,0.0"  EndPoint ="0.5,1.0" >
                     < GradientStop  Offset ="0.0"  Color ="#00000000" />
                     < GradientStop  Offset ="1.0"   Color ="#FF000000" />
                 </ LinearGradientBrush >
             </ Image.OpacityMask >
         </ Image >
         < Image  Source ="3.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" >
             < Image.Projection >
                 < PlaneProjection  RotationY ="70"  GlobalOffsetX ="230"  GlobalOffsetZ ="-100" />
             </ Image.Projection >
         </ Image >
         < Image  Source ="3.jpg"  Stretch ="Fill"  Width ="192"  Height ="276"  Opacity ="0.2" >
             < Image.RenderTransform >
                 < TransformGroup >
                     < ScaleTransform  ScaleY ="-1" />
                     < TranslateTransform  Y ="380" />
                     < SkewTransform  AngleY ="25" />
                 </ TransformGroup >
             </ Image.RenderTransform >
             < Image.Projection >
                 < PlaneProjection  RotationY ="70"  GlobalOffsetX ="230"  GlobalOffsetZ ="-100" />
             </ Image.Projection >
             < Image.OpacityMask >
                 < LinearGradientBrush  StartPoint ="0.5,0.0"  EndPoint ="0.5,1.0" >
                     < GradientStop  Offset ="0.0"  Color ="#00000000" />
                     < GradientStop  Offset ="1.0"   Color ="#FF000000" />
                 </ LinearGradientBrush >
             </ Image.OpacityMask >
         </ Image >
         < Image  Source ="4.jpg"  Stretch ="Fill"  Width ="192"  Height ="276" >
             < Image.Projection >
                 < PlaneProjection  RotationY ="70"  GlobalOffsetX ="155"  GlobalOffsetZ ="-100" />
             </ Image.Projection >
         </ Image >
       < Image  Source ="4.jpg"  Stretch ="Fill"  Width ="192"  Height ="276"  Opacity ="0.2" >
             < Image.RenderTransform >
                 < TransformGroup >
                     < ScaleTransform  ScaleY ="-1" />
                     < TranslateTransform  Y ="380" />
                     < SkewTransform  AngleY ="25" />
                 </ TransformGroup >
             </ Image.RenderTransform >
             < Image.Projection >
                 < PlaneProjection  RotationY ="70"  GlobalOffsetX ="155"  GlobalOffsetZ ="-100" />
             </ Image.Projection >
             < Image.OpacityMask >
                 < LinearGradientBrush  StartPoint ="0.5,0.0"  EndPoint ="0.5,1.0" >
                     < GradientStop  Offset ="0.0"  Color ="#00000000" />
                     < GradientStop  Offset ="1.0"   Color ="#FF000000" />
                 </ LinearGradientBrush >
             </ Image.OpacityMask >
         </ Image >
         < Image  Source ="5.jpg"  Stretch ="Fill"  Width ="192"  Height ="276"  Opacity =" {0.2} " />
      
         < Image  Source ="5.jpg"  Stretch ="Fill"  Width ="192"  Height ="276"  Opacity ="0.2" >
             < Image.RenderTransform >
                 < TransformGroup >
                     < ScaleTransform  ScaleY ="-1" />
                     < TranslateTransform  Y ="552" />
                 </ TransformGroup >
             </ Image.RenderTransform >
             < Image.OpacityMask >
                 < LinearGradientBrush  StartPoint ="0.5,0.0"  EndPoint ="0.5,1.0" >
                     < GradientStop  Offset ="0.0"  Color ="#00000000" />
                     < GradientStop  Offset ="1.0"  Color ="#FF000000" />
                 </ LinearGradientBrush >
             </ Image.OpacityMask >
         </ Image >
</ Grid >