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 >