使用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做了一個簡單的水中倒影示例,你可以從這里 下載本文示例代碼。

本文出自 “TerryLee技術專欄” 博客,請務必保留此出處http://terrylee.blog.51cto.com/342737/66966


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com