一步一步学Silverlight 2系列(31):图形图像综合实例—实现水中倒影效果_转载...
概述
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控件,并进行定位
<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.cnblogs.com
原文链接:http://www.cnblogs.com/Terrylee/archive/2008/03/20/Silverlight2-step-by-step-part13-Samples-Reflections.html
转载于:https://www.cnblogs.com/ZhangHuaning/archive/2010/04/20/1716289.html
一步一步学Silverlight 2系列(31):图形图像综合实例—实现水中倒影效果_转载...相关推荐
- 一步一步学Silverlight 2系列(31):图形图像综合实例—实现水中倒影效果
Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, Ir ...
- 一步一步学Silverlight 2系列(32):图形图像综合实例—“功夫之王”剧照播放_转载...
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(3):界面布局
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(10):使用用户控件
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(24):与浏览器交互相关辅助方法
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(18):综合实例之RSS阅读器
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(9):使用控件模板
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://terrylee.blog.51cto.com/342737/67243 ...
- 一步一步学Silverlight 2系列(13):数据与通信之WebRequest
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(21):如何在Silverlight中调用JavaScript
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
最新文章
- 时间序列预测方法汇总:从理论到实践(附Kaggle经典比赛方案)
- 《C语言及程序设计》实践参考——当年第几天(数组方案)
- 阿里再添一员虎将!刚刚入职的80后硅谷科学家贾扬清到底有多牛?
- Nginx支持WebSocket反向代理-学习小结
- Python数据结构:顺序查找
- 计算机自带的桌面远程,如何远程控制电脑桌面
- 6月27日 OGDF不同的布局算法
- 安装mongodb以及设置为windows服务 详细步骤
- JavaScript的排序算法
- 【转】如何调试bash脚本
- matlab 三维 作图 坐标轴_matlab三维作图教程
- 详解MATLAB在最优化计算中的应用(pdf版)
- 华为交换机console口密码配置
- 运营商线路细分_电信运营商客户细分
- Python爬虫教程——入门一之爬虫基础了解
- openstack placement
- c代码-一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少?
- java 实现重定义数组类似于VB的ReDim
- 工作流(Workflow)
- 仿网易云音乐播放列表、皮肤样式、歌词滚动、轮播图等
热门文章
- 五岳华酿养生露酒赢开创白酒市场新蓝海
- java 随机true false,返回true或false随机
- python边际效用递减_效应递减规律,如何通过心智的开启去控制满足感
- 2021寒假MISC打卡DAY4
- element ui表格表头加斜线,表头加数字,第一列加颜色
- Android获取手机本地图片并显示
- 申请六安市注册商标类别怎么选,98%人不知道的类别选择小技巧
- 计算机中agp显卡的原理,在计算机[graphic]上安装agp图形卡的具体方法
- pdd为什么下架iPhone12了 拼多多等电商平台不能买iPhone12了?
- 鸿蒙恢复安卓,鸿蒙系统发布后,Android官网恢复推荐华为手机