稳扎稳打Silverlight(38) - 3.0滤镜之BlurEffect, DropShadowEffect, 自定义滤镜

[索引页]
[源码下载]

稳扎稳打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.voidcn.com/article/p-boakcggz-tq.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,ElementName=dropShadowEffect}" />
                        <Slider Width="500" Minimum="0" Maximum="360" Value="{Binding Direction,ElementName=dropShadowEffect}" />
                        <Slider Width="500" Minimum="0" Maximum="1" Value="{Binding Opacity,ElementName=dropShadowEffect}" />
                        <Slider Width="500" Minimum="0" Maximum="100" Value="{Binding ShadowDepth,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轴,Z轴 旋转中心点的相对位置（CenterOfRotationX,CenterOfRotationY 默认值为 0.5 ， CenterOfRotationZ 默认值为 0）
                                        GlobalOffsetX,GlobalOffsetY,GlobalOffsetZ - 沿 X轴,Z轴 的偏移量，此 3 个方向与屏幕的 3 个方向相同
                                        LocalOffsetX,LocalOffsetY,LocalOffsetZ - 沿 X轴,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,ElementName=projection}" ToolTipService.ToolTip="RotationX" />
                        <Slider Minimum="0" Maximum="360" Value="{Binding RotationY,ElementName=projection}" ToolTipService.ToolTip="RotationY" />
                        <Slider Minimum="0" Maximum="360" Value="{Binding RotationZ,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

/*

* WriteableBitmap - 位图 API（Bitmap API）

* WriteableBitmap.Pixels - 一个整型数组，用于描述某像素的颜色（ARGB）

* WriteableBitmap.Render() - 将指定的 UIElement 以位图的方式呈现出来

* WriteableBitmap.Invalidate() - 绘图

* WriteableBitmap.PixelWidth - 宽度。单位：像素

* WriteableBitmap.PixelHeight - 高度。单位：像素

*/

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Navigation;

using System.Windows.Media.Imaging;

namespace Silverlight30.Graphic

{

         public partial class WriteableBitmapDemo : Page

        {

                 public WriteableBitmapDemo()

                {

                        InitializeComponent();

                         this.Loaded += new RoutedEventHandler(WriteableBitmapDemo_Loaded);

                         this.Loaded += new RoutedEventHandler(WriteableBitmapDemo_Loaded2);

                }

                 /// <summary>

                 /// 以自定义像素点颜色的方式生成位图

                 /// </summary>

                 void WriteableBitmapDemo_Loaded( object sender,RoutedEventArgs e)

                {

                         // 初始化一个宽 40 高 20 的 WriteableBitmap 对象

                        WriteableBitmap bitmap = new WriteableBitmap(40,30);

                        

                         for ( int i = 0; i < 40 * 30; i++)

                        {

                                 unchecked

                                {

                                         // 每个像素的颜色的描述规范为 ARGB

                                        bitmap.Pixels[i] = ( int)0xFFFF0000;

                                }

                        }

                        bitmap.Invalidate();

                        img.source = bitmap;

                }

                 /// <summary>

                 /// 将指定的 UIElement 以位图的方式做呈现

                 /// </summary>

                 void WriteableBitmapDemo_Loaded2( object sender,RoutedEventArgs e)

                {

                        WriteableBitmap bitmap = new WriteableBitmap(320,240);

                        var txt = new TextBlock();

                        txt.Text = "webabcd";

                         // 将指定的 TextBlock 以位图的方式呈现出来

                        bitmap.Render(txt,new ScaleTransform() { ScaleX = 320 / txt.ActualWidth,ScaleY = 240 / txt.ActualHeight });

                        bitmap.Invalidate();

                        img2.source = bitmap;

                }

                 /// <summary>

                 /// 获取指定图片的某像素点的颜色

                 /// </summary>

                 private void img3_MouseMove( object sender,MouseEventArgs e)

                {

                        WriteableBitmap bitmap = new WriteableBitmap(img3,null);

                         int color = bitmap.Pixels[( int)e.GetPosition(img3).Y * ( int)img3.ActualWidth + ( int)e.GetPosition(img3).X];

                         // 将整型转换为字节数组

                         byte[] bytes = BitConverter.GetBytes(color);

                         // 将字节数组转换为颜色（bytes[3] - A,bytes[2] - R,bytes[1] - G,bytes[0] - B）

                        lbl.Text = Color.FromArgb(bytes[3],bytes[2],bytes[1],bytes[0]).ToString();

                }

                 /// <summary>

                 /// 用 WriteableBitmap 实现对视频文件的截屏功能

                 /// </summary>

                 private void Button_Click( object sender,RoutedEventArgs e)

                {

                         // 将指定的 UIElement 转换为 WriteableBitmap 对象

                        WriteableBitmap bitmap = new WriteableBitmap(mediaElement,null);

                        img4.source = bitmap;

                }

                 private void mediaElement_MediaEnded( object sender,RoutedEventArgs e)

                {

                        mediaElement.Stop();

                        mediaElement.Play();

                }

        }

}

 

 

OK
[源码下载]