稳扎稳打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(4030);
            
            
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(320240);

            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
[源码下载]
posted @ 2009-08-27 08:59  webabcd  阅读(7847)  评论(10编辑  收藏  举报