MiniMap组件注释

MiniMap组件注释

package components
{
    /*
        原作者：AdrewRice
        注释：Albert http://blog.csdn.net/zinking3
     * */
    import mx.containers.Panel;
    import mx.controls.Image;
    import flash.events.TimerEvent;
    import flash.display.BitmapData;
    import flash.geom.Matrix;
    import flash.geom.Rectangle;
    import flash.utils.Timer;
    import mx.core.UIComponent;
    import flash.display.Bitmap;
    import mx.core.Container;
    import flash.display.DisplayObject;
    import mx.containers.Canvas;
    import mx.effects.easing.Back;

    public class MiniMap extends Panel
    {
        public static const WIDTH : Number = 200;
        public static const HEIGHT : Number = 400;
       
        public var targetUIComponent : UIComponent;//作用的显示组件
       
        private var tx : Number = 0;
        private var ty : Number = 0;
        private var ts : Number = 0;//缩放参数，因为是MINIMAP而不是和原来一样大
       
        private var img : Image;//快照
        private var bd : BitmapData;//对UI组件生成的快照数据
        private var m : Matrix;//用来缩放的矩阵
        private var timer : Timer;//定时器
       
       
        public function MiniMap()
        {
            super();
            title = "Mini Map";
            horizontalScrollPolicy = "off";
            verticalScrollPolicy = "off"//设置基类的一些属性
           
            img = new Image();
            img.percentWidth = 100;//PERCENT WIDTH使此组件能够适应伸缩
            img.visible = true;
            this.addChild( img );//将位图添加到此组件的显示列表
           
            bd = new BitmapData( WIDTH, HEIGHT );
            m = new Matrix();
           
            timer = new Timer( 500 );
            timer.addEventListener( TimerEvent.TIMER, onTimerEvent );
           
            timer.start();//初始化成员
        }
       
        private function onTimerEvent( event : TimerEvent ) : void
        {
            try
            {
               
                if ( targetUIComponent != null )
                {
                    var minx:int;
                    var maxx:int;
                    var miny:int;
                    var maxy:int;
                    var w:int = 0;
                    var h:int = 0;//临时变量用来获得一些数据
           
                    if ( targetUIComponent.numChildren > 0 )//当作用的UI组件有子组件的时候
                    {
                       
                        for ( var i : int = 0; i < targetUIComponent.numChildren; i ++ )//遍历这些子组件
                        {
                            var child : DisplayObject = targetUIComponent.getChildAt( i );//获得第I个位置的子组件
                            if ( i == 0 )
                            {
                                minx = child.x;//最小的X值
                                maxx = child.x;//最大的X值
                                miny = child.y + child.width;
                                maxy = child.y + child.height;//初始时候设置临时变量
                            }
                            else
                            {
                                minx = Math.min( minx, child.x );
                                miny = Math.min( miny, child.y );
                                maxx = Math.max( maxx, child.x + child.width );
                                maxy = Math.max( maxy, child.y + child.height );
                                //遍历完成之后，获得一个矩形区域，该区域涵盖了所有的显示子组件，为生成位图做准备
                            }
                           
                        }
                       
                        w = maxx - minx;//获得该矩形区域的宽
                        h = maxy - miny;//获得该矩形区域的高
                       
                        tx = WIDTH / w ;//缩放X向尺度
                        ty = HEIGHT / h ;//缩放Y向尺度
                    }
                    else
                    {
                        tx = WIDTH / (targetUIComponent.width / targetUIComponent.scaleX) ;
                        ty = HEIGHT / (targetUIComponent.height / targetUIComponent.scaleY) ;
                        //如果UI对象的子组件为空，那么设置其缩放系数
                    }
                   
                    ts = Math.min( tx, ty );//选取缩放系数，X和Y的最小值
                   
                    bd.fillRect( new Rectangle(0,0,WIDTH,HEIGHT), 0xFFFFFF );
                    m.identity();//初始化变换举证
                    m.scale( ts, ts );//设置缩放系数
                    m.translate( -minx*ts, -miny*ts );
                    bd.draw( targetUIComponent, m );//关键：获得缩放后的快照到BD
                    img.source = new Bitmap( bd );//设置图像
               
                }
            }
            catch( e:Error )
            {
               
            }
        }
       
    }
}

使用方法：
<components:MiniMap
        targetUIComponent="{ mapper.renderer }"
        creationCompleteEffect="Fade"
        right="10" top="25" bottom="25" width="232"/>