登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

豆瓜网 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›Silverlight 3 Beta新特性解析-Graphics篇

Silverlight 3 Beta新特性解析-Graphics篇

户烫擞 2025-5-30 01:18:25
前提条件：

  阅读本文之前请确认你已经安装了如下软件
  
       
  • Visual Studio 2008 (Express) SP1   
  • Silverlight 3 Tools For Visual Studio   
  • Microsoft Expression Blend 3 MIX 09 Preview
   
  本篇主要内容：

  
       
  • 如何利用新的Bitmap API来创建我们自己的图像   
  • 透视3D图像(Perspective 3D Graphic)   
  • 像素模糊和投影效果   
  • Element-To-Element Binding
  Bitmap API的写图像功能：

  新版的Bitmap API支持从写每个像素的值来创建自己的图像
  这个用来支持生成Bitmap的类叫做WriteableBitmap，继承自BitmapSource类
  这个类位于System.Windows.Media.Imaging名字空间中，其函数成员包括
         
  1.    1: <Image Width="400" Height="400" x:Name="Img"><Slider><Slider><Image x:Name="Img">public sealed class WriteableBitmap : BitmapSource
复制代码
  
  1.    2: {
复制代码
  
  1.    3:     public WriteableBitmap(BitmapSource source);
复制代码
  
  1.    4:     </Image.Projection></Slider.Effect></Slider.Effect></Image.Projection>public WriteableBitmap(int pixelWidth, int pixelHeight, PixelFormat format);
复制代码
  
  1.    5: </Image></Slider></Slider></Image>    public int this[int index] { get; set; }
复制代码
  
  1.    6: <Slider x:Name="PlotX" Minimum="-90" Maximum="90" Value="{Binding RotationX, Mode=TwoWay, ElementName=ImageProjection}"/>    public void Invalidate();
复制代码
  
  1.    7: <Slider x:Name="PlotY" Minimum="-90" Maximum="90" Value="{Binding RotationY, Mode=TwoWay, ElementName=ImageProjection}"/>    public void Lock();
复制代码
  
  1.    8: <Slider x:Name="PlotZ" Minimum="-90" Maximum="90" Value="{Binding RotationZ, Mode=TwoWay, ElementName=ImageProjection}"/>    public void Render(UIElement element, Transform transform);
复制代码
  
  1.    9:     public void Unlock();
复制代码
  
  1.   10: }
复制代码
从上图可以看出我们可以通过两种形式来实例化这个WriteableBitmap
一个是通过传入已经初始化了的BitmapSource
另外一个是通过输入图像高度和宽度以及像素类型（有Bgr32和Pbgra32两种，后面一种可以创建半透明图像）
第5行的索引this[int index]可以用来读或取像素点
写一个WriteableBitmap的流程是这样的
      
  • 实例化WriteableBitmap  
  • 调用Lock方法  
  • 写像素点  
  • 调用Invalidate方法  
  • 最后是调用Unlock方式来释放所有的Buffer并准备显示
