尽管矢量图形非常的强大但是在有些情况下还是需要用到位图,因为他们在运行时能得到更高的执行效率和渲染效果。在Silverlight 2.0中获得位图的唯一途径就是从服务器下载并将其嵌入到一个Image元素上。
在Silverlight 3.0中添加了一个新的图形类,WriteableBitmap。他可以动态的呈现位图,再结合上矢量图形一起运用,对于拍摄视频播放快照、生成算法内容(如分形图像)和数据可视化(如音乐可视化应用程序)很有用。也可以多次呈现位图,要使用Render方法,若是使用Render需要调用Invalidate来呈现位图。
使用WriteableBitmap
<Grid x:Name="LayoutRoot">
<Image x:Name="optImage" Margin="271,8,0,0" VerticalAlignment="Top" Width="240" Stretch="None" Height="143" HorizontalAlignment="Left"/>
<StackPanel HorizontalAlignment="Left" Width="267" Orientation="Vertical" d:LayoutOverrides="Height">
<MediaElement x:Name="myMediaElement" Source="ice.mp4" Stretch="None" Height="132" Margin="0" CurrentStateChanged="myMediaElement_CurrentStateChanged"/>
<StackPanel Margin="0" Orientation="Vertical" d:LayoutOverrides="Width">
<Button x:Name="Screenshot" Content="Screenshot" Click="Screenshot_Click"/>
<ScrollViewer x:Name="ScreenshotViewer" Height="325" Margin="0">
<StackPanel x:Name="thumbs"/>
</ScrollViewer>
</StackPanel>
</StackPanel>
</Grid>
<Image x:Name="optImage" Margin="271,8,0,0" VerticalAlignment="Top" Width="240" Stretch="None" Height="143" HorizontalAlignment="Left"/>
<StackPanel HorizontalAlignment="Left" Width="267" Orientation="Vertical" d:LayoutOverrides="Height">
<MediaElement x:Name="myMediaElement" Source="ice.mp4" Stretch="None" Height="132" Margin="0" CurrentStateChanged="myMediaElement_CurrentStateChanged"/>
<StackPanel Margin="0" Orientation="Vertical" d:LayoutOverrides="Width">
<Button x:Name="Screenshot" Content="Screenshot" Click="Screenshot_Click"/>
<ScrollViewer x:Name="ScreenshotViewer" Height="325" Margin="0">
<StackPanel x:Name="thumbs"/>
</ScrollViewer>
</StackPanel>
</StackPanel>
</Grid>
private void Screenshot_Click(object sender, System.Windows.RoutedEventArgs e)
{
// 创建一个WriteableBitmap并且把需要呈现位图的元素赋值给WriteableBitmap
WriteableBitmap wb = new WriteableBitmap(myMediaElement, null);
Image image = new Image();
image.Height = 64;
image.Margin = new Thickness(5);
image.Source = wb;
thumbs.Children.Add(image);
{
// 创建一个WriteableBitmap并且把需要呈现位图的元素赋值给WriteableBitmap
WriteableBitmap wb = new WriteableBitmap(myMediaElement, null);
// 创建一个Image元素来承载位图
Image image = new Image();
image.Height = 64;
image.Margin = new Thickness(5);
image.Source = wb;
// 将Image元素放入容器控件中
thumbs.Children.Add(image);
ScreenshotViewer.ScrollToVerticalOffset(ScreenshotViewer.ExtentHeight);
}
多次呈现
这里使用一个Timer来多次呈现位图(要使用Render方法需要调用Invalidate来呈现位图)
DispatcherTimer timer;
WriteableBitmap wbopt;
public MainPage()
{
InitializeComponent();
timer.Interval = TimeSpan.FromMilliseconds(10);
timer.Tick += new EventHandler(Render_Video);
wbopt = new WriteableBitmap(240,143);
optImage.Source = wbopt;
{
wbopt.Render(myMediaElement, null);
wbopt.Invalidate();
}
WriteableBitmap wbopt;
public MainPage()
{
InitializeComponent();
timer
= new DispatcherTimer();timer.Interval = TimeSpan.FromMilliseconds(10);
timer.Tick += new EventHandler(Render_Video);
wbopt = new WriteableBitmap(240,143);
optImage.Source = wbopt;
timer.Start();
}
void Render_Video(object sender, EventArgs e)
{
wbopt.Render(myMediaElement, null);
wbopt.Invalidate();
}
扩展
WriteableBitmap转Jpg
WriteableBitmap转PNG
http://blogs.msdn.com/jstegman/archive/2008/04/21/dynamic-image-generation-in-silverlight.aspx
下载