2009年9月2日 星期三

Flex將DisplayObject轉成BimtMap使用

§DisplayObject 轉換成Bitmap
最近公司專案有一需求,此需求是當顯示元件被mouseDown的時候要將該元件複製一份出來給予拖曳管理使用,而該複製出來的東西需求格式是BimtMap,因此將Clone顯示元件成BitMap寫一個簡單範例,以便日後忘記時可提醒自己可以這樣使用,程式碼如下...

<?xml version="1.0" encoding="utf-8"?>
<mx:Application applicationComplete= "init( )" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.core.UIComponent;
import mx.core.Container;
import mx.controls.Text;
import mx.containers.Canvas;
protected function init( ):void
{
    initTarget( );
    initText( );
    compostUI( );
    disposeUI( );
   //將複製出來的結果加到desBox
    this.callLater(colneToDesBox);
   /*
     callLater會讓colneToDesBox於下個影格執行。因為canvas在下個影格前還未改變width,heigth
     所以如果不用callLater,會抓不到w and h。
    */
}
//initTrage
protected function initTarget( ):void
{
   target = new Canvas();
   target.width = 200;
   target.height = 100;
   target.setStyle("backgroundColor" ,0xafe2ac);
}
//initText
protected function initText():void
{
   text = new Text();
   text.text = "Bitmap Target";
}
//composeUI
protected function compostUI():void
{
   target.addChild(text);
}
//disposeUI
protected function disposeUI():void
{
   sourceBox.addChild(target);
}
//colneUI
private function colneUI(colneTarget:DisplayObject,width:Number , height:Number ,
transparent:Boolean = true , fillColor:uint=0x000000):UIComponent
{
   var _bitMapData:BitmapData = new BitmapData(width , height , transparent ,fillColor);
         _bitMapData.draw(colneTarget);
   var _bitMap:Bitmap = new Bitmap(_bitMapData);
   var _uic:UIComponent = new UIComponent();
         _uic.addChild(_bitMap);
   return _uic;
}
//colne
private function colneToDesBox( ):void
{
    desBox.addChild(colneUI(target , target.width ,target.height));
}
/**-------------*
* property
*--------------*/
//trage
private var _target : Container;
public function get target():Container
{
    return _target;
}
public function set target(objUI:Container):void
{
    if(objUI == _target)return;
    _target = objUI;
}
//text
private var _text:Label;
public function get text( ) : Label
{
    return _text;
}
public function set text(objUI:Label):void
{
    if(objUI == _text)return;
    _text = objUI;
}


]]>
</mx:Script>
<mx:VBox>
<mx:Canvas id="sourceBox"/>
<mx:Canvas id="desBox"/>
</mx:VBox>
</mx:Application>


 顯示結果



沒有留言:

張貼留言