2008-07-23
得到控件的BitmapData位图信息,来做效果
关键字: flex 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>
- by ioryioryzhan
- 浏览 (258)
- 评论 (1)
- 相关推荐
评论