AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

稳扎稳打Silverlight(38) - 3.0滤镜之BlurEffect, DropShadowEffect, 自定义滤镜, 3D效果之PlaneProjection, 位图API之Writeab

分类：Silverlight作者：编程之家
  [索引页]
[源码下载]

稳扎稳打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, 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
[源码下载]

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

c# – 如何在Silverlight 4中绑定ContextMenu的IsEnabled属性？
如何在Silverlight4(XAML)中绑定IsEnabled属性？我试过简单的IsEnabled=“{BindingABC}”,但这不起作用–MenuItem总是启用.提前感谢您的线索！干杯编辑：有趣的是,当设置Mode=TwoWay时,绑定似乎有效.但是,在菜单项上...
c# – 使用Silverlight / windows手机式控件设置我的.Net桌面应用程序GUI
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,因为我确信即使是一个c#人也可以使用类似的.net实现来回答这个问题).我申请的简短说明：我的桌面应用程序将仅在win平台上运行,使用vb.net,它是一个简单的网...
c# – Silverlight：将服务调用和文件处理移动到后台线程
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如果它在UIThread上,如何将文件请求和ProcessFile()移动到单独的线程？varxClient=newServiceReference1.Service1SoapClient();xClient.Retrieve_File_Compl...
c# – 如何从ASP.NET / Silverlight开发人员成为sharepoint开发人员？
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不在办公室使用sharepoint.所以不知道如何开始.这些是我的新手问题>学习共享点值得努力吗？>学习sharepoint的资源在哪里？>我是否应该考虑开发哪些...
c# – Windows Phone 8 – 将列表保存到IsolatedStorage
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明：Thecollectiondatacontracttype‘System.Collections.Generic.Listcannotbedeserializedbecauseitdoesnothaveapublicparameterlessconstructor.Addingapu...
c# – 在XAML中使用绑定设置样式
我需要根据Silverlight中的某些配置值设置给定控件的Style.我想有可能从两种可用的样式(静态资源)中选择一个控件样式.我试图做一些像：<TextBoxStyle="{BindingABC}"/>哪里publicstringABC{get{retu...
Android设备上的Silverlight / Moonlight
我刚买了第一台Android设备,我喜欢它…我也很喜欢你可以创建自己的应用程序并随意分发它们.我已经阅读了一些关于Monodroid的内容,而且显然微软希望将Silverlight放在这些设备上,尽管没有太多关于它们的信息……但是M...
c# – 从silverlight应用程序访问SQL Server数据库
我们的ASP.NET网站允许用户执行各种查询,并根据从数据库查询的结果显示网络图(如UML图).目前,我们正在生成一个位图并显示它.但由于我们需要支持允许用户以交互方式显示/隐藏某些块的功能,因此我们计划使用Silverligh...
c# – 自定义Silverlight启动画面导致白屏死机
我正在开发一个Silverlight4应用程序,我已经创建了一个自定义的启动画面.乍一看,自定义启动画面运行良好–非常好.几天后,我开始注意到闪屏不再显示,屏幕仍然是空白.这似乎只发生在我打开多个指向同一个应用程序的IE选...
c# – 使用带偏移的RotateTransform问题旋转图像
这是我的XAML：<ImageVerticalAlignment="Center"HorizontalAlignment="Center"Source="{BindingInput,Converter={StaticResourceByteArrayToBitmapConverter}}"><Image.Ren...
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native