得到控件的BitmapData位图信息,来做效果

尝试得到控件的快照，就像位图信息，然后用来做效果。查查文档，真的可以。BitmapData 有一个draw()方法便可以做到，它可以像照相机一样对控件进行拍照，得到控件的位图信息。

draw() 方法的声明：

 

public function draw(source:IBitmapDrawable, 
				matrix:Matrix = null, 
				colorTransform:ColorTransform = null, 
				blendMode:String = null, 
				clipRect:Rectangle = null, 
				smoothing:Boolean = false):void

 

关注前面两个参数，source 参数是目标控件，matrix 参数决定怎样来拍照。matrix 是一个矩阵，不同的设置，得到的位图信息就不相同。见下图：

还没玩到那么花哨，现在只用到它的tx,ty。

图中是一个3x3的矩阵，其实只能用前两行的6个。

 

得到位图信息后，便可以为所欲为了，哈。

用这个方法做了个效果，与大家分享。

 

 

点击下方的按钮便可以将Panel拆来拆去了。

 

代码不多，直接贴出来了，同时思考能否用这种方法做出百叶窗的效果：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"
  verticalScrollPolicy="off" horizontalScrollPolicy="off" width="500" height="500">
	<mx:Script>
		<![CDATA[
			import mx.events.EffectEvent;
			import mx.effects.Move;
			import mx.effects.Parallel;
			import mx.states.AddChild;
			import mx.controls.Image;			
			private var bitmapData:BitmapData = null; 
			
			private var matrix1:Matrix = null;
			private var matrix2:Matrix = null;
			private var matrix3:Matrix = null;
			private var matrix4:Matrix = null;
			
			internal var image1:Image=null,image2:Image=null,image3:Image=null,image4:Image=null;
			internal var isPanelShow:Boolean = true;
			
			internal function init():void{		
				
				matrix1 = new Matrix(1,0,0,1,0,0);
				matrix2 = new Matrix(1,0,0,1,-panel.width/2,0);
				matrix3 = new Matrix(1,0,0,1,0,-panel.height/2);
				matrix4 = new Matrix(1,0,0,1,-panel.width/2,-panel.height/2);
				
				image1 = new Image();
				image2 = new Image();
				image3 = new Image();
				image4 = new Image();
						
				addChild( initImageFromMatrix( image1 ,matrix1 ));		
				addChild( initImageFromMatrix( image2 ,matrix2 ));
				addChild( initImageFromMatrix( image3 ,matrix3 ));
				addChild( initImageFromMatrix( image4 ,matrix4 ));		
				
				image1.width = image2.width = image3.width = image4.width = panel.width/2;
				image1.height = image2.height = image3.height = image4.height = panel.height/2;				
				image1.visible = image2.visible = image3.visible = image4.visible = false;
				image1.scaleContent = image2.scaleContent = image3.scaleContent = image4.scaleContent = false;
				setChildrenTop([image1,image2,image3,image4]);
				
				panel.visible = true;
				btnShow.addEventListener(MouseEvent.CLICK,onClickShowOrHide);				
				
			}
		
			internal function initImageFromMatrix(image:Image, matrix:Matrix):Image{
				if(image == null) return null;
				image.load( new Bitmap( getBitmapDataFromMatrix( matrix ) ) );
				trace(image);
				return image;
			}			
			internal function setChildrenTop( array:Array ):void{
				if(!array)return;
				var len:int = array.length;
				if(len == 0 ) return;
				var displayObject:DisplayObject = null;
				for(var i:int = 0; i <len ; ++i){
					displayObject = array[i] as DisplayObject;
					setChildIndex(displayObject ,numChildren-1 );
				}
			}
			internal function getBitmapDataFromMatrix(matrix:Matrix):BitmapData{
				var bitmapData:BitmapData = new BitmapData(panel.width/2,panel.height/2);
				bitmapData.draw(panel,matrix);
				return bitmapData;
			}
			internal function onClickShowOrHide( e:MouseEvent ):void{	
				if(isPanelShow  == false){
					createEffectsShow();					
				}else{
					createEffectsHide();
				}				
				btnShow.enabled = false;					
			}
			internal function createEffectsHide():void{
				getCurrentBitmapData();
				image1.visible = image2.visible =image3.visible=image4.visible= true;
				panel.visible = false;
				var parallel:Parallel = new Parallel();
				
				var move1:Move = new Move(image1);			
				move1.xTo = 0 - panel.width/2;
				move1.xFrom   = panel.x;
				move1.yTo = 0 - panel.height/2;
				move1.yFrom   = panel.y;	
				
				var move2:Move = new Move(image2);			
				move2.xTo = width;
				move2.xFrom   = panel.x + panel.width/2;
				move2.yTo = 0 - panel.height/2;
				move2.yFrom   = panel.y;		
				
				var move3:Move = new Move(image3);			
				move3.xTo = 0 - panel.width/2;
				move3.xFrom   = panel.x;
				move3.yTo = height;
				move3.yFrom   = panel.y + panel.height/2;		
				
				var move4:Move = new Move(image4);			
				move4.xTo = width;
				move4.xFrom   = panel.x + panel.width/2;
				move4.yTo = height;
				move4.yFrom   = panel.y + panel.height/2;	
				
				parallel.children = [move1,move2,move3,move4];	
				parallel.addEventListener(EffectEvent.EFFECT_END, onHideEffectEnd);
				parallel.duration = 1000;
				parallel.play();
			}
			internal function getCurrentBitmapData():void{
				initImageFromMatrix( image1 ,matrix1 );
				initImageFromMatrix( image2 ,matrix2 );
				initImageFromMatrix( image3 ,matrix3 );
				initImageFromMatrix( image4 ,matrix4 );
			}
			internal function createEffectsShow():void{
				getCurrentBitmapData();
				image1.visible = image2.visible =image3.visible=image4.visible= true;
				panel.visible = false;
				var parallel:Parallel = new Parallel();
				
				var move1:Move = new Move(image1);			
				move1.xFrom = 0 - panel.width/2;
				move1.xTo   = panel.x;
				move1.yFrom = 0 - panel.height/2;
				move1.yTo   = panel.y;	
				
				var move2:Move = new Move(image2);			
				move2.xFrom = width;
				move2.xTo   = panel.x + panel.width/2;
				move2.yFrom = 0 - panel.height/2;
				move2.yTo   = panel.y;		
				
				var move3:Move = new Move(image3);			
				move3.xFrom = 0 - panel.width/2;
				move3.xTo   = panel.x;
				move3.yFrom = height;
				move3.yTo   = panel.y + panel.height/2;		
				
				var move4:Move = new Move(image4);			
				move4.xFrom = width;
				move4.xTo   = panel.x + panel.width/2;
				move4.yFrom = height;
				move4.yTo   = panel.y + panel.height/2;	
				
				parallel.children = [move1,move2,move3,move4];	
				parallel.addEventListener(EffectEvent.EFFECT_END, onShowEffectEnd);
				parallel.duration = 1000;
				parallel.play();
			}
			internal function onShowEffectEnd(e:EffectEvent):void{
				image1.visible = image2.visible = image3.visible= image4.visible =  false;
				panel.visible  = true;
				btnShow.enabled = true;				
				btnShow.label = "点击隐藏Panel";
				isPanelShow = true;
			}
			internal function onHideEffectEnd(e:EffectEvent):void{
				image1.visible = image2.visible = image3.visible= image4.visible =  false;
				panel.visible  = false;
				btnShow.enabled = true;
				isPanelShow = false;
				btnShow.label = "点击显示Panel";
			}
		]]>
	</mx:Script>
	<mx:Panel id="panel"  x="125" y="138" width="250" height="200" layout="absolute">
		<mx:Button x="26" y="119" label="加入GCD" height="31" width="83"/>
		<mx:Button x="140" y="119" label="取  消" height="31" width="86"/>
		<mx:TextInput x="69" y="10"/>
		<mx:TextInput x="69" y="46"/>
		<mx:Label x="13" y="14" text="姓什么："/>
		<mx:Label x="14" y="49" text="叫什么:"/>
		<mx:Label x="13" y="91" text="男的女的："/>
		<mx:RadioButton x="101" y="89" label="男"/>
		<mx:RadioButton x="162" y="89" label="女"/>
	</mx:Panel>
	<mx:Button id="btnShow" x="173" y="368" label="点击隐藏Panel" height="37" width="154"/>
	<mx:Style>
