WPF水滴马赛克效果

什么是马赛克（Mask）

相信许多看电影的朋友都知道什么是马赛克，通俗的将就是视频或者图片上方有一层模糊的区域，以使这块区域不可见。

下面的文字摘自百度百科：

马赛克（Mosaic），建筑专业名词为锦砖，分为陶瓷锦砖和玻璃锦砖两种。是一种装饰艺术，通常使用许多小石块或有色玻璃碎片拼成图案，在教堂中的玻璃艺品，又称为花窗玻璃（stained glass）。在拜占庭帝国时代，马赛克随着基督教兴起而发展为教堂及宫殿中的壁画形式。现今马赛克泛指这种类型五彩斑斓的视觉效果。马赛克也指现行广为使用的一种图像（视频）处理手段，此手段将影像特定区域的色阶细节劣化并造成色块打乱的效果，因为这种模糊看上去有一个个的小格子组成，便形象的称这种画面为马赛克。其目的通常是使之无法辨认。

先来看一下程序的运行结果：

<a target="_blank" href="http://blog.51cto.com/attachment/201105/155255561.jpg"></a>

要实现这个效果，我们是通过图片的Clip属性。

图片的Cilp属性

用于确定剪辑区域大小的几何图形。一个典型的例子如下：

在没有使用Clip属性之前图片是这样的：

使用的代码是MSDN上的代码

&lt;Image   

  Source="sampleImages\Waterlilies.jpg"   

  Width="200" Height="150" HorizontalAlignment="Left"&gt; 

  &lt;Image.Clip&gt; 

    &lt;EllipseGeometry 

      RadiusX="100" 

      RadiusY="75" 

      Center="100,75"/&gt; 

  &lt;/Image.Clip&gt; 

&lt;/Image&gt; 

使用了Clip属性之后：

<a target="_blank" href="http://blog.51cto.com/attachment/201105/155421717.png"></a>

CompositionTarget.Rendering

CompositionTarget 是一个类，表示正在其上绘制您的应用程序的显示图面。 WPF 动画引擎为创建基于帧的动画提供了许多功能。 但是，在有些应用程序方案中，您需要根据每个帧控制呈现。 使用 CompositionTarget 对象，可以基于每个帧回调来创建自定义动画。

我们在程序中使用这个重绘的方法来重绘屏幕，具体的代码如下：

void CompositionTarget_Rendering(object sender, EventArgs e)  

        {  

            double springness = Spring;  

            double scale = 1;  

            //遍历每一个图片  

            for (int i = 0; i &lt; images.Length; i++)  

            {  

                //当前的图片  

                Image image = images[i];  

                // 根据目标点重定位图片  

                double offsetX = -(image.Width - ImageWidth) / ImageWidth * targetPoint.X;  

                double offsetY = -(image.Height - ImageHeight) / ImageHeight * targetPoint.Y;  

                image.SetValue(Canvas.LeftProperty, offsetX);  

                image.SetValue(Canvas.TopProperty, offsetY);  

                // 更新马赛克  

                EllipseGeometry ellipseGeometry = (EllipseGeometry)image.Clip;  

                Point center = ellipseGeometry.Center;  

                centercenter.X = center.X + (targetPoint.X - offsetX - center.X) * springness;  

                centercenter.Y = center.Y + (targetPoint.Y - offsetY - center.Y) * springness;  

                ellipseGeometry.Center = center;  

                image.Clip = ellipseGeometry;  

                springness *= SpringDrag;  

                scale += LayerScale;  

            }  

        } 

打造马赛克 

我们使用多重图片堆叠来打造马赛克，具体的代码如下：

/// &lt;summary&gt; 

        /// 将打过马赛克的图片添加到窗体中  

        /// &lt;/summary&gt; 

        private void addImage()  

            double radius = InitialRadius;//初始半径  

            ImageSource imageSource = new BitmapImage(new Uri(ImagePath, UriKind.Relative));  

            //遍历层数  

            for (int i = 0; i &lt; LayerCount; i++)  

                // 创建马赛克  

                EllipseGeometry ellipseGeometry = new EllipseGeometry();  

                ellipseGeometry.Center = new Point(0, 0);  

                ellipseGeometry.RadiusX = radius;  

                ellipseGeometry.RadiusY = radius;  

                double offsetX = ImageWidth * (1 - scale) / 2;  

                double offestY = ImageHeight * (1 - scale) / 2;  

                // 创建图片，并设置图片的位置  

                Image image = new Image();  

                image.Source = imageSource;  

                image.Width = ImageWidth * scale;  

                image.Height = ImageHeight * scale;  

                image.SetValue(Canvas.TopProperty, offestY);  

                // 用于确定剪辑区域大小的几何图形  

                // 将马赛克和图片添加到屏幕中  

                images[i] = image;  

                LayoutRoot.Children.Insert(0, image);  

                radius += RadiusIncrement;  

            // 将图片添加到窗体的背景中  

            Image background = new Image();  

            background.Source = imageSource;  

            LayoutRoot.Children.Insert(0, background);  

详细的代码可以参加源代码。

WPF版源文件下载：

<a target="_blank" href="http://blog.51cto.com/attachment/201105/2621421_1306396586.rar"></a>

Silverlight版源文件下载：

<a target="_blank" href="http://blog.51cto.com/attachment/201105/2621421_1306396615.zip"></a>

<a href="http://down.51cto.com/data/2358229" target="_blank">附件：http://down.51cto.com/data/2358229</a>

    本文转自xshf12345 51CTO博客，原文链接：http://blog.51cto.com/alexis/574740，如需转载请自行联系原作者