Flex拓扑图设计-有趣的鹰眼

Adobe Flash Builder 4 简体中文正式版 Windows版点击下载:http://g.csdn.net/5134151

Adobe Flash Builder 4 简体中文正式版 Mac版点击下载 ：http://g.csdn.net/5134152

Adobe 在线课堂：http://adobev.csdn.net/zx/index.html

Adobe平台技术峰会课程视频：http://adobev.csdn.net/

 

    开发鹰眼是整个topo图开发中最为纠结的事情，我也是经过一段很艰苦的日子才可以完善这个鹰眼的功能。

    鹰眼主要功能有：

    1、看到整个视图的缩略图

    2、视图的变化立刻在鹰眼中体现

    3、鹰眼有定位功能

    4、鹰眼具备缩放功能

     请大家看我第一篇设计文章的视图

    

   左边的鹰眼是和右边视图是实时交互的，实际上来说，左边的鹰眼是定时去读左边canvas的。把这个画布的数据缩放在鹰眼。

<?xml version="1.0" encoding="utf-8"?>
<BaseSimpleCanvas xmlns="com.shine.framework.view.*"
                  xmlns:mx="http://www.adobe.com/2006/mxml"
                  borderColor="0xC4CCCC"
                  borderStyle="outset"
                  creationComplete="eagerViewCreate()"
                  verticalScrollPolicy="off"
                  horizontalScrollPolicy="off"
                  backgroundColor="0xffffff">
    <mx:Script>
        <!--[CDATA[
            import mx.containers.Canvas;
            import com.shine.topo.config.SingletonModel;

            import mx.core.UIComponent;
            import mx.controls.Alert;

            private var viewCanvas:Canvas;

            public function initEagleImage(value:UIComponent):void
            {
                viewCanvas=Canvas(value);
                var bitmapData:BitmapData=getBitmapData(value);
                eagleImage.source=new Bitmap(bitmapData);
                bitmapData=null;
                value=null;

                SingletonModel.getInstance().eagleViewCanvas.reSize.enabled=true;
            }

            public function eagerViewCreate():void
            {
                SingletonModel.getInstance().eagleViewWidth=this.width;
                SingletonModel.getInstance().eagleViewCanvas=this;

                //var canvas:Canvas=SingletonModel.getInstance().viewCanvas;
                //viewSnopCanvas.width=
            }

            private function getBitmapData(target:UIComponent):BitmapData
            {
                var bd:BitmapData=new BitmapData(target.width, target.height);
                var m:Matrix=new Matrix();
                bd.draw(target, m);
                m=null;
                target=null;
                return bd;
            }

            public function effectSize():void
            {
                SingletonModel.getInstance().mapBackup.scaleMapPosition(reSize.value);

                if (SingletonModel.getInstance().dataType == "full")
                {
                    SingletonModel.getInstance().viewCanvas.fullViewCanvas.reSizeBackGroupImage(reSize.value);
                }
                else if (SingletonModel.getInstance().dataType == "domain")
                {
                    SingletonModel.getInstance().viewCanvas.domailViewCanvas.reSizeBackGroupImage(reSize.value);
                }
            }

            private function changePoint():void
            {
                var canvas:Canvas=SingletonModel.getInstance().viewCanvas;
                if (canvas != null)
                {
                    canvas.horizontalScrollPosition=viewCanvas.width * (eagleImage.mouseX / eagleImage.width) - canvas.width / 2;
                    canvas.verticalScrollPosition=viewCanvas.height * (eagleImage.mouseY / eagleImage.height) - canvas.height / 2;
                }
            }
        ]]-->
    </mx:Script>
    <mx:VBox width="100%"
             height="100%"
             verticalGap="0"
             horizontalGap="0">
        <mx:Image id="eagleImage"
                  maxWidth="{this.width}"
                  maxHeight="{this.height-30}"
                  creationComplete="{this.completeLoading()}"
                  click="{changePoint()}"/>
        <mx:HBox width="100%"
                 height="30"
                 verticalGap="0"
                 horizontalGap="0"
                 backgroundColor="0xF3F3F3">
            <mx:HSlider id="reSize"
                        value="1"
                        minimum="0.6"
                        maximum="1.5"
                        liveDragging="true"
                        change="{effectSize()}"
                        width="100%"
                        height="100%"
                        enabled="false"/>
            <mx:Label text="{String(Number(String(reSize.value).substring(0,4))*100)+'%'}"/>
        </mx:HBox>
    </mx:VBox>
    <!--<mx:Canvas id="viewSnopCanvas"
         width="10"
         height="10"
         x="0"
         y="0"
         borderColor="0x316AC5"
         borderStyle="outset"/>-->
