[Silverlight] 用WriteableBitmap對物件做Snapshot(快照)

2010/08/19

以前在玩Silverlight 2.0 的時候,那時候公司對我有一個需求…
就是對使用者的操作結果…進行快照..如果那時候是用Flex 就覺得還好…
但是用Silverlight 2.0 真的是花了我一點時間..

那時候作法網路上都是說把XMAL 傳回Server讓Server去做..
那時候我就用很糟糕的做法,就是直接Clone物件,讓他看起來很像是快照..
事實上都是實體物件….這是不好的作法,哥哥情非得已…


現在到了4.0這需求重新被提起,想不到卻是輕輕鬆鬆簡單幾行…(翻桌..

這案例是有三張圖可以可以隨意地拖動,之後我下面有放一張名為imgSync的Image物件..
即時的去sync你的拖曳狀態… 本文重點在如何做出Snapshot如果您對拖曳的效果有問題..
請參考此篇(Blend 做拖曳超簡單)..

畫面物件配置..

cvsSnapShop 是一個Canvas物件..裡面包了三張圖..
imgSync 是一個不被cvsSnapShop 給包住得物件,不然進行快照會被拍到…

XMAL Code 如下:

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
x:Class="DragSample.MainPage"
Width="640" Height="480">
 
<Grid x:Name="LayoutRoot" Background="Black"  Width="640" Height="480"   >
<Canvas x:Name="cvsSnapShop" MouseMove="SnapShop_MouseMove" >
<Image HorizontalAlignment="Left" Margin="102,48,0,202" Width="150"  Source="avr.jpg" >
<i:Interaction.Behaviors>
<ei:MouseDragElementBehavior/>
</i:Interaction.Behaviors>
</Image>
 
<Image HorizontalAlignment="Left"  Width="150"  Source="van.jpg" Canvas.Left="274" Canvas.Top="140">
<i:Interaction.Behaviors>
<ei:MouseDragElementBehavior/>
</i:Interaction.Behaviors>
</Image>
 
<Image HorizontalAlignment="Right" Margin="0,0,0,0" Width="150"  Source="avr.png" Canvas.Left="60" Canvas.Top="305">
<i:Interaction.Behaviors>
<ei:MouseDragElementBehavior/>
</i:Interaction.Behaviors>
</Image>
</Canvas>
<Image Height="120" HorizontalAlignment="Right" Margin="0,0,0,0" Name="imgSync" Stretch="Fill" VerticalAlignment="Bottom" Width="160" />
</Grid>
</UserControl>

接下來…我在對 cvsSnapShop  的MouseMove 寫下事件…
private void SnapShop_MouseMove(object sender, MouseEventArgs e)
{
//可被寫入的Bitmap 
//在Ctor 時傳入 cvsSnapShop物件
WriteableBitmap bitmap = new WriteableBitmap(cvsSnapShop, null);
//顯示快照的結果
this.imgSync.Source = bitmap;
}

沒錯就是兩行就可以做到這種效果…
真是頗方便及實用的功能..

簡單就可以寫出感覺很酷的東西…
要時候那時候就有這東西該多好…(淚奔~~


範例:(請拖曳下方三張圖)
Get Microsoft Silverlight
讚一下啦:


範例下載:


0 意見:

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.