如下文所示以描点的方式构建了整个Bgr32图像
               
    1.    1: <Image Width="400" Height="400" x:Name="Img"><Slider><Slider><Image x:Name="Img">private WriteableBitmap BuildTheImage(int width, int height)
    复制代码
       
    1.    2: {
    复制代码
       
    1.    3:     WriteableBitmap wBitmap=new WriteableBitmap(width,height,PixelFormats.Bgr32);
    复制代码
       
    1.    4:     </Image.Projection></Slider.Effect></Slider.Effect></Image.Projection>wBitmap.Lock();
    复制代码
       
    1.    5: 
    复制代码
       
    1.    6: <Slider x:Name="PlotX" Minimum="-90" Maximum="90" Value="{Binding RotationX, Mode=TwoWay, ElementName=ImageProjection}"/>    for (int x = 0; x < width; x++)
    复制代码
       
    1.    7: <Slider x:Name="PlotY" Minimum="-90" Maximum="90" Value="{Binding RotationY, Mode=TwoWay, ElementName=ImageProjection}"/>    {
    复制代码
       
    1.    8: <Slider x:Name="PlotZ" Minimum="-90" Maximum="90" Value="{Binding RotationZ, Mode=TwoWay, ElementName=ImageProjection}"/>        for (int y = 0; y < height; y++)
    复制代码
       
    1.    9:         {
    复制代码
       
    1.   10:             byte[] brg = new byte[4];
    复制代码
       
    1.   11:             brg[0]=(byte)(Math.Pow(x,2) % 255);   //Blue, B
    复制代码
       
    1.   12:             brg[1] = (byte)(Math.Pow(y,2) % 255); //Green, G
    复制代码
       
    1.   13:             brg[2] = (byte)((Math.Pow(x, 2) + Math.Pow(y, 2)) % 255); //Red, R
    复制代码
       
    1.   14:             brg[3] = 0;
    复制代码
       
    1.   15: 
    复制代码
       
    1.   16:             int pixel = BitConverter.ToInt32(brg, 0);
    复制代码
       
    1.   17: 
    复制代码
       
    1.   18:             wBitmap[y * height + x] = pixel;
    复制代码
       
    1.   19:         }
    复制代码
       
    1.   20:     }
    复制代码
       
    1.   21: 
    复制代码
       
    1.   22:     wBitmap.Invalidate();
    复制代码
       
    1.   23:     wBitmap.Unlock();
    复制代码
       
    1.   24: 
    复制代码
       
    1.   25:     return wBitmap;
    复制代码
       
    1.   26: }
    复制代码
           画出来的图像如下图所示
1.jpeg

很神奇的一个改进。有了这个类，我们就可以操纵像素点了
在微软上对图像处理做些应用，比如去红点等功能
透视3D效果

所有继承自System.Windows.UIElement的类都将含有Projection这个属性
也就是说我们看到的所有控件都将具有3D功能
你可以通过沿X轴，Y轴或者Z轴旋转任意角度来获得3D效果
2.jpeg

如将上面生成的图片沿X轴旋转-20度，我们可以得到
3.jpeg

其默认的旋转轴心是CenterOfRotationX=0.5,CenterOfRotationY=0.5,CenterOfRotationZ=0
上面的旋转代码如下:
     
  1.    1: <Image Width="400" Height="400" x:Name="Img"><Slider><Slider><Image x:Name="Img">
复制代码
  
  1.    2:     <Image.Projection><Slider.Effect><Slider.Effect><Image.Projection>
复制代码
  
  1.    3:         <PlaneProjection x:Name="ImageProjection"/><DropShadowEffect BlurRadius="5" Color="White" Opacity="0.7" ShadowDepth="7"/><BlurEffect Radius="20"/><PlaneProjection x:Name="ImageProjection" RotationX="-20"/>
复制代码
  
  1.    4:     </Image.Projection></Slider.Effect></Slider.Effect></Image.Projection>
复制代码
  
  1.    5: </Image></Slider></Slider></Image>
复制代码
其他空间的3D平面投影与此类似
像素模糊和投影效果

与Projection一样，Effect属性也是在System.Windows.UIElement
所以所有的Toolbar中的控件都支持像素模糊和投影效果
模糊和投影效果(BlurEffect and DropShadowEffect)都在System.Windows.Media.Effects这个名字空间中
4.jpeg
5.jpeg

整个控件模糊效果的程度由Radius来控制，其默认值为5，Radius越大，应用了BlurEffect的控件越模糊
6.jpeg

代码如下：
     
  1.    1: <Image Width="400" Height="400" x:Name="Img"><Slider><Slider><Image x:Name="Img">
复制代码
  
  1.    2:     <Image.Projection><Slider.Effect><Slider.Effect><Image.Projection>
复制代码
  
  1.    3:         <PlaneProjection x:Name="ImageProjection"/><DropShadowEffect BlurRadius="5" Color="White" Opacity="0.7" ShadowDepth="7"/><BlurEffect Radius="20"/><PlaneProjection x:Name="ImageProjection" RotationX="-20"/>
