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

??? 开发鹰眼是整个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>

?

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

?

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,m); m=null; target=null; return bd; }

?

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