知識概要：

???????????? 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>

?

轉載于:https://www.cnblogs.com/vimsk/archive/2010/08/04/1791820.html

總結

以上是生活随笔為你收集整理的Silverlight三维透视+倒影效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。