當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Silverlight三维透视+倒影效果

發(fā)布時(shí)間：2025/3/13 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 Silverlight三维透视+倒影效果小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

知識(shí)概要：

???????????? 1.使用2D內(nèi)容創(chuàng)建3D體驗(yàn)，了解圖像的PlaneProjection屬性，具體內(nèi)容讀者自己查看文檔。

???????????? 2.Silverlight圖形圖形的變換效果的使用。

?最終的效果如下圖：

??????????????

???????

???????????????? 馬上開始動(dòng)手：

???????????????? 首先準(zhǔn)備五張圖片：直接在xaml中進(jìn)行導(dǎo)入：

代碼 <Grid?x:Name="LayoutRoot"?Background="Black">????//背景色通過background屬性設(shè)為黑色
?<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屬性設(shè)置為Fill;

知識(shí)拓展：? 關(guān)于Stretch屬性的四個(gè)值------------------------->Start：

----------------------------------->1.None: 不對(duì)圖像進(jìn)行拉伸，使得填充完規(guī)定的大小尺寸

----------------------------------->2.Uniform:按比例進(jìn)行拉伸，直到有一邊達(dá)到規(guī)定的尺寸，其余部分不會(huì)被填充

----------------------------------->3.UniformToFill:按比例進(jìn)行拉伸，直到所以的邊都滿足規(guī)定的尺寸。超出大小部分會(huì)被剪裁。

----------------------------------->4.Fill：不按比例拉伸，完全填充規(guī)定的尺寸

------END

???????????? 至此，你已經(jīng)成功讓5張漂亮的圖片在屏幕上顯示了。

接著，我們?cè)囍屗鼈兂霈F(xiàn)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"/>
?????

?????? 在上述代碼中，除了第五張圖片不對(duì)他進(jìn)行變化（因?yàn)樗欠旁谥虚g的圖片），其它的都通過 Projection的PlaneProjection屬性進(jìn)行設(shè)置。

PlaneProjection提供的一套屬性使得其中的element具有在3維空間中的形狀。其中RotationY是對(duì)element在三維坐標(biāo)中沿著Y軸旋轉(zhuǎn)一定的度數(shù)，這里第一張圖片旋轉(zhuǎn)-70 ；GlobalOffsetX是在X軸坐標(biāo)上的偏移。例如：GlobalOffsetX=“-230”，就表示在X負(fù)半軸上離原點(diǎn)230個(gè)單位處。GlobalOffsetZ與GlobalOffsetX一樣，只不過它是在Z軸（垂直于屏幕）的偏移。我們讓圖像在Z軸向屏幕里面移動(dòng)100個(gè)單位。

到此，我們已經(jīng)讓圖片具有3D效果。

接下來，就開始設(shè)置倒影：

????????????? 我們以圖片一為例：

代碼
????????????<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.實(shí)現(xiàn)思路很簡(jiǎn)單：

??????????????????? 1.復(fù)制圖片一

????????????????????2.沿著X軸翻轉(zhuǎn)

??????????????????? 3.進(jìn)行圖片的傾斜變換進(jìn)行調(diào)整

??????????????????? 4.制作半遮罩效果

?-----------------------------知識(shí)延伸：（變換效果)-------------------------

?Silverlight中的變換是由Transform類來定義，其中主要包括：

RotateTransform:旋轉(zhuǎn)變換

ScaleTransform：縮放變換

SkewTransform：傾斜變換

TranslateTransform：移動(dòng)變換

TransformGroup：變換組

MatrixTransform：矩陣變換

（這里不做具體介紹，具體內(nèi)容及使用方法請(qǐng)查看文檔和相關(guān)基礎(chǔ)書籍）

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

??????????? 復(fù)制圖片：我們采用在原有圖片基礎(chǔ)上再導(dǎo)入圖片一；沿著X軸翻轉(zhuǎn)，使用ScaleTransform屬性，使它的ScaleY="-1",這樣就使得圖片翻轉(zhuǎn)。然后通過TranslateTransform屬性的Y屬性在y 軸上進(jìn)行位置的調(diào)整，使得圖像一的副本位于圖

像一下面的合適位置，但是你會(huì)發(fā)現(xiàn)，由于之前進(jìn)行了3D透視變化。兩圖像并沒有在同一基準(zhǔn)線上，因此要通過SkewTransform進(jìn)行圖像的傾斜變換。

????????????? 最后制作對(duì)倒影圖片制作半遮罩效果，通過Image屬性的OpcityMask 屬性進(jìn)行設(shè)置。在其中，我們放入了一個(gè)

LinearGradientBrush線性漸變畫刷，通過設(shè)置GradientStop屬性的Offset以及Color屬性，制作出半遮罩效果。

至此，一個(gè)簡(jiǎn)單的三維透視+倒影效果就做好了。

完整的代碼：

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

轉(zhuǎn)載于:https://www.cnblogs.com/vimsk/archive/2010/08/04/1791820.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Eclipse导入工程后显示小红叉叉怎么
下一篇：【转】SQL Server 2005 数