稳扎稳打Silverlight(38) - 3.0滤镜之BlurEffect, DropShadowEffect, 自定义滤镜, 3D效果之PlaneProjection, 位图API之WriteableBitmap

[索引页]
[源码下载]

稳扎稳打Silverlight(38) - 3.0滤镜之BlurEffect, DropShadowEffect, 自定义滤镜, 3D效果之PlaneProjection, 位图API之WriteableBitmap

作者：webabcd


介绍
Silverlight 3.0 图形系统的相关新增功能

• BlurEffect - 模糊滤镜 
• DropShadowEffect - 阴影滤镜
• 自定义滤镜 
• PlaneProjection - 将平面的 UIElement 映射到 3D
• WriteableBitmap - 位图 API（Bitmap API）

在线DEMO
http://www.cnblogs.com/webabcd/archive/2009/08/04/1538238.html


示例
1、模糊滤镜(BlurEffect)的演示
BlurEffect.xaml

<navigation:Page x:Class="Silverlight30.Graphic.BlurEffect" 
           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"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="BlurEffect Page">
    <Grid x:Name="LayoutRoot">
        <StackPanel>
        
            <!--
                滤镜效果之 Blur
                BlurEffect - 模糊效果
                    BlurEffect.Radius - 模糊半径。越大越模糊，默认值为 5
            -->
        
            <Image Source="/Resource/Logo.jpg">
                <Image.Effect>
                    <BlurEffect x:Name="blurEffect" Radius="5" />
                </Image.Effect>
            </Image>
            
            <Slider Width="500" Minimum="0" Maximum="10" Value="{Binding Radius, Mode=TwoWay, ElementName=blurEffect}" />
            
        </StackPanel>
    </Grid>
</navigation:Page>

2、阴影滤镜(DropShadowEffect)的演示
DropShadowEffect.xaml

<navigation:Page x:Class="Silverlight30.Graphic.DropShadowEffect" 
           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"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="DropShadowEffect Page">
    <Grid x:Name="LayoutRoot">
        <StackPanel>
        
            <!--
                滤镜效果之 DropShadow
                DropShadowEffect - 阴影效果
                    DropShadowEffect.BlurRadius - 阴影的模糊半径。默认值为 5
                    DropShadowEffect.Color - 阴影的颜色。默认值为 FF000000
                    DropShadowEffect.Direction - 阴影相对于 UIElement 的方向。以光源从右向左照射为 0 度，度数为逆时针正累加，默认值 315 度（即阴影在 UIElement 的右下角）
                    DropShadowEffect.Opacity - 阴影的不透明度。默认值为 1
                    DropShadowEffect.ShadowDepth - 阴影的深度（即阴影与 UIElement 间的偏离量）。默认值为 5，有效值为 0 - 300 之间
            -->
        
            <Image Source="/Resource/Logo.jpg">
                <Image.Effect>
                    <DropShadowEffect x:Name="dropShadowEffect" 
                                      BlurRadius="5" 
                                      Color="Blue" 
                                      Direction="315" 
                                      Opacity="1" 
                                      ShadowDepth="5" />
                </Image.Effect>
            </Image>
            
            <Slider Width="500" Minimum="0" Maximum="10" Value="{Binding BlurRadius, Mode=TwoWay, ElementName=dropShadowEffect}" />
            <Slider Width="500" Minimum="0" Maximum="360" Value="{Binding Direction, Mode=TwoWay, ElementName=dropShadowEffect}" />
            <Slider Width="500" Minimum="0" Maximum="1" Value="{Binding Opacity, Mode=TwoWay, ElementName=dropShadowEffect}" />
            <Slider Width="500" Minimum="0" Maximum="100" Value="{Binding ShadowDepth, Mode=TwoWay, ElementName=dropShadowEffect}" />
            
        </StackPanel>
    </Grid>
</navigation:Page>

3、自定义滤镜的实现。滤镜库地址http://www.codeplex.com/wpffx
以下以条纹漩涡滤镜为例演示
BandedSwirlEffect.xaml

