稳扎稳打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

/**/ /*
 * 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
[源码下载]