Silverlight 2 Beta 1版本發布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言Visual Basic, Visual C#, IronRuby, Ironpython，對JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學Silverlight 2系列》文章將從Silverlight 2基礎知識、數據與通信、自定義控件、動畫、圖形圖像等幾個方面帶您快速進入Silverlight 2開發。

本文將綜合前面幾篇關于圖形圖像處理的技術，如畫刷、半透明遮罩、Transform等，實現一個水中倒影效果的示例。

Step 1：素材準備

最終我們實現的效果圖將會如下所示：

?

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

Step 2：創建圖片

首先我們創建一個圖片，使用Image控件，并進行定位

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

運行后應該看起來如下所示：

?

Step 3：創建倒影

復制一張圖片，使其位置與原始圖片一樣，然后我們使用ScaleTransform進行創建圖片的倒影，這時圖片已經翻轉到了屏幕的外面，可以通過調節Canvas.Top進行調節，或者使用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>

運行后看起來如下所示：

?

Step 4：半透明遮罩

利用我們在圖片處理一文介紹過的OpacityMask屬性實現半透明遮罩，使其看起來更加像倒影:)

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

運行后效果如下，倒影圖片顯示出了淡出效果：

??

Step 5：進一步扭曲倒影

我們對倒影圖片做進一步的扭曲，用ScaleTransform來實現，使其在Y軸上做一些縮小，從1修改為0.75，達到扭曲的效果，并重新調整位置：

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

運行后效果如下：

Step 6：斜化倒影

我們對倒影做進一步的斜化，而不是垂直倒影，使用SkewTransform來實現，并重新調整倒影位置：

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

運行后效果應該如下所示：

?

Step 7：進一步淡化倒影

為了使倒影更加逼真，我們最后再對倒影做點修飾，進一步淡化倒影，調整倒影的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>

最后運行后整體效果如下所示：

?

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

結束語

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

總結

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

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