[源码下载]
稳扎稳打Silverlight(38) - 3.0滤镜之BlurEffect,DropShadowEffect,自定义滤镜,3D效果之PlaneProjection,位图API之WriteableBitmap
作者：webabcd
介绍
Silverlight 3.0 图形系统的相关新增功能
@H_419_21@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
[源码下载] 总结
以上是内存溢出为你收集整理的稳扎稳打Silverlight(38) - 3.0滤镜之BlurEffect, DropShadowEffect, 自定义滤镜全部内容，希望文章能够帮你解决稳扎稳打Silverlight(38) - 3.0滤镜之BlurEffect, DropShadowEffect, 自定义滤镜所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）