Silverlight 3 Beta 新特性解析（2）-Graphics篇

如何利用新的Bitmap API来创建我们自己的图像透视3D图像(Perspective 3D Graphic)像素模糊和投影效果Element-To-Element BindingBitmap API的写图像功能新版的Bitmap API支持从写每个像素的值来创建自己的图像这个用来支持生成Bitmap的类叫做WriteableBitmap继承自BitmapSource类这个类位于System.Windows.Media.Imaging名字空间中其函数成员包括1: public sealed class WriteableBitmap : BitmapSource2: {3: public WriteableBitmap(BitmapSource source);4: public WriteableBitmap(int pixelWidth, int pixelHeight, PixelFormat format);5: public int this[int index] { get; set; }6: public void Invalidate();7: public void Lock();8: public void Render(UIElement element, Transform transform);9: public void Unlock();10: }从上图可以看出我们可以通过两种形式来实例化这个WriteableBitmap一个是通过传入已经初始化了的BitmapSource另外一个是通过输入图像高度和宽度以及像素类型有Bgr32和Pbgra32两种后面一种可以创建半透明图像第5行的索引this[int index]可以用来读或取像素点写一个WriteableBitmap的流程是这样的实例化WriteableBitmap调用Lock方法写像素点调用Invalidate方法最后是调用Unlock方式来释放所有的Buffer并准备显示如下文所示以描点的方式构建了整个Bgr32图像1: private WriteableBitmap BuildTheImage(int width, int height)2: {3: WriteableBitmap wBitmapnew WriteableBitmap(width,height,PixelFormats.Bgr32);4: wBitmap.Lock();5:6: for (int x 0; x width; x)7: {8: for (int y 0; y height; y)9: {10: byte[] brg new byte[4];11: brg[0](byte)(Math.Pow(x,2) % 255); //Blue, B12: brg[1] (byte)(Math.Pow(y,2) % 255); //Green, G13: brg[2] (byte)((Math.Pow(x, 2) Math.Pow(y, 2)) % 255); //Red, R14: brg[3] 0;15:16: int pixel BitConverter.ToInt32(brg, 0);17:18: wBitmap[y * height x] pixel;19: }20: }21:22: wBitmap.Invalidate();23: wBitmap.Unlock();24:25: return wBitmap;26: }画出来的图像如下图所示很神奇的一个改进。有了这个类我们就可以操纵像素点了在微软上对图像处理做些应用比如去红点等功能透视3D效果所有继承自System.Windows.UIElement的类都将含有Projection这个属性也就是说我们看到的所有控件都将具有3D功能你可以通过沿X轴Y轴或者Z轴旋转任意角度来获得3D效果如将上面生成的图片沿X轴旋转-20度我们可以得到其默认的旋转轴心是CenterOfRotationX0.5,CenterOfRotationY0.5,CenterOfRotationZ0上面的旋转代码如下:1: Image x:NameImg2: Image.Projection3: PlaneProjection x:NameImageProjection RotationX-20/4: /Image.Projection5: /Image其他空间的3D平面投影与此类似像素模糊和投影效果与Projection一样Effect属性也是在System.Windows.UIElement所以所有的Toolbar中的控件都支持像素模糊和投影效果模糊和投影效果(BlurEffect and DropShadowEffect)都在System.Windows.Media.Effects这个名字空间中整个控件模糊效果的程度由Radius来控制其默认值为5Radius越大应用了BlurEffect的控件越模糊代码如下1: Slider2: Slider.Effect3: BlurEffect Radius20/4: /Slider.Effect5: /Slider投影效果的参数比模糊效果复杂些共有5个属性来控制投影效果BlurRadius用来控制控件边缘的模糊度值越大边缘越模糊默认值仍然是5Color属性用来设置投影的颜色默认颜色是黑色Direction属性用来控制投影方向值为0时代表投影到控件的正右方以逆时针的形式来增大投影角度默认值为315值的范围只能在0~360之间Opacity属性用来控制边缘的透明度其使用而控件的Opacity属性一样ShadowDepth属性用来设置投影平面和控件平面的垂直距离默认值为5其值范围为0~300其代码如下1: Slider2: Slider.Effect3: DropShadowEffect BlurRadius5 ColorWhite Opacity0.7 ShadowDepth7/4: /Slider.Effect5: /SliderElement-To-Element Binding元素和元素之间的属性绑定是首先在WPF中实现的现在Silverlight 3终于把这个实用的功能引入了绑定的格式如{Binding 属性名,Mode绑定模式,ElementName绑定元素}其中绑定元素就是你先绑定的元素的名字属性名是你想绑定的元素的属性名这样将把被绑定的元素的绑定属性的值绑定给新元素的属性最后绑定模式有两种OneWay和TwoWayTwoWay表示有一方的绑定属性的值改变了两边的值都同步更新而OneWay表现只在被绑定元素的属性值改变后绑定元素的属性值才改变而反之不成立如下代码1: Image Width400 Height400 x:NameImg2: Image.Projection3: PlaneProjection x:NameImageProjection/4: /Image.Projection5: /Image6: Slider x:NamePlotX Minimum-90 Maximum90 Value{Binding RotationX, ModeTwoWay, ElementNameImageProjection}/7: Slider x:NamePlotY Minimum-90 Maximum90 Value{Binding RotationY, ModeTwoWay, ElementNameImageProjection}/8: Slider x:NamePlotZ Minimum-90 Maximum90 Value{Binding RotationZ, ModeTwoWay, ElementNameImageProjection}/是用了三个Slider来绑定控制Image的3D效果效果图如下