|
|
概述
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做了一個簡單的水中倒影示例，你可以從這里下載本文示例代碼。
NET技術：一步一步學Silverlight ：圖形圖像綜合實例---實現水中倒影效果，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
