關(guān)鍵詞：Flex，Bitmap，BitmapData，畫(huà)面快照，截圖

在軟件開(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)行快照截圖。

具體的代碼如下：

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ì)象中。

效果圖片：

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

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

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

代碼如下所示：

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中。效果如圖所示。

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

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

<?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>

四、總結(jié)。

雖然可以用Bitmap和BitmapData類進(jìn)行截圖和現(xiàn)實(shí)，但是flex不能直接讀寫(xiě)文件。圖片的保存還需要后臺(tái)程序的配合來(lái)完成。