复制代码
  
  1.    4:     </Image.Projection></Slider.Effect></Slider.Effect></Image.Projection>
复制代码
  
  1.    5: </Image></Slider></Slider></Image>
复制代码
投影效果的参数比模糊效果复杂些
共有5个属性来控制投影效果
BlurRadius用来控制控件边缘的模糊度，值越大边缘越模糊，默认值仍然是5
Color属性用来设置投影的颜色，默认颜色是黑色
Direction属性用来控制投影方向，值为0时代表投影到控件的正右方，以逆时针的形式来增大投影角度
       默认值为315，值的范围只能在0~360之间
Opacity属性用来控制边缘的透明度，其使用而控件的Opacity属性一样
ShadowDepth属性用来设置投影平面和控件平面的垂直距离，默认值为5，其值范围为0~300
7.jpeg

其代码如下：
     
  1.    1: <Image Width="400" Height="400" x:Name="Img"><Slider><Slider><Image x:Name="Img">
复制代码
  
  1.    2:     <Image.Projection><Slider.Effect><Slider.Effect><Image.Projection>
复制代码
  
  1.    3:         <PlaneProjection x:Name="ImageProjection"/><DropShadowEffect BlurRadius="5" Color="White" Opacity="0.7" ShadowDepth="7"/><BlurEffect Radius="20"/><PlaneProjection x:Name="ImageProjection" RotationX="-20"/>
复制代码
  
  1.    4:     </Image.Projection></Slider.Effect></Slider.Effect></Image.Projection>
复制代码
  
  1.    5: </Image></Slider></Slider></Image>
复制代码
Element-To-Element Binding：

元素和元素之间的属性绑定是首先在WPF中实现的
现在Silverlight 3终于把这个实用的功能引入了
绑定的格式如：{Binding 属性名,Mode=绑定模式,ElementName=绑定元素}
其中绑定元素就是你先绑定的元素的名字，属性名是你想绑定的元素的属性名（这样将把被绑定的元素的绑定属性的值绑定给新元素的属性）
最后绑定模式有两种：OneWay和TwoWay，TwoWay表示有一方的绑定属性的值改变了，两边的值都同步更新
而OneWay表现只在被绑定元素的属性值改变后，绑定元素的属性值才改变，而反之不成立
如下代码：
     
  1.    1: <Image Width="400" Height="400" x:Name="Img"><Slider><Slider><Image x:Name="Img">
复制代码
  
  1.    2:     <Image.Projection><Slider.Effect><Slider.Effect><Image.Projection>
复制代码
  
  1.    3:         <PlaneProjection x:Name="ImageProjection"/><DropShadowEffect BlurRadius="5" Color="White" Opacity="0.7" ShadowDepth="7"/><BlurEffect Radius="20"/><PlaneProjection x:Name="ImageProjection" RotationX="-20"/>
复制代码
  
  1.    4:     </Image.Projection></Slider.Effect></Slider.Effect></Image.Projection>
复制代码
  
  1.    5: </Image></Slider></Slider></Image>
复制代码
  
  1.    6: <Slider x:Name="PlotX" Minimum="-90" Maximum="90" Value="{Binding RotationX, Mode=TwoWay, ElementName=ImageProjection}"/>
复制代码
  
  1.    7: <Slider x:Name="PlotY" Minimum="-90" Maximum="90" Value="{Binding RotationY, Mode=TwoWay, ElementName=ImageProjection}"/>
复制代码
  
  1.    8: <Slider x:Name="PlotZ" Minimum="-90" Maximum="90" Value="{Binding RotationZ, Mode=TwoWay, ElementName=ImageProjection}"/>
复制代码
是用了三个Slider来绑定控制Image的3D效果，效果图如下
8.jpeg

代码下载：



作者：ibillguo  
出处：http://ibillguo.cnblogs.com/  
本文版权由作者和博客园共同所有，转载请注明出处
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
SilverlightBeta新特性特性解析

使用道具 举报

相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
户烫擞
2025-5-30 01:18:25

0

粉丝关注

13

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