flex拓扑图制作

1、把节点封装成as的类
2、把连线也封装成as的类
3、一个测试文件

NeMap.as 节点类

package{
	import mx.containers.Canvas;
	import mx.controls.Image;
	import mx.controls.Label;
	import flash.ui.ContextMenu;
	import flash.ui.ContextMenuItem;
	import mx.events.MenuEvent;
	import flash.events.MouseEvent;
	import mx.containers.Canvas;
	import flash.display.Sprite;
	import mx.controls.Alert;
	import flash.events.FocusEvent;
	import flash.events.ActivityEvent;
	import flash.utils.Dictionary;
	import flash.events.Event;
	import mx.events.DragEvent;
	import mx.events.StateChangeEvent;
	import mx.events.FlexEvent;
	import mx.events.MoveEvent;
	import flash.events.StatusEvent;
	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);

			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 = 30;
			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 = 45;
			neNameLable.width = 60;
			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;
		}

	}
}

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:Cond;

		public var myTip:IToolTip;



		public function ExpanLine(x1:int,y1:int,x2:int,y2:int,parent:Cond){
			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;
		}		
	}
}

一个测试类Conf.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" width="660" height="422">
	<mx:Style>
		AlertTitle{ 
		    font-size: 12pt; 
		    font-weight: bold;
		}
		ToopTip{
			backgroundColor:red;
			backgroundImage:url("ASSETS/MAP.GIF");
		}	
	</mx:Style>
    <mx:Script>
		<![CDATA[
			import mx.events.ToolTipEvent;
		/*import flash.display.Shape;
		import mx.core.UIComponent;
	    import flash.display.DisplayObjectContainer;*/

	    public var map1:NeMap;
		public var map2:NeMap;
		public var map3:NeMap;

		public var line:ExpanLine;
		public var line2:ExpanLine;
		public var line3:ExpanLine;
		import mx.managers.PopUpManager;
		import mx.controls.Alert;

		public var myPanel1:ShowFlow;

		public function init():void{

			map1 = new NeMap(200,100,"map1");
			map2 = new NeMap(100,200,"map2");
			map3 = new NeMap(200,200,"map3");

			myCanvas.setStyle("backgroundImage",'ASSETS/MAP.GIF');

			line  = new ExpanLine(map1.getCenterX(),map1.getCenterY(),map2.getCenterX(),map2.getCenterY(),this);
			line2 = new ExpanLine(map2.getCenterX(),map2.getCenterY(),map3.getCenterX(),map3.getCenterY(),this);
			line3 = new ExpanLine(map1.getCenterX(),map1.getCenterY(),map3.getCenterX(),map3.getCenterY(),this);


			mylabel.addChild(line.getLine());
            mylabel.addChild(line2.getLine());
            mylabel.addChild(line3.getLine());


            map1.toolTip = "map1map1map1map1map1map1map1map1map1map1map1map1map1map1map1map1";
            map2.toolTip = "map2map2map2map2map2map2map2map2map2map2map2map2map2map2map2map2";
            map3.toolTip = "map3map3map3map3map3map3map3map3map3map3map3map3map3map3map3map3";


            map1.setLine(line,true);
            map2.setLine(line,false);

            map2.setLine(line2,true);
            map3.setLine(line2,false);

            map1.setLine(line3,true);
            map3.setLine(line3,false);            

            myCanvas.addChild(map3);
            myCanvas.addChild(map1);
            myCanvas.addChild(map2);


	    }	

	    public function createCustomToolTip(event:ToolTipEvent):void{
			var ptt:PanelToolTip = new PanelToolTip();
			event.toolTip = ptt;
		}

	    public function linkAlarm():void{
	    	line.refreshLine();
	    }

	    public function neDown():void{
	    	map1.setNeState("assets/criticlaStatus.gif");
	    }

	    public function show(aa:Cond):void{
	    	Alert.show("show");
	   		myPanel1 = ShowFlow(PopUpManager.createPopUp(aa, ShowFlow, true)); 			 	
	    }


		]]>
	</mx:Script>
	<mx:Canvas id="myCanvas" x="0" y="0" width="659" height="412" borderColor="#FF0000" borderStyle="solid" verticalScrollPolicy="off">
		<mx:Panel x="0" y="0" width="650" height="410" layout="absolute" id="myPanel" alpha="0.5">
			<mx:Button x="450" y="99" label="生成Topo" click="init();" id="mybutton"  borderColor="#008080" toolTip="aaaaaaaa"/>
			<mx:Label x="0" y="0" id="mylabel" />
			<mx:Button x="450" y="152" label="链路变色" width="75" click="show(this);"/>
			<mx:Button x="450" y="202" label="节点Down" width="75"/>
		</mx:Panel>
	</mx:Canvas>	
</mx:Application>