WPF实现类似于Flash的遮罩（Mask）效果

Ray

松德提出的问题，如何像Flash当中一样，能把WPF中的Control作为一个遮罩元件。
要求的效果：
1、使用控件作为遮罩元件。
2、遮罩的颜色可以混合。
3、使用Blend，而不要写代码。

WPF的控件默认提供一个Clip属性，可以实现类似的效果。但是Clip是一个Geometry，如果遮罩元件本身要求有动画之类的，Clip就无法实现，或者很难实现。

研究了一下，可以利用WPF中的OpacityMask来做。OpacityMask合成的原则是，有颜色的地方就显示，同时按照透明度来进行混合。因此，我们把被遮罩对象的OpacityMask设置为遮罩元件的VisualBrush即可。但是，注意顾名思义，该属性仅仅只是改变控件可见的程度，而无法混合OpacityMask本身的颜色。

因此，无法直接实现松德要求的效果。

考虑间接的实现，把遮罩拆成两步，一步是利用OpacityMask进行遮罩，一步是实现混合。
整体结构如下：

MaskLayer是一个Grid，用来放置提供VisualBrush的遮罩元素。MaskLayer本身是Hidden的，而当中的遮罩元素是Visible的，这样我们就不会直接看见遮罩元素，同时遮罩元素能提供有效的VisualBrush。
BrushLayer是一个Rectangle，用来提供混合的颜色。
示例中，MaskLayer和BrushLayer都被设置成HitTestVisible = false，这个看需求。

首先，我们在MaskLayer中放置一个TextBlock，然后通过Blend提供的工具，调用菜单Tools->Make Brush Resource->Make VisualBrush Resource来创建一个VisualBrush。

Image_MaskTarget是一个Image控件，也就是被遮罩的元素。我们将它的OpacityMask指定为刚才创建的VisualBrush，这时候应该已经能看到Image仅仅显示出TextBlock中Text所限定的区域了。

接着，我们设置MaskLayer（即 Rectangle）的Fill为我们想要的颜色，这里设定是一个蓝色，并且透明度是30%，接下来，将MaskLayer的OpacityMask也指定成TextBlock的VisualBrush，否则会显示整个MaskLayer的颜色。

最后，做个TextBlock的动画。

WpfMask.zip (777.24 KB, 下载次数: 84)

2010-8-18 14:38:36 上传

下载次数: 84

但是，这种方式似乎有个缺陷，就是没法对TextBlock的位置做动画

luckyapple

占领沙发

8201746yss

太快了吧，我都没沙发

Ray

这种方式没法改变Mask的位置，大家有没有更好的办法？

8201746yss

为什么MARK后的效果大小并非与实现的TEXTBLOCK一致呢？

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
        x:Class="WpfMask.Window1"
        x:Name="Window"
        Title="Window1"
        UseLayoutRounding="True"
        Width="640" Height="480">
        <Window.Resources>
                <VisualBrush x:Key="textBlock" Visual="{Binding ElementName=textBlock}"/>
        </Window.Resources>

        <Grid x:Name="LayoutRoot">
                <Rectangle Fill="Blue" Margin="94,194,81,220" Stroke="Black" OpacityMask="{DynamicResource textBlock}"/>
                <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="2,203,0,224" TextWrapping="Wrap" Text="TextBlock" FontSize="21.333" d:LayoutOverrides="Height"/>
        </Grid>
</Window>

8201746yss

悲剧的是VISUALBRUSH在SLIVERLIGHT都没有，这样的效果在IE是实现就更无望了

Ray

那就只好搞个Clip了

liqiwen

确实不错，好好看看