概述

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

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

Step 1：素材準備

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

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

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

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

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

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

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

復制一張圖片，使其位置與原始圖片一樣，然后我們使用ScaleTransform進行創(chuàng)建圖片的倒影，這時圖片已經(jīng)翻轉(zhuǎn)到了屏幕的外面，可以通過調(diào)節(jié)Canvas.Top進行調(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>

運行后看起來如下所示：

Step 4：半透明遮罩

利用我們在圖片處理一文介紹過的OpacityMask屬性實現(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：進一步扭曲倒影

我們對倒影圖片做進一步的扭曲，用ScaleTransform來實現(xiàn)，使其在Y軸上做一些縮小，從1修改為0.75，達到扭曲的效果，并重新調(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>

運行后效果如下：

Step 6：斜化倒影

我們對倒影做進一步的斜化，而不是垂直倒影，使用SkewTransform來實現(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：進一步淡化倒影

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

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

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

結(jié)束語

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

NET技術(shù)：一步一步學Silverlight ：圖形圖像綜合實例---實現(xiàn)水中倒影效果，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。