学Silverlight 2系列(31):图形图像综合实例—实现水中倒影效果 -电脑资料

电脑资料 时间:2019-01-01 我要投稿
【www.unjs.com - 电脑资料】

本文将综合前面几篇关于图形图像处理的技术,如画刷、半透明遮罩、 Transform等,实现一个水中倒影效果的示例,

学Silverlight 2系列(31):图形图像综合实例—实现水中倒影效果

Step 1:素材准备

最终我们实现的效果图将会如下所示:

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

Step 2:创建图片

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


  
  

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

Step 3:创建倒影

复制一张图片,使其位置与原始图片一样,然后我们使用ScaleTransform进 行创建图片的倒影,这时图片已经翻转到了屏幕的外面,可以通过调节 Canvas.Top进行调节,或者使用TranslateTransform:


  
  
  
    
      
        
        
       
    

  

运行后看起来如下所示:

Step 4:半透明遮罩

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


  
  
  
    
       
        
        
       
    

    
      
        
         
       

    

  

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

Step 5:进一步扭曲倒影

我们对倒影图片做进一步的扭曲,用ScaleTransform来实现,使其在Y轴上做 一些缩小,从1修改为0.75,达到扭曲的效果,并重新调整位置:


  
  
  
    
       
        
        
       
    

    
      
        
         
       

    

  

运行后效果如下:

Step 6:斜化倒影

我们对倒影做进一步的斜化,而不是垂直倒影,使用SkewTransform来实现, 并重新调整倒影位置:


  
  
  
    
       
        
        
         
      
    

    
      
        
        
      

    

  

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

Step 7:进一步淡化倒影

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

电脑资料

学Silverlight 2系列(31):图形图像综合实例—实现水中倒影效果》(https://www.unjs.com)。


  
  
  
    
      
        
        
         
      
    

    
      
        
        
      

    

  

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

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

结束语

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

本文配套源码

最新文章