<navigation:Page x:Class="Silverlight30.Graphic.BandedSwirlEffect" 
           xmlns:effects="clr-namespace:ShaderEffectLibrary"
           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"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="SwirlEffect Page">
    <Grid x:Name="LayoutRoot">
        <StackPanel>
        
            <!--
                Silverlight 3.0 只有两个内置滤镜：BlurEffect 和 DropShadowEffect
                其他更多滤镜可以在 http://www.codeplex.com/wpffx 下载。滤镜的算法本质上来说都是基于像素的渲染器
                .fx 为滤镜源文件，编译后为 .ps 文件，.cs 文件可以调用 .ps 文件，从而在 Silverlight 中呈现具体的滤镜效果
                以下以一个条纹漩涡滤镜为例演示 http://www.codeplex.com/wpffx 上的滤镜库的应用
            -->
        
            <Image Source="/Resource/Logo.jpg">
                <Image.Effect>
                    <effects:BandedSwirlEffect SwirlStrength="10" />
                </Image.Effect>
            </Image>
            
        </StackPanel>        
    </Grid>
</navigation:Page>

4、3D效果的演示
Projection.xaml

<navigation:Page x:Class="Silverlight30.Graphic.Projection" 
           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"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           Title="Projection Page">
    <Grid x:Name="LayoutRoot">
        <StackPanel>
        
            <!--
                Projection - 映射
                PlaneProjection - 将平面的 UIElement 映射到 3D
                    RotationX, RotationY, RotationZ - 绕 X轴, Y轴, Z轴 旋转的角度
                    CenterOfRotationX, CenterOfRotationY, CenterOfRotationZ - X轴, Y轴, Z轴 旋转中心点的相对位置（CenterOfRotationX, CenterOfRotationY 默认值为 0.5 ， CenterOfRotationZ 默认值为 0）
                    GlobalOffsetX, GlobalOffsetY, GlobalOffsetZ - 沿 X轴, Y轴, Z轴 的偏移量，此 3 个方向与屏幕的 3 个方向相同
                    LocalOffsetX, LocalOffsetY, LocalOffsetZ - 沿 X轴, Y轴, Z轴 的偏移量，此 3 个方向与 相关UIElement 当前的 3 个方向相同
            -->
        
            <MediaElement x:Name="mediaElement" Source="/Resource/Demo.mp4" AutoPlay="True" MediaEnded="mediaElement_MediaEnded" Width="320" Height="240">
                <MediaElement.Projection>
                    <PlaneProjection x:Name="projection" />
                </MediaElement.Projection>
            </MediaElement>
                        
            <Slider Minimum="0" Maximum="360" Value="{Binding RotationX, Mode=TwoWay, ElementName=projection}" ToolTipService.ToolTip="RotationX" />
            <Slider Minimum="0" Maximum="360" Value="{Binding RotationY, Mode=TwoWay, ElementName=projection}" ToolTipService.ToolTip="RotationY" />
            <Slider Minimum="0" Maximum="360" Value="{Binding RotationZ, Mode=TwoWay, ElementName=projection}" ToolTipService.ToolTip="RotationZ" />
            
        </StackPanel>
    </Grid>
</navigation:Page>

5、应用位图 API（Bitmap API）实现常用功能的演示
WriteableBitmapDemo.xaml

<navigation:Page x:Class="Silverlight30.Graphic.WriteableBitmapDemo" 
           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"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="WriteableBitmapDemo Page">
    <Grid x:Name="LayoutRoot">
        <StackPanel HorizontalAlignment="Left">
        
            <Image x:Name="img" />
            
            <Image x:Name="img2" />
            
            <TextBlock x:Name="lbl" />
            <Image x:Name="img3" Source="/Resource/Logo.jpg" MouseMove="img3_MouseMove"/>
            
            <StackPanel Orientation="Horizontal">
                <MediaElement x:Name="mediaElement" Source="/Resource/Demo.mp4" MediaEnded="mediaElement_MediaEnded" />
                <Button Content="截屏" Click="Button_Click" Width="40" Height="30" VerticalAlignment="Center" />
                <Image x:Name="img4" />
            </StackPanel>
     
        </StackPanel>
    </Grid>
</navigation:Page>

WriteableBitmapDemo.xaml.cs

OK
[源码下载]