</BaseSimpleCanvas>

<?xml version="1.0" encoding="utf-8"?> <BaseSimpleCanvas xmlns="com.shine.framework.view.*" xmlns:mx="http://www.adobe.com/2006/mxml" borderColor="0xC4CCCC" borderStyle="outset" creationComplete="eagerViewCreate()" verticalScrollPolicy="off" horizontalScrollPolicy="off" backgroundColor="0xffffff"> <mx:Script> <!--[CDATA[ import mx.containers.Canvas; import com.shine.topo.config.SingletonModel; import mx.core.UIComponent; import mx.controls.Alert; private var viewCanvas:Canvas; public function initEagleImage(value:UIComponent):void { viewCanvas=Canvas(value); var bitmapData:BitmapData=getBitmapData(value); eagleImage.source=new Bitmap(bitmapData); bitmapData=null; value=null; SingletonModel.getInstance().eagleViewCanvas.reSize.enabled=true; } public function eagerViewCreate():void { SingletonModel.getInstance().eagleViewWidth=this.width; SingletonModel.getInstance().eagleViewCanvas=this; //var canvas:Canvas=SingletonModel.getInstance().viewCanvas; //viewSnopCanvas.width= } private function getBitmapData(target:UIComponent):BitmapData { var bd:BitmapData=new BitmapData(target.width, target.height); var m:Matrix=new Matrix(); bd.draw(target, m); m=null; target=null; return bd; } public function effectSize():void { SingletonModel.getInstance().mapBackup.scaleMapPosition(reSize.value); if (SingletonModel.getInstance().dataType == "full") { SingletonModel.getInstance().viewCanvas.fullViewCanvas.reSizeBackGroupImage(reSize.value); } else if (SingletonModel.getInstance().dataType == "domain") { SingletonModel.getInstance().viewCanvas.domailViewCanvas.reSizeBackGroupImage(reSize.value); } } private function changePoint():void { var canvas:Canvas=SingletonModel.getInstance().viewCanvas; if (canvas != null) { canvas.horizontalScrollPosition=viewCanvas.width * (eagleImage.mouseX / eagleImage.width) - canvas.width / 2; canvas.verticalScrollPosition=viewCanvas.height * (eagleImage.mouseY / eagleImage.height) - canvas.height / 2; } } ]]--> </mx:Script> <mx:VBox width="100%" height="100%" verticalGap="0" horizontalGap="0"> <mx:Image id="eagleImage" maxWidth="{this.width}" maxHeight="{this.height-30}" creationComplete="{this.completeLoading()}" click="{changePoint()}"/> <mx:HBox width="100%" height="30" verticalGap="0" horizontalGap="0" backgroundColor="0xF3F3F3"> <mx:HSlider id="reSize" value="1" minimum="0.6" maximum="1.5" liveDragging="true" change="{effectSize()}" width="100%" height="100%" enabled="false"/> <mx:Label text="{String(Number(String(reSize.value).substring(0,4))*100)+'%'}"/> </mx:HBox> </mx:VBox> <!--<mx:Canvas id="viewSnopCanvas" width="10" height="10" x="0" y="0" borderColor="0x316AC5" borderStyle="outset"/>--> </BaseSimpleCanvas>

这个是鹰眼画布的代码，首先声明这个代码是无法独立运行的.

public function initEagleImage(value:UIComponent):void 这个方法是把视图画布放在鹰眼中显示

public function effectSize():void 是控制视图缩放，包括视图底图的缩放

private function changePoint():void 是鹰眼中控制定位的功能

   鹰眼开发不会很难，最麻烦是鹰眼的内存控制。自从视图加入鹰眼后，我的flex拓扑图在运行1个小时候，通常都占用内存过大。为了解决这个问题，我做很多方法的尝试，特别控制内存回收问题。

private function getBitmapData(target:UIComponent):BitmapData
            {
                var bd:BitmapData=new BitmapData(target.width, target.height);
                var m:Matrix=new Matrix();
                bd.draw(target, m);
                m=null;
                target=null;
                return bd;
            }

private function getBitmapData(target:UIComponent):BitmapData { var bd:BitmapData=new BitmapData(target.width, target.height); var m:Matrix=new Matrix(); bd.draw(target, m); m=null; target=null; return bd; }

  这么写也为了有效控制flex的内存。如果大家有兴趣我可以把flex内存控制一些办法和大家交流一下。