使用Silverlight 2实现水中倒影效果

概述概述 本文将综合运用图形图像处理技术，如画刷、半透明遮罩、Transform等，实现一个水中倒影效果的示例。 Step 1：素材准备 最终我们实现的效果图将会如下所示：   先准备一张图片，这里我使用了一张液晶显示器的图片:)   Step 2：创建图片 首先我们创建一个图片，使用Image控件，并进行定位 <Canvas Background="#000000"> <Image Can 概述 本文将综合运用图形图像处理技术，如画刷、半透明遮罩、transform等，实现一个水中倒影效果的示例。 Step 1：素材准备 最终我们实现的效果图将会如下所示：  

先准备一张图片，这里我使用了一张液晶显示器的图片:)  

Step 2：创建图片 首先我们创建一个图片，使用Image控件，并进行定位

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

运行后应该看起来如下所示：

@H_404_67@

  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,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,1.0">                <GradIEntStop Offset="0.0" color="#00000000" />                <GradIEntStop Offset="1.0" color="#FF000000" />            </linearGradIEntBrush>        </Image.OpacityMask>    </Image></Canvas>

最后运行后整体效果如下所示：

  这样就完成了一个水中倒影的示例，大家可以充分发挥自己的创意，做出更炫更酷的效果。 结束语 本文综合运用图形图像处理的技术，包括画刷、半透明遮罩、以及几种基本的transform做了一个简单的水中倒影示例，你可以从这里 下载本文示例代码。

本文出自 “TerryLee技术专栏” 博客，请务必保留此出处http://www.voidcn.com/article/p-bykfkqki-wq.html

本文出自 51CTO.COM技术博客 总结

以上是内存溢出为你收集整理的使用Silverlight 2实现水中倒影效果全部内容，希望文章能够帮你解决使用Silverlight 2实现水中倒影效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。