稳扎稳打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://webabcd.blog.51cto.com/1787395/342289 


示例
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(); 
                } 
        } 
}
 
 




     本文转自webabcd 51CTO博客,原文链接: http://blog.51cto.com/webabcd/342759 ,如需转载请自行联系原作者
相关文章
Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象
原文:Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象 原创文章,如需转载,请注明出处。   最近在一直研究Silverlight下的数据绑定控件,发现有这样两个接口IEditableObject 和IEditableCollectionView,记录一下结论,欢迎交流指正。
870 0
Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)
原文:Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)   模糊效果(BlurEffect)与阴影效果(DropShadowEffect)是两个非常实用和常用的两个特效,比如在开发相册中,可以对照片的缩略图添加模糊效果,在放大照片的过程中动态改变照片的大小和模糊的透明度来达到一个放大透明的效果。
1088 0

热门文章

最新文章