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

2016-08-20 10:57:02来源:http://webabcd.blog.51cto.com/1787395/342759作者:webabcd人点击


[索引页][源码下载]
稳扎稳打Silverlight(38) - 3.0滤镜之BlurEffect, DropShadowEffect, 自定义滤镜, 3D效果之PlaneProjection, 位图API之WriteableBitmap作者:webabcd介绍Silverlight 3.0图形系统的相关新增功能

BlurEffect - 模糊滤镜
DropShadowEffect - 阴影滤镜
自定义滤镜
PlaneProjection - 将平面的 UIElement 映射到 3D
WriteableBitmap - 位图 API(Bitmap API)
在线DEMOhttp://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(); } } }


OK[源码下载]

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台