怎么做移动端网站计算像素,优改网logo设计免费官网,潍坊做网站哪个公司好,网站开发任务概述概述 Silverlight 2 Beta 1版本发布了#xff0c;无论从Runtime还是Tools都给我们带来了很多的惊喜#xff0c;如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython#xff0c;对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlig…概述 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#000000Image Canvas.Top20 Canvas.Left182 Sourcea.png/Image
/Canvas 运行后应该看起来如下所示 Step 3创建倒影 复制一张图片使其位置与原始图片一样然后我们使用ScaleTransform进行创建图片的倒影这时图片已经翻转到了屏幕的外面可以通过调节Canvas.Top进行调节或者使用TranslateTransformCanvas Background#000000Image Canvas.Top20 Canvas.Left182 Sourcea.png/ImageImage Canvas.Top20 Canvas.Left182 Sourcea.png Opacity0.4Image.RenderTransformTransformGroupScaleTransform ScaleY-1/ScaleTransformTranslateTransform Y320/TranslateTransform/TransformGroup/Image.RenderTransform/Image
/Canvas 运行后看起来如下所示 Step 4半透明遮罩 利用我们在图片处理一文介绍过的OpacityMask属性实现半透明遮罩使其看起来更加像倒影:)Canvas Background#000000Image Canvas.Top20 Canvas.Left182 Sourcea.png/ImageImage Canvas.Top20 Canvas.Left182 Sourcea.pngImage.RenderTransformTransformGroupScaleTransform ScaleY-1/ScaleTransformTranslateTransform Y320/TranslateTransform/TransformGroup/Image.RenderTransformImage.OpacityMaskLinearGradientBrush StartPoint0.5,1 EndPoint0.5,0.0GradientStop Offset0.0 Color#00000000 /GradientStop Offset1.0 Color#FF000000 //LinearGradientBrush/Image.OpacityMask/Image
/Canvas 运行后效果如下倒影图片显示出了淡出效果 Step 5进一步扭曲倒影 我们对倒影图片做进一步的扭曲用ScaleTransform来实现使其在Y轴上做一些缩小从1修改为0.75达到扭曲的效果并重新调整位置Canvas Background#000000Image Canvas.Top20 Canvas.Left182 Sourcea.png/ImageImage Canvas.Top20 Canvas.Left182 Sourcea.pngImage.RenderTransformTransformGroupScaleTransform ScaleY-0.75/ScaleTransformTranslateTransform Y280/TranslateTransform/TransformGroup/Image.RenderTransformImage.OpacityMaskLinearGradientBrush StartPoint0.5,0.0 EndPoint0.5,1.0GradientStop Offset0.0 Color#00000000 /GradientStop Offset1.0 Color#FF000000 //LinearGradientBrush/Image.OpacityMask/Image
/Canvas 运行后效果如下 Step 6斜化倒影 我们对倒影做进一步的斜化而不是垂直倒影使用SkewTransform来实现并重新调整倒影位置Canvas Background#000000Image Canvas.Top20 Canvas.Left182 Sourcea.png/ImageImage Canvas.Top20 Canvas.Left182 Sourcea.pngImage.RenderTransformTransformGroupScaleTransform ScaleY-0.75/ScaleTransformSkewTransform AngleX-15/SkewTransformTranslateTransform Y280 X-30/TranslateTransform/TransformGroup/Image.RenderTransformImage.OpacityMaskLinearGradientBrush StartPoint0.5,0.0 EndPoint0.5,1.0GradientStop Offset0.0 Color#00000000 /GradientStop Offset1.0 Color#FF000000 //LinearGradientBrush/Image.OpacityMask/Image
/Canvas 运行后效果应该如下所示 Step 7进一步淡化倒影 为了使倒影更加逼真我们最后再对倒影做点修饰进一步淡化倒影调整倒影的Opacity属性。Canvas Background#000000Image Canvas.Top20 Canvas.Left182 Sourcea.png/ImageImage Canvas.Top20 Canvas.Left182 Sourcea.png Opacity0.4Image.RenderTransformTransformGroupScaleTransform ScaleY-0.75/ScaleTransformSkewTransform AngleX-15/SkewTransformTranslateTransform Y280 X-30/TranslateTransform/TransformGroup/Image.RenderTransformImage.OpacityMaskLinearGradientBrush StartPoint0.5,0.0 EndPoint0.5,1.0GradientStop Offset0.0 Color#00000000 /GradientStop Offset1.0 Color#FF000000 //LinearGradientBrush/Image.OpacityMask/Image
/Canvas 最后运行后整体效果如下所示 这样就完成了一个水中倒影的示例大家可以充分发挥自己的创意做出更炫更酷的效果。 结束语 本文综合运用前面几篇关于图形图像处理的技术包括画刷、半透明遮罩、以及几种基本的Transform做了一个简单的水中倒影示例你可以从这里下载本文示例代码。转载于:https://www.cnblogs.com/Terrylee/archive/2008/03/20/Silverlight2-step-by-step-part13-Samples-Reflections.html
