[silverlight] silverlight3新增功能2:WriteableBitmap

      来学习WriteableBitmap吧。看看參考文檔中的描述:

      使用 WriteableBitmap 类基于每个框架来更新和呈现位图。这对于拍摄正播放视频的快照、生成算法内容(如分形图像)和数据可视化(如音乐可视化应用程序)很有用。

      SL3新增的功能中这个还算比较重要,它继承BitmapSource,使用构造函数WriteableBitmap(UIElement, Transform)可以将传入的UIElement保存为一张图片。不过在文档中找不到设置要保存为图片的UIElement的方法,所以搞不明白另两个构造函数 (Int32, Int32)和(BitmapSource)有什么用。另外,“Invalidate”方法的作用是“请求绘制整个位图”也搞不懂是做什么的,请高手指教。

      先来测试一下吧。
      首先摆一个TextBlock,把它做成图片,代码如下:

WriteableBitmap bitmap = new WriteableBitmap(text, null);
img.Source 
= bitmap;
txt1.Text 
= string.Format("{0} * {1}", bitmap.PixelWidth, bitmap.PixelHeight);

 

Xaml

效果图:


      虽然能正确地显示图片,但有个问题,在Loaded事件中调用,以及自己点击按钮调用,出来的效果是不一样的(左下角是Loaded事件中的效果,右下角是点击按钮后出来的效果)。在Loaded事件中TextBlock的ActualHeight是16,但图片的高度是12。不过实际应用不太可能在Loaded事件中使用这个功能,暂时忽略吧。
      题外话,SL3中BitmapSource的PixelWidth和PixelHeight可以很方便地取得图片的大小。以前为了实现这个功能,我还试过把图片放在一个ScrollViewer中让它自由拉伸再取它的实际大小,以后再也不需要做这种麻烦事了。

实际应用一:
      WriteableBitmap其中一个很激动人心的应用是,终于可以保存用SL生成的图表了。WriteableBitmap可以将对象的Clip、Effect、Opacity、OpacityMask、Children呈现出来,连Projection也不例外。本来打算用这种方法获取对象的截图:
      WriteableBitmap bitmap = new WriteableBitmap(rectangle, rectangle.RenderTransform);
      但后来发先这种方法不可行,因为RenderTransformOrigin="0.5,0.5"这个属性不可以获取到,最终出来的截图和实际效果不符。但是获取父元素的截图就没问题了。
      最终效果:
获取 Microsoft Silverlight

      在高分辨率下截太多图内存消耗是很大的,请小心(1280分辨率下几M一张图,现在的分辨率是500*500左右)。
      XAML:
Code

      截图的代码:
Code
      既然截图没问题了,那就考虑保存为PNG,使用了这个网站的PngEncoder:
http://blogs.msdn.com/jstegman/archive/2008/04/21/dynamic-image-generation-in-silverlight.aspx
      获取了png的stream,再多做一步,用SaveFileDialog把这个stream直接保存到硬盘吧,代码如下:
Code

      直接操作dialog.OpenFile()这个流好像会出好多问题,譬如直接Close这个流居然会提示没打开文件,但把dialog.OpenFile()赋值到另一个流再操作就没问题了。我对流操作很没信心,如果做得不好请高手指教。
      还有一点没考虑清楚,就是那个png是没有经过压缩的,最终出来的文件很巨大,如果哪位高手有PNG的压缩方法,请务必告诉我。

实际应用二:
      WriteableBitmap的另一个应该用,是提高动画的性能。当要做动画的元素子元素太多的时候,动画的效果是很差的,恐怕是因为StoryBoard需要计算里面全部的子元素。这时候如果把全部子元素做成一张图片,StoryBoard说计算的量就会大大减小。下面这个SL中,左边和右边的框里面加了100个Grid和TextBox,而中间那个什么都没有加。
      構造函數中的代碼:
Code
      但使用了WtiteableBitmap后,右边那个的动画效果和中间那个是非常接近的,即使把WriteableBitmap的构造函数写在动画开始之前。
Code

實際效果:

获取 Microsoft Silverlight

      关于WriteableBitmap的实际应用,目前我也只是想到这两个,期待补充。 
      測試代碼:
/Files/dino623/WriteableBitmapTest.rar
posted @ 2009-09-04 18:30 dino.c 阅读(...) 评论(...) 编辑 收藏