Application {
   backgroundColor: #a7a75e;
   backgroundGradientColors: #999966, #585821;
   backgroundGradientAlphas: 0.52, 0.46;
   themeColor: #9d9d24;
   color: #000000;
   fontSize:12;
}
Panel {
   borderColor: #893654;
   borderAlpha: 0.92;
   borderThicknessLeft: 6;
   borderThicknessTop: 1;
   borderThicknessBottom: 9;
   borderThicknessRight: 5;
   roundedBottomCorners: false;
   cornerRadius: 0;
   headerHeight: 26;
   backgroundAlpha: 0.68;
   highlightAlphas: 0.58, 0.16;
   headerColors: #744848, #5a1f1f;
   footerColors: #6c3131, #682b2b;
   backgroundColor: #4f2929;
   shadowDistance: 6;
   dropShadowColor: #4b3737;
}
Button {
   cornerRadius: 0;
   textIndent: 0;
   fillAlphas: 0.39, 0.81, 0.42, 0.41;
   fillColors: #181a47, #120e39, #1d154f, #110f3e;
   color: #1f070c;
   textRollOverColor: #3e0931;
   textSelectedColor: #470e36;
   borderColor: #080808;
   themeColor: #161352;
}
	</mx:Style>
</mx:Application>

 

评论

1 楼 NewTamato 2008-09-18  

楼主能否吧代码写上注释呢？或者把这个程序的原理再将清楚一些！