Silverlight 2 Beta 1版本發(fā)布了，無(wú)論從Runtime還是Tools都給我們帶來(lái)了很多的驚喜，如支持框架語(yǔ)言Visual Basic, Visual C#, IronRuby, Ironpython，對(duì)JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學(xué)Silverlight 2系列》文章將從Silverlight 2基礎(chǔ)知識(shí)、數(shù)據(jù)與通信、自定義控件、動(dòng)畫、圖形圖像等幾個(gè)方面帶您快速進(jìn)入Silverlight 2開(kāi)發(fā)。

本文將綜合前面幾篇關(guān)于圖形圖像處理的技術(shù)，如畫刷、半透明遮罩、Transform等，實(shí)現(xiàn)一個(gè)水中倒影效果的示例。

Step 1：素材準(zhǔn)備

最終我們實(shí)現(xiàn)的效果圖將會(huì)如下所示：

?

先準(zhǔn)備一張圖片，這里我使用了一張液晶顯示器的圖片:)

Step 2：創(chuàng)建圖片

首先我們創(chuàng)建一個(gè)圖片，使用Image控件，并進(jìn)行定位

<Canvas Background="#000000"><Image Canvas.Top="20" Canvas.Left="182" Source="a.png"></Image> </Canvas>

運(yùn)行后應(yīng)該看起來(lái)如下所示：

?

Step 3：創(chuàng)建倒影

復(fù)制一張圖片，使其位置與原始圖片一樣，然后我們使用ScaleTransform進(jìn)行創(chuàng)建圖片的倒影，這時(shí)圖片已經(jīng)翻轉(zhuǎn)到了屏幕的外面，可以通過(guò)調(diào)節(jié)Canvas.Top進(jìn)行調(diào)節(jié)，或者使用TranslateTransform：

<Canvas Background="#000000"><Image Canvas.Top="20" Canvas.Left="182" Source="a.png"></Image><Image Canvas.Top="20" Canvas.Left="182" Source="a.png" Opacity="0.4"><Image.RenderTransform><TransformGroup><ScaleTransform ScaleY="-1"></ScaleTransform><TranslateTransform Y="320"></TranslateTransform></TransformGroup></Image.RenderTransform></Image> </Canvas>

運(yùn)行后看起來(lái)如下所示：

?

Step 4：半透明遮罩

利用我們?cè)趫D片處理一文介紹過(guò)的OpacityMask屬性實(shí)現(xiàn)半透明遮罩，使其看起來(lái)更加像倒影:)

<Canvas Background="#000000"><Image Canvas.Top="20" Canvas.Left="182" Source="a.png"></Image><Image Canvas.Top="20" Canvas.Left="182" Source="a.png"><Image.RenderTransform><TransformGroup><ScaleTransform ScaleY="-1"></ScaleTransform><TranslateTransform Y="320"></TranslateTransform></TransformGroup></Image.RenderTransform><Image.OpacityMask><LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0.0"><GradientStop Offset="0.0" Color="#00000000" /><GradientStop Offset="1.0" Color="#FF000000" /></LinearGradientBrush></Image.OpacityMask></Image> </Canvas>

運(yùn)行后效果如下，倒影圖片顯示出了淡出效果：

??

Step 5：進(jìn)一步扭曲倒影

我們對(duì)倒影圖片做進(jìn)一步的扭曲，用ScaleTransform來(lái)實(shí)現(xiàn)，使其在Y軸上做一些縮小，從1修改為0.75，達(dá)到扭曲的效果，并重新調(diào)整位置：

<Canvas Background="#000000"><Image Canvas.Top="20" Canvas.Left="182" Source="a.png"></Image><Image Canvas.Top="20" Canvas.Left="182" Source="a.png"><Image.RenderTransform><TransformGroup><ScaleTransform ScaleY="-0.75"></ScaleTransform> <TranslateTransform Y="280"></TranslateTransform></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> </Canvas>

運(yùn)行后效果如下：

Step 6：斜化倒影

我們對(duì)倒影做進(jìn)一步的斜化，而不是垂直倒影，使用SkewTransform來(lái)實(shí)現(xiàn)，并重新調(diào)整倒影位置：

<Canvas Background="#000000"><Image Canvas.Top="20" Canvas.Left="182" Source="a.png"></Image><Image Canvas.Top="20" Canvas.Left="182" Source="a.png"><Image.RenderTransform><TransformGroup><ScaleTransform ScaleY="-0.75"></ScaleTransform><SkewTransform AngleX="-15"></SkewTransform><TranslateTransform Y="280" X="-30"></TranslateTransform></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> </Canvas>

運(yùn)行后效果應(yīng)該如下所示：

?

Step 7：進(jìn)一步淡化倒影

為了使倒影更加逼真，我們最后再對(duì)倒影做點(diǎn)修飾，進(jìn)一步淡化倒影，調(diào)整倒影的Opacity屬性。

<Canvas Background="#000000"><Image Canvas.Top="20" Canvas.Left="182" Source="a.png"></Image><Image Canvas.Top="20" Canvas.Left="182" Source="a.png" Opacity="0.4"><Image.RenderTransform><TransformGroup><ScaleTransform ScaleY="-0.75"></ScaleTransform><SkewTransform AngleX="-15"></SkewTransform><TranslateTransform Y="280" X="-30"></TranslateTransform></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> </Canvas>

最后運(yùn)行后整體效果如下所示：

?

這樣就完成了一個(gè)水中倒影的示例，大家可以充分發(fā)揮自己的創(chuàng)意，做出更炫更酷的效果。

結(jié)束語(yǔ)

本文綜合運(yùn)用前面幾篇關(guān)于圖形圖像處理的技術(shù)，包括畫刷、半透明遮罩、以及幾種基本的Transform做了一個(gè)簡(jiǎn)單的水中倒影示例，你可以從這里下載本文示例代碼。

總結(jié)

以上是生活随笔為你收集整理的一步一步学Silverlight 2系列（31）：图形图像综合实例—实现水中倒影效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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