Flex畫面快照截圖及顯示

 

關鍵詞：Flex，Bitmap，BitmapData，畫面快照，

 

在軟體開發過程中經常會有對畫面進行快照的需求，例如把畫面當前顯示的狀態捕捉下來儲存成圖片。接下來討論如何在flex中對畫面進行，畫面完成後怎樣再顯示到畫面上。

 

一、對指定畫面進行快照、。

 

在Flex SDK中flash.display包下面有兩個類Bitmap和BitmapData。在flex中可以通過兩個類對圖片進行操作。BitmapData類中有一個draw方法這個方法的第一個參數是進行畫面的來源物件，這個對象必須實現IBitmapDrawable介面。而DisplayObject類實現了這個介面，DisplayObject是所有可見控制項的先祖類，也就意味著所有在flex可以看到的畫面、控制項都可以用draw方法來進行快照。

具體的代碼如下：

 private var bmpImage:Bitmap = null;</p><p>private function onClick():void</p><p>{</p><p> //建立一個大小和對象一致的圖片</p><p> var bmpData:BitmapData = new BitmapData(source.width,source.height);</p><p> //進行快照，其中第二個參數Matrix是對圖片進行變換用的，例如旋轉縮放等。</p><p> //如果圖片不需要變換可以用new Matrix()或者null都可以。</p><p> bmpData.draw(source,new Matrix());</p><p> //建立Bitmap對象</p><p> bmpImage = new Bitmap(bmpData);</p><p>}<br />

 

 

BitmapData對象不能直接顯示到畫面上，所以需要把BitmapData對象封裝到Bitmap中，按下按鈕後，Panel的快照就產生了，儲存到了Bitmap對象中。

 

片：

http://p.blog.csdn.net/images/p_blog_csdn_net/To9m/EntryImages/20091026/1.PNG

 

二、將捕獲到的截屏圖片顯示到畫面上。

 

接下來就是把Bitmap對象顯示到畫面上，這裡需要藉助UIComponent類。由於直接把Bitmap對象加到Canvas等容器中，運行時會出錯，因為容器中添加的子物件必須是UIComponent的子類，而Bitmap不是，所以需要UIComponent類來封裝一層。然後把UIComponent對象加入到Canvas容器中，這樣圖片就顯示出來了。

代碼如下所示：

 

 private function onShow():void</p><p>{</p><p> //建立一個UIComponent對象</p><p> var uic:UIComponent = new UIComponent();</p><p> //將Bitmap對象加入到UIComponent對象中</p><p> uic.addChild(bmpImage);</p><p> //將UIComponent對象加入Canvas中</p><p> showImage.addChild(uic);</p><p>}<br />

 

先按下按鈕進行操作，然後按下顯示按鈕把顯示到Canvas中。效果。

http://p.blog.csdn.net/images/p_blog_csdn_net/To9m/EntryImages/20091026/2.PNG

 

 

三、以下是這個程式的完整代碼：

 

<?xml version="1.0" encoding="utf-8"?></p><p><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" </p><p> fontFamily="宋體" fontSize="12" width="831" height="448"></p><p> <mx:Panel id="source" x="26" y="77" width="320" height="263" layout="absolute"></p><p> <mx:TextInput x="91" y="51"/></p><p> <mx:TextInput x="91" y="106"/></p><p> <mx:Button x="73.5" y="158" label="取 消"/></p><p> <mx:Button x="172.5" y="158" label="確 定"/></p><p> <mx:Label x="32" y="53" text="使用者名稱："/></p><p> <mx:Label x="32" y="108" text="密 碼："/></p><p> <mx:Label x="109" y="10" text="使用者登入" fontWeight="bold"/></p><p> </mx:Panel></p><p> <mx:Canvas id="showImage" x="427" y="58" width="347" height="292"></p><p> </mx:Canvas></p><p> <mx:Label x="124" y="32" text="地區"/></p><p> <mx:Label x="562" y="32" text="顯示地區"/></p><p> <mx:Button x="147" y="394" label="" click="onClick()"/></p><p> <mx:Button x="548" y="394" label="顯示" click="onShow()"/></p><p> <mx:Script></p><p> <!--[CDATA[</p><p> import mx.core.UIComponent;</p><p> private var bmpImage:Bitmap = null;</p><p> private function onClick():void</p><p> {</p><p> //建立一個大小和對象一致的圖片</p><p> var bmpData:BitmapData = new BitmapData(source.width,source.height);</p><p> //進行快照，其中第二個參數Matrix是對圖片進行變換用的，例如旋轉縮放等。</p><p> //如果圖片不需要變換可以用new Matrix()或者null都可以。</p><p> bmpData.draw(source,new Matrix());</p><p> //建立Bitmap對象</p><p> bmpImage = new Bitmap(bmpData);</p><p> }</p><p> private function onShow():void</p><p> {</p><p> //建立一個UIComponent對象</p><p> var uic:UIComponent = new UIComponent();</p><p> //將Bitmap對象加入到UIComponent對象中</p><p> uic.addChild(bmpImage);</p><p> //將UIComponent對象加入Canvas中</p><p> showImage.addChild(uic);</p><p> }</p><p> ]]--></p><p> </mx:Script></p><p></mx:Application>

 

四、總結。

雖然可以用Bitmap和BitmapData類進行和現實，但是flex不能直接讀寫檔案。圖片的儲存還需要背景程式的配合來完成。