|
|
概述
Silverlight 2 Beta 1版本發(fā)布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言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開發(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)該看起來如下所示：
Step 3：創(chuàng)建倒影
復(fù)制一張圖片，使其位置與原始圖片一樣，然后我們使用ScaleTransform進(jìn)行創(chuàng)建圖片的倒影，這時(shí)圖片已經(jīng)翻轉(zhuǎn)到了屏幕的外面，可以通過調(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)行后看起來如下所示：
Step 4：半透明遮罩
利用我們?cè)?a >圖片處理一文介紹過的OpacityMask屬性實(shí)現(xiàn)半透明遮罩，使其看起來更加像倒影:)
<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：進(jìn)一步扭曲倒影
我們對(duì)倒影圖片做進(jìn)一步的扭曲，用ScaleTransform來實(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來實(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>
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>
這樣就完成了一個(gè)水中倒影的示例，大家可以充分發(fā)揮自己的創(chuàng)意，做出更炫更酷的效果。
結(jié)束語
本文綜合運(yùn)用前面幾篇關(guān)于圖形圖像處理的技術(shù)，包括畫刷、半透明遮罩、以及幾種基本的Transform做了一個(gè)簡(jiǎn)單的水中倒影示例，你可以從這里下載本文示例代碼。
NET技術(shù)：一步一步學(xué)Silverlight ：圖形圖像綜合實(shí)例---實(shí)現(xiàn)水中倒影效果，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
