flex拓扑图(完整例子)(转)
网上流传一个版本的拓扑图，基本是不可以使用的。又因为公司近来要搞一个相关的项目，就把该项目的代码下载下来做了修改可以使用。我现在改的一个简单例子给大家分享一下。
网元的代码（NeMap.as）：
view plaincopy to clipboardprint?
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
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）：
view plaincopy to clipboardprint?
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
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）：
view plaincopy to clipboardprint?
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
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）：
view plaincopy to clipboardprint?
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
<?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>
<!--[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(400,100,"ATM交换机1");
map2 = new NeMap(100,200,"ATM交换机2");
map3 = new NeMap(600,400,"ATM交换机3");
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 = "192.168.1.220";
map2.toolTip = "202.168.1.220";
map3.toolTip = "10.104.20.135";
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");
}
]]-->
</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>
