来学习WriteableBitmap吧。看看參考文檔中的描述:
使用 WriteableBitmap 类基于每个框架来更新和呈现位图。这对于拍摄正播放视频的快照、生成算法内容(如分形图像)和数据可视化(如音乐可视化应用程序)很有用。
SL3新增的功能中这个还算比较重要,它继承BitmapSource,使用构造函数WriteableBitmap(UIElement, Transform)可以将传入的UIElement保存为一张图片。不过在文档中找不到设置要保存为图片的UIElement的方法,所以搞不明白另两个构造函数 (Int32, Int32)和(BitmapSource)有什么用。另外,“Invalidate”方法的作用是“请求绘制整个位图”也搞不懂是做什么的,请高手指教。
先来测试一下吧。 首先摆一个TextBlock,把它做成图片,代码如下:
代码语言:javascript复制WriteableBitmap bitmap = new WriteableBitmap(text, null);
img.Source = bitmap;
txt1.Text = string.Format("{0} * {1}", bitmap.PixelWidth, bitmap.PixelHeight);
代码语言:javascript复制<Grid x:Name="LayoutRoot">
<TextBlock Text="sdfsdfsdfsdfsd" x:Name="text" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button Height="25" Width="100" Click="Button_Click" Content="截图"/>
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Bottom">
<TextBlock x:Name="txt1"/>
<Border BorderBrush="Black" Width="Auto" Height="Auto" BorderThickness="1">
<Image Height="Auto" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto"
x:Name="img"/>
</Border>
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Bottom">
<TextBlock x:Name="txt2"/>
<Border BorderBrush="Black" Width="Auto" Height="Auto" BorderThickness="1">
<Image Height="Auto" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center"
Width="Auto" x:Name="img2"/>
</Border>
</StackPanel>
</Grid>
效果图:
虽然能正确地显示图片,但有个问题,在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"这个属性不可以获取到,最终出来的截图和实际效果不符。但是获取父元素的截图就没问题了。
最终效果:
在高分辨率下截太多图内存消耗是很大的,请小心(1280分辨率下几M一张图,现在的分辨率是500*500左右)。
XAML:
代码语言:javascript复制<Grid x:Name="grid">
<Rectangle x:Name="rectangle" Fill="Red" RenderTransformOrigin="0.5,0.5" StrokeThickness="2" Stroke="Black"
HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" Height="300">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Projection>
<PlaneProjection/>
</Rectangle.Projection>
</Rectangle>
</Grid>
<ListBox x:Name="listBox" Grid.Column="1" Style="{StaticResource ListBoxStyle}"
ItemContainerStyle="{StaticResource ListBoxItemStyle}" />
截图的代码:
代码语言:javascript复制Transform tf = rectangle.RenderTransform;
WriteableBitmap bitmap = new WriteableBitmap(grid,null);
Image img = new Image();
img.Height = 150;
img.Width = 150;
img.Source = bitmap;
img.Stretch = Stretch.Uniform;
ListBoxItem item = new ListBoxItem();
item.Content = img;
listBox.Items.Add(item);
既然截图没问题了,那就考虑保存为PNG,使用了这个网站的PngEncoder:
http://blogs.msdn.com/jstegman/archive/2008/04/21/dynamic-image-generation-in-silverlight.aspx
获取了png的stream,再多做一步,用SaveFileDialog把这个stream直接保存到硬盘吧,代码如下:
代码语言:javascript复制SaveFileDialog dialog = new SaveFileDialog();
dialog.Filter = "支持的图像文文件(*.png)|*.png";
if (dialog.ShowDialog() != true)
{
return;
}
WriteableBitmap bitmap = new WriteableBitmap(grid, null);
int[] i = bitmap.Pixels;
EditableImage imageData = new EditableImage(bitmap.PixelWidth, bitmap.PixelHeight);
for (int y = 0; y < bitmap.PixelHeight; y)
{
for (int x = 0; x < bitmap.PixelWidth; x)
{
int pixel = i[bitmap.PixelWidth * y x];
imageData.SetPixel(x, y,
(byte)((pixel >> 16) & 0xFF),
(byte)((pixel >> 8) & 0xFF),
(byte)(pixel & 0xFF),
(byte)((pixel >> 24) & 0xFF)
);
}
}
Stream pngStream = imageData.GetStream();
byte[] buffer = new byte[pngStream.Length];
pngStream.Read(buffer, 0, (int)pngStream.Length);
pngStream.Dispose();
Stream st = dialog.OpenFile();
st.Write(buffer, 0, buffer.Length);
st.Close();
直接操作dialog.OpenFile()这个流好像会出好多问题,譬如直接Close这个流居然会提示没打开文件,但把dialog.OpenFile()赋值到另一个流再操作就没问题了。我对流操作很没信心,如果做得不好请高手指教。
还有一点没考虑清楚,就是那个png是没有经过压缩的,最终出来的文件很巨大,如果哪位高手有PNG的压缩方法,请务必告诉我。
实际应用二:
WriteableBitmap的另一个应该用,是提高动画的性能。当要做动画的元素子元素太多的时候,动画的效果是很差的,恐怕是因为StoryBoard需要计算里面全部的子元素。这时候如果把全部子元素做成一张图片,StoryBoard说计算的量就会大大减小。下面这个SL中,左边和右边的框里面加了100个Grid和TextBox,而中间那个什么都没有加。
構造函數中的代碼:
代码语言:javascript复制Grid grid;
TextBox text;
for (int i = 0; i < 100; i )
{
grid = new Grid { Background = new SolidColorBrush(Colors.Transparent) };
text = new TextBox { Text = i.ToString() };
grid.Children.Add(text);
grid1.Children.Add(grid);
grid = new Grid { Background = new SolidColorBrush(Colors.Transparent) };
text = new TextBox { Text = i.ToString() };
grid.Children.Add(text);
grid3.Children.Add(grid);
}
但使用了WtiteableBitmap后,右边那个的动画效果和中间那个是非常接近的,即使把WriteableBitmap的构造函数写在动画开始之前。
代码语言:javascript复制private void OnButton3Click(object sender, RoutedEventArgs e)
{
ToggleButton button = sender as ToggleButton;
if (button.IsChecked == true)
{
WriteableBitmap bitmap = new WriteableBitmap(grid3, null);
Image img = new Image();
img.Source = bitmap;
border3.Child = img;
Storyboard3.Begin();
}
else
{
Storyboard3.Stop();
border3.Child = grid3;
}
}
實際效果:
关于WriteableBitmap的实际应用,目前我也只是想到这两个,期待补充。
測試代碼:
/Files/dino623/WriteableBitmapTest.rar