Flex 畫(huà)面快照截圖及顯示實(shí)現(xiàn)代碼

更新時(shí)間：2009年10月26日 22:31:51 作者：

在軟件開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)有對(duì)畫(huà)面進(jìn)行快照截圖的需求，例如把畫(huà)面當(dāng)前顯示的狀態(tài)捕捉下來(lái)保存成圖片。接下來(lái)討論如何在flex中對(duì)畫(huà)面進(jìn)行截圖，畫(huà)面截圖完成后怎樣再顯示到畫(huà)面上。

一、對(duì)指定畫(huà)面進(jìn)行快照、截圖。
在Flex SDK中flash.display包下面有兩個(gè)類Bitmap和BitmapData。在flex中可以通過(guò)兩個(gè)類對(duì)圖片進(jìn)行操作。BitmapData類中有一個(gè)draw方法這個(gè)方法的第一個(gè)參數(shù)是進(jìn)行畫(huà)面截圖的源對(duì)象，這個(gè)對(duì)象必須實(shí)現(xiàn)IBitmapDrawable接口。而DisplayObject類實(shí)現(xiàn)了這個(gè)接口，DisplayObject是所有可見(jiàn)控件的先祖類，也就意味著所有在flex可以看到的畫(huà)面、控件都可以用draw方法來(lái)進(jìn)行快照截圖。
具體的代碼如下：

復(fù)制代碼代碼如下:

 
private var bmpImage:Bitmap = null; 
private function onClick():void 
{ 
//創(chuàng)建一個(gè)大小和截圖對(duì)象一致的圖片 
var bmpData:BitmapData = new BitmapData(source.width,source.height); 
//進(jìn)行快照截圖，其中第二個(gè)參數(shù)Matrix是對(duì)圖片進(jìn)行變換用的，例如旋轉(zhuǎn)縮放等。 
//如果圖片不需要變換可以用new Matrix()或者null都可以。 
bmpData.draw(source,new Matrix()); 
//創(chuàng)建Bitmap對(duì)象 
bmpImage = new Bitmap(bmpData); 
} 

BitmapData對(duì)象不能直接顯示到畫(huà)面上，所以需要把BitmapData對(duì)象封裝到Bitmap中，按下截圖按鈕后，Panel的快照就生成了，保存到了Bitmap對(duì)象中。
效果圖片：
效果圖A

二、將捕獲到的截屏圖片顯示到畫(huà)面上。
接下來(lái)就是把Bitmap對(duì)象顯示到畫(huà)面上，這里需要借助UIComponent類。由于直接把Bitmap對(duì)象加到Canvas等容器中，運(yùn)行時(shí)會(huì)出錯(cuò)，因?yàn)槿萜髦刑砑拥淖訉?duì)象必須是UIComponent的子類，而B(niǎo)itmap不是，所以需要UIComponent類來(lái)封裝一層。然后把UIComponent對(duì)象加入到Canvas容器中，這樣圖片就顯示出來(lái)了。
代碼如下所示：

復(fù)制代碼代碼如下:

 
private function onShow():void 
{ 
//創(chuàng)建一個(gè)UIComponent對(duì)象 
var uic:UIComponent = new UIComponent(); 
//將Bitmap對(duì)象加入到UIComponent對(duì)象中 
uic.addChild(bmpImage); 
//將UIComponent對(duì)象加入Canvas中 
showImage.addChild(uic); 
} 

先按下截圖按鈕進(jìn)行截圖操作，然后按下顯示按鈕把截圖顯示到Canvas中。效果如圖所示。
效果圖B

三、以下是這個(gè)程序的完整代碼：

復(fù)制代碼代碼如下:

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