概述 Silverlight 2 Beta 1版本发布了
无论从Runtime还是Tools都给我们带来了很多
惊喜如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython对JSON、Web Service、WCF以及Sockets支持等
系列新特性
步步学Silverlight 2系列
文章将从Silverlight 2基础知识、数据和通信、自定义Control控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发本文将综合前面几篇有关图形图像处理
技术如画刷、半透明遮罩、Transform等实现个水中倒影效果举例Step 1:素材准备 最终我们实现
效果图将会如下所示:
先准备
张图片这里我使用了张液晶显示器图片:)
Step 2:创建图片 首先我们创建
个图片使用ImageControl控件并进行定位<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 StartPo
="0.5,1" EndPo="0.5,0.0">
<GradientStop Off
="0.0" Color="#00000000" />
<GradientStop Off="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 StartPo="0.5,0.0" EndPo="0.5,1.0">
<GradientStop Off="0.0" Color="#00000000" />
<GradientStop Off="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 StartPo="0.5,0.0" EndPo="0.5,1.0">
<GradientStop Off="0.0" Color="#00000000" />
<GradientStop Off="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 StartPo="0.5,0.0" EndPo="0.5,1.0">
<GradientStop Off="0.0" Color="#00000000" />
<GradientStop Off="1.0" Color="#FF000000" />
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
</Canvas> 最后运行后整体效果如下所示: 这样就完成了
个水中倒影举例大家可以充分发挥自己创意做出更炫更酷效果结束语 本文综合运用前面几篇有关图形图像处理
技术包括画刷、半透明遮罩、以及几种基本Transform做了个简单水中倒影举例你可以下载本文举例代码
最新评论