一步一步学Silverlight 2系列（31）：图形图像综合实例—实现水中倒影效果

拼吾爱程序人生.Net编程 Silverlight 一步一步学Silverlight 2系列（31）：图形图像综合实例—实现水中倒影效果

1 / 1 页

跳转页

查看:1410

本主题由管理员 cobra 于 2008-3-20 20:13:31 执行设置高亮操作

striver

个人空间 相册
性别:
来自:拼吾爱
积分:6805
帖子:6717
注册: 2007-04-09

2008-03-20 19:51 | 只看楼主

树型| 收藏| 小中大复制帖子链接到剪贴板1F

一步一步学Silverlight 2系列（31）：图形图像综合实例—实现水中倒影效果

文/Terrylee 出处/博客园

概述

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控件，并进行定位

Code

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

附件: 您所在的用户组无法下载或查看附件

感谢原创者的辛勤劳动，希望对您有所帮助，转载请注明原出处。

您可能对 [Silverlight] 的这些文章也感兴趣：

一步一步学Silverlight 2系列（6）：键盘事件处理

在两个Silverlight应用间数据通信(包括与Flash通信)

一步一步学Silverlight 2系列（19）：如何在Silverlight中与HTML DOM交互（上）

Silverlight教程第四部分：使用 Style 元素更好地封装观感

Silverlight专题（4）-自定义提示信息

Silverlight教程第二部分：使用布局管理

Presentation: Laurence Moroney on Silverlight

Silverlight 2中的视觉状态管理 Part1

Moonlight新的里程碑：Silverlight国际象棋

silverlight2.0 页面跳转

striver

个人空间 相册
性别:
来自:拼吾爱
积分:6805
帖子:6717
注册: 2007-04-09

2008-03-20 19:56 | 只看楼主

树型| 收藏| 小中大复制帖子链接到剪贴板2F

回复：一步一步学Silverlight 2系列（31）：图形图像综合实例—实现水中倒影效果

Step 3：创建倒影

复制一张图片，使其位置与原始图片一样，然后我们对图片使用RotateTransform围绕底线的中间点进行180度旋转，当然也可以使用ScaleTransform进行翻转，这里为了演示四个基本的Transform，ScaleTransform将来后面做其它用途：

Code

运行后看起来如下所示：

附件: 您所在的用户组无法下载或查看附件

Step 4：半透明遮罩

利用我们在图片处理一文介绍过的OpacityMask属性实现半透明遮罩，使其看起来更加像倒影:)

Code

运行后效果如下，倒影图片显示出了淡出效果：

附件: 您所在的用户组无法下载或查看附件

striver

个人空间 相册
性别:
来自:拼吾爱
积分:6805
帖子:6717
注册: 2007-04-09

2008-03-20 19:58 | 只看楼主

树型| 收藏| 小中大复制帖子链接到剪贴板3F

回复：一步一步学Silverlight 2系列（31）：图形图像综合实例—实现水中倒影效果

Step 5：进一步扭曲倒影

我们对倒影图片做进一步的扭曲，用ScaleTransform来实现，使其在Y轴上做一些缩小，达到扭曲的效果：

Code

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

附件: 您所在的用户组无法下载或查看附件

是不是比Step 4已经逼真多了呢？

striver

个人空间 相册
性别:
来自:拼吾爱
积分:6805
帖子:6717
注册: 2007-04-09

2008-03-20 20:01 | 只看楼主

树型| 收藏| 小中大复制帖子链接到剪贴板4F

回复：一步一步学Silverlight 2系列（31）：图形图像综合实例—实现水中倒影效果

Step 6：斜化倒影

我们对倒影做进一步的斜化，而不是垂直倒影，使用SkewTransform来实现，注意调整变换的中心点：

Code

运行后效果应该如下所示：

附件: 您所在的用户组无法下载或查看附件

Step 7：调整倒影位置

我们发现在完成Step 6之后，倒影和原图之间的距离太近，可以使用TranslateTransform进行移动倒影位置，当然还有更直接的办法就是调整Canvas.Top，这里为了演示几种Transform的使用，我们还是采用TranslateTransform：

Code

效果看起来如下图所示：

附件: 您所在的用户组无法下载或查看附件

striver

个人空间 相册
性别:
来自:拼吾爱
积分:6805
帖子:6717
注册: 2007-04-09

2008-03-20 20:04 | 只看楼主

树型| 收藏| 小中大复制帖子链接到剪贴板5F

回复：一步一步学Silverlight 2系列（31）：图形图像综合实例—实现水中倒影效果

Step 8：进一步淡化倒影

为了使倒影更加逼真，我们最后再对倒影做点修饰，进一步淡化倒影，调整倒影的Opacity属性。

Code

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

附件: 您所在的用户组无法下载或查看附件

这样就完成了一个水中倒影的示例，大家可以充分发挥自己的创意，做出更炫更酷的效果。

结束语

本文综合运用前面几篇关于图形图像处理的技术，包括画刷、半透明遮罩、以及几种基本的Transform做了一个简单的水中倒影示例，你可以从这里下载本文示例代码:

附件: 您所在的用户组无法下载或查看附件。