flex拓扑图(完整例子)

来源：互联网发布：opportunity cost算法编辑：程序博客网时间：2024/05/21 11:34

网上流传一个版本的拓扑图，基本是不可以使用的。又因为公司近来要搞一个相关的项目，就把该项目的代码下载下来做了修改可以使用。我现在改的一个简单例子给大家分享一下。

网元的代码（NeMap.as）：

package{ import flash.events.MouseEvent; import flash.ui.ContextMenu; import flash.ui.ContextMenuItem; import mx.containers.Canvas; import mx.controls.Image; import mx.controls.Label; import mx.events.MoveEvent; public class NeMap extends mx.containers.Canvas { private var nePic :String = "ASSETS/LSTP.PNG";//网元图 private var neState:String = "ASSETS/clearStatus.gif";//网元状态图 private var neName:String = "北京HSTPA"; private var lineList:Array =new Array(); private var lineCount:int = 0; private var x_Coordinates:int = 100; private var y_Coordinates:int = 100; private var nePicImage:Image = new Image(); private var neStateImage:Image = new Image(); private var neNameLable:Label = new Label(); private var oldIndex:int = 0; public function NeMap(x:int,y:int,ne:String){ this.width = 60; this.height = 60; this.x = x; this.y = y; this.neName = ne; init(); } private function init():void{ this.addEventListener(flash.events.MouseEvent.MOUSE_DOWN,dragBegin); this.addEventListener(flash.events.MouseEvent.MOUSE_UP,dragEnd); this.addEventListener(flash.events.MouseEvent.MOUSE_MOVE,dragEnd2); this.addEventListener(mx.events.MoveEvent.MOVE,dragEnd1); //this.addEventListener(mx.events.MoveEvent.MOVE,dragEnd1); //neStateImage.addEventListener(); //this.addEventListener(flash.events.MouseEvent.ROLL_OUT,dragEnd); this.addEventListener(flash.events.MouseEvent.MOUSE_OVER,selectedNe); this.addEventListener(flash.events.MouseEvent.MOUSE_OUT,noSelectedNe); this.addEventListener(flash.events.MouseEvent.CLICK ,doubleNe); initNePic(); initNeState(); initLabel(); this.addChild(nePicImage); this.addChild(neStateImage); this.addChild(neNameLable); this.verticalScrollPolicy = "off"; this.horizontalScrollPolicy = "off"; this.contextMenu = initPopMenu(); } private function dragBegin(event:MouseEvent):void{ //Alert.show(String(this.parent.numChildren)); oldIndex = this.parent.getChildIndex(this); this.parent.setChildIndex(this,this.parent.numChildren-1); this.startDrag(false); } private function dragEnd(event:MouseEvent):void{ this.parent.setChildIndex(this,oldIndex); this.stopDrag(); /*var x:int = getCenterX(); var y:int = getCenterY(); for(var i:int=0;i<lineList.length;i++){ var nelineFlag:NeLineFlag = lineList[i]; var line:ExpanLine = nelineFlag.getLine(); var isHeaderLine:Boolean = nelineFlag.getFlag(); line.removeLine(); if(isHeaderLine){ line.setBeginX(x); line.setBeginY(y); line.resetBeginLine(x,y); }else{ line.setEndX(x); line.setEndY(y); line.resetEndLine(x,y); } }*/ } private function dragEnd1(event:MoveEvent):void{ refreshLine(); } private function dragEnd2(event:MouseEvent):void{ refreshLine(); } private function refreshLine():void{ var x:int = getCenterX(); var y:int = getCenterY(); for(var i:int=0;i<lineList.length;i++){ var nelineFlag:NeLineFlag = lineList[i]; var line:ExpanLine = nelineFlag.getLine(); var isHeaderLine:Boolean = nelineFlag.getFlag(); line.removeLine(); if(isHeaderLine){ line.setBeginX(x); line.setBeginY(y); line.resetBeginLine(x,y); }else{ line.setEndX(x); line.setEndY(y); line.resetEndLine(x,y); } } } //增加边框 private function selectedNe(event:MouseEvent):void{ //this.setStyle("borderColor","#FF0000"); //this.setStyle("borderStyle","outset"); } private function noSelectedNe(event:MouseEvent):void{ this.setStyle("borderColor",""); this.setStyle("borderStyle",""); } private function initNePic():void{ nePicImage.source = nePic; nePicImage.x = 10; nePicImage.y = 0; nePicImage.width = 50; nePicImage.height = 46; } private function initNeState():void{ neStateImage.source = neState; neStateImage.x = 0; neStateImage.y = 0; neStateImage.width = 10; neStateImage.height = 10; } private function initLabel():void{ neNameLable.text = neName; neNameLable.x = 0; neNameLable.y = 30; neNameLable.width = 100; neNameLable.height = 20; } private function initPopMenu():ContextMenu{ var contextMenu : ContextMenu = new ContextMenu(); contextMenu.hideBuiltInItems(); var contextMenuItem1 : ContextMenuItem = new ContextMenuItem("网元信息"); var contextMenuItem2 : ContextMenuItem = new ContextMenuItem("告警信息"); var contextMenuItem3 : ContextMenuItem = new ContextMenuItem("历史告警"); contextMenu.customItems.push(contextMenuItem1); contextMenu.customItems.push(contextMenuItem2); contextMenu.customItems.push(contextMenuItem3); return contextMenu; } public function getCenterX():int{ return this.x+10; } public function getCenterY():int{ return this.y+10; } public function setLine(line1:ExpanLine,flag:Boolean):void{ var neLineFlag:NeLineFlag = new NeLineFlag(line1,flag); lineList[lineCount] = neLineFlag; lineCount++; //this.line = line1; //this.isHeaderLine = flag; } public function setNeState(state:String):void{ neStateImage.source = state; } public function doubleNe(event:MouseEvent):void{ // } } }

线路代码（ExpanLine.as）：

package { import flash.display.Shape; import mx.core.UIComponent; import flash.display.Sprite; import flash.ui.ContextMenu; import flash.ui.ContextMenuItem; import mx.containers.Canvas; import mx.containers.Panel; import flash.events.MouseEvent; import mx.controls.Alert; import mx.controls.Label; import mx.managers.PopUpManager; import flash.display.DisplayObject; import mx.managers.ToolTipManager; import mx.controls.ToolTip; import flash.events.Event; import flash.events.TextEvent; import flash.events.TimerEvent; import flash.events.SyncEvent; import mx.events.ToolTipEvent; import mx.core.IToolTip; import mx.controls.Button; import flash.net.URLRequest; import flash.net.navigateToURL; public class ExpanLine extends mx.controls.Button { private var line_x1:int;//连线一段 private var line_y1:int; private var line_x2:int;//连线另一段 private var line_y2:int; //private var lines :Sprite = new Sprite(); private var lines:Label = new Label(); //private var myPanel:ShowFlow = null; private var parentWindow:NetPicture; public var myTip:IToolTip; public function ExpanLine(x1:int,y1:int,x2:int,y2:int,parent:NetPicture){ line_x1 = x1; line_y1 = y1; line_x2 = x2; line_y2 = y2; parentWindow = parent; lines.graphics.lineStyle(2,0x0099ff,1); lines.graphics.moveTo(line_x1,line_y1); lines.graphics.lineTo(line_x2,line_y2); lines.toolTip = "111111111"; //lines.addEventListener(flash.events.MouseEvent.ROLL_OVER,createToopTip); //lines.addEventListener(flash.events.MouseEvent.ROLL_OUT,hideToopTip); //lines.addEventListener(mx.events.ToolTipEvent.TOOL_TIP_CREATE,createCustomToolTip); lines.addEventListener(flash.events.MouseEvent.CLICK,doubleLineInterface); var contextMenu : ContextMenu = new ContextMenu(); contextMenu.hideBuiltInItems(); // 隐藏一些内建的鼠标右键菜单项 var contextMenuItem1 : ContextMenuItem = new ContextMenuItem("链路信息"); var contextMenuItem2 : ContextMenuItem = new ContextMenuItem("告警信息"); var contextMenuItem3 : ContextMenuItem = new ContextMenuItem("历史告警"); contextMenu.customItems.push(contextMenuItem1); contextMenu.customItems.push(contextMenuItem2); contextMenu.customItems.push(contextMenuItem3); lines.contextMenu = contextMenu; } public function doubleLineInterface(event:MouseEvent):void{ Alert.show("aaaaa"); //var url:URLRequest=new URLRequest("./ipInterface.do?ipInterfaceId="+interfaceId); //navigateToURL(url,"_blank"); } public function createToopTip(event:MouseEvent):void{ //var ptt:PanelToolTip = new PanelToolTip(); //ToolTipManager.toolTipClass = myTip; //myTip.addEventListener(mx.events.ToolTipEvent.TOOL_TIP_CREATE,createCustomToolTip); myTip = ToolTipManager.createToolTip("aaa",10,10) as IToolTip; //ToolTipManager.currentToolTip = ptt; //ToolTipManager.enabled = true; //myTip = ToolTip(ptt); myTip.x = event.localX; myTip.y = event.localY; //myTip.setStyle("backgroundColor",0xFFCC00); //myTip.width = 150; //myTip.height = 200; } public function hideToopTip(event:MouseEvent):void{ ToolTipManager.destroyToolTip(myTip); } public function createCustomToolTip(event:ToolTipEvent):void{ /*var ptt:PanelToolTip = new PanelToolTip(); ptt.nodeId = "10"; event.toolTip = ptt; */ } public function resetBeginLine(x1:int,y1:int):void{ lines.graphics.clear(); lines.graphics.lineStyle(2,0x0099ff,1); lines.graphics.moveTo(x1,y1); lines.graphics.lineTo(line_x2,line_y2); } public function resetEndLine(x1:int,y1:int):void{ lines.graphics.clear(); lines.graphics.lineStyle(2,0x0099ff,1); lines.graphics.moveTo(line_x1,line_y1); lines.graphics.lineTo(x1,y1); } public function refreshLine():void{ lines.graphics.clear(); lines.graphics.lineStyle(2,0xFF0000,1); lines.graphics.moveTo(line_x1,line_y1); lines.graphics.lineTo(line_x2,line_y2); } public function removeLine():void{ lines.graphics.clear(); } public function getLine():Sprite{ return lines; } public function getBeginX():int{ return line_x1; } public function getBeginY():int{ return line_y1; } public function getEndX():int{ return line_x2; } public function getEndY():int{ return line_y2; } public function setBeginX(x1:int):void{ line_x1 = x1; } public function setBeginY(y1:int):void{ line_y1 = y1; } public function setEndX(x2:int):void{ line_x2 = x2; } public function setEndY(y2:int):void{ line_y2 = y2; } } }

线的控制实体类（NeLineFlag.as）：

package{public class NeLineFlag{ private var line:ExpanLine= null;private var flag:Boolean = false;public function NeLineFlag(line:ExpanLine,flag:Boolean){this.line=line;this.flag=flag;} public function getLine():ExpanLine{ return line; } public function getFlag():Boolean{ return flag; }}}

mxml（NetPicture.mxml）：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" width="100%" height="100%"> <mx:Style> AlertTitle{ font-size: 12pt; font-weight: bold; } ToopTip{ backgroundColor:red; backgroundImage:url("ASSETS/MAP.GIF"); } </mx:Style> <mx:Script>  </mx:Script> <mx:Canvas id="myCanvas" x="0" y="0" width="100%" height="100%" borderColor="#FF0000" borderStyle="solid" verticalScrollPolicy="off"> <mx:Panel x="0" y="0" width="100%" height="100%" layout="absolute" id="myPanel" alpha="0.5"> <mx:Label x="0" y="0" id="mylabel" initialize="init();" /> </mx:Panel> </mx:Canvas> </mx:Application>

演示地址：http://dl.dropbox.com/u/3331010/NetPicture.swf