画箭头2

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="init()" fontSize="12" backgroundColor="#FFFFFF"
    layout="absolute" minWidth="955" minHeight="600">
 <mx:Script>
  <![CDATA[
   import com.njit.LinkLine;
   import com.njit.LinkMap;
   private var point1:Point;
   private var point2:Point;
   private var map1:LinkMap;
   private var map2:LinkMap;
   private var line:LinkLine;
   private var colorArr:Array=["0xFF0000","0x00FF00","0x0000FF","0xFFFF00"];
   private var k:int=0;
   
   private function init():void{
    point1=new Point(50,50);
    point2=new Point(300,300);
    map1=new LinkMap(point1,100,80,"主机",1);
    map2=new LinkMap(point2,100,80,"服务器",2);
    line=new LinkLine();
    line.setStartPoint(new Point(map1.getCenterX(),map1.getCenterY()));
    line.setEndPoint(new Point(map2.getCenterX(),map2.getCenterY()));
    line.setTip("哈哈哈哈");
    line.drawLine();
    map1.setLine(line,true);
    map2.setLine(line,false);
    this.addChild(map1);
    this.addChild(map2);
    this.addChild(line);
    
    var time:Timer = new Timer(1000,100);
    time.addEventListener(TimerEvent.TIMER,doTime);
    time.start();
   }
   //定时器设置颜色线条颜色变换
   private function doTime(event:TimerEvent):void{
    line.setLineColor(colorArr[k++]);
    line.drawLine();
    if(k>=colorArr.length)
     k=0;
   }
  ]]>
 </mx:Script>
</mx:Application>

 

=================================================================

 

package com.njit
{
 //判断是否线头
 public class LineFlag{
  
  private var line:LinkLine;
  private var flag:Boolean;
  
  public function LineFlag(l:LinkLine,f:Boolean){
   this.line=l;
   this.flag=f;
  }
  
  public function setLine(l:LinkLine):void{
   this.line=l;
  }
  public function setFlag(f:Boolean):void{
   this.flag=f;
  }
  
  public function getLine():LinkLine{
   return this.line;
  }
  public function getFlag():Boolean{
   return this.flag;
  }
 }
}

 

 

=====================================================

 

 

package com.njit
{
 import flash.geom.Point;
 
 import mx.core.UIComponent;
 
 public class LinkLine extends UIComponent{
  
  //线起点
  private var startPoint:Point;
  //线终点
  private var endPoint:Point;
  //线条颜色
  private var lineColor:uint=0x000000;
  //线提示语
  private var tip:String=" ";
  //是否要箭头
  private var isArrow:Boolean=true;
  //箭头大小
  private var radius:uint=6;
  
  
  public function LinkLine(){
   super();
  }
  
  //获得线的角度
  public function getAngle():Number{
   var tmpx:Number=endPoint.x - startPoint.x;
   var tmpy:Number=startPoint.y - endPoint.y;
   var angle:Number= Math.atan2(tmpy,tmpx)*(180/Math.PI);
   return angle;
  }
  
  //画线
  public function drawLine():void{
   this.graphics.clear();
   this.graphics.lineStyle(2,lineColor);
   this.graphics.moveTo(startPoint.x,startPoint.y);
   this.graphics.lineTo(endPoint.x,endPoint.y);
   this.toolTip=tip;
   if(isArrow){
    var angle:Number = this.getAngle();
    var centerX:Number = endPoint.x - radius * Math.cos(angle*(Math.PI/180));
    var centerY:Number = endPoint.y + radius * Math.sin(angle*(Math.PI/180));
    var topX:Number = endPoint.x;
    var topY:Number = endPoint.y;
    var leftX:Number = centerX + radius * Math.cos((angle+120)*(Math.PI/180));
    var leftY:Number = centerY - radius * Math.sin((angle+120)*(Math.PI/180));
    var rightX:Number = centerX + radius * Math.cos((angle+240)*(Math.PI/180));
    var rightY:Number = centerY - radius * Math.sin((angle+240)*(Math.PI/180));
    this.graphics.beginFill(lineColor,1);
    this.graphics.lineStyle(2,lineColor,1);
    this.graphics.moveTo(topX,topY);
    this.graphics.lineTo(leftX,leftY);
    this.graphics.lineTo(centerX,centerY);
    this.graphics.lineTo(rightX,rightY);
    this.graphics.lineTo(topX,topY);
    this.graphics.endFill();
   }
  }
  public function removeLine():void{
   this.graphics.clear();
  }
  
  public function setStartPoint(point:Point):void{
   this.startPoint=point;
  }
  public function setEndPoint(point:Point):void{
   this.endPoint=point;
  }
  public function setLineColor(color:uint):void{
   this.lineColor=color;
  }
  public function setTip(tip:String):void{
   this.tip=tip;
  }
  public function setArrow(flag:Boolean):void{
   this.isArrow=flag;
  }
 }
}

 

 

=======================================================

 

 

package com.njit
{
 import flash.events.MouseEvent;
 import flash.geom.Point;
 
 import mx.containers.Canvas;
 import mx.controls.Image;
 import mx.controls.Label;
 import mx.events.MoveEvent;

 public class LinkMap extends Canvas{
  
  [Embed(source="assets/images/client.png")]
  [Bindable]
  public var c2s:Class;
  
  [Embed(source="assets/images/server.png")]
  [Bindable]
  public var s2c:Class;
  //网元名称
  private var ueName:String = "网元";
  private var lineList:Array =new Array();
  private var lineCount:int = 0;
  private var oldIndex:int = 0;
  private var ueImage:Image=new Image();
  private var ueLabel:Label=new Label();
  
  public function LinkMap(point:Point,width:int,height:int,ueName:String,type:int){
   super();
   this.x=point.x;
   this.y=point.y;
   this.width=width;
   this.height=height;
   this.ueName=ueName;
   this.init(type);
  }
  //初始化
  private function init(type:int):void{
   this.addEventListener(flash.events.MouseEvent.MOUSE_DOWN,dragBegin);
   this.addEventListener(flash.events.MouseEvent.MOUSE_UP,dragEnd);
   this.addEventListener(flash.events.MouseEvent.MOUSE_MOVE,dragIng2);
   this.addEventListener(mx.events.MoveEvent.MOVE,dragIng1);
   this.verticalScrollPolicy = "off";
   this.horizontalScrollPolicy = "off";
   this.initLabel();
   this.addChild(ueLabel);
   this.initUeImage(type);
   this.addChild(ueImage);
  }
  private function initUeImage(flag:int):void{
   switch(flag){
    case 1:
     ueImage.source = c2s;break;
    case 2:
     ueImage.source = s2c;break;
   }
   ueImage.x = 10;
   ueImage.y = 0;
  }
  
  private function initLabel():void{
   ueLabel.text = ueName;
   ueLabel.x = 0;
   ueLabel.y = 60;
   ueLabel.width = 99;
   ueLabel.height = 20;
  }
 
  private function dragIng1(event:MoveEvent):void{
   this.refreshLine();
  }
  private function dragIng2(event:MouseEvent):void{
   this.refreshLine();
  }
  private function refreshLine():void{
   var x:int = this.getCenterX();
   var y:int = this. getCenterY();
   for(var i:int=0;i<lineList.length;i++){    
    var lineFlag:LineFlag = lineList[i];
    var line:LinkLine = lineFlag.getLine();
    var isHeaderLine:Boolean = lineFlag.getFlag();
    if(isHeaderLine){
     line.setStartPoint(new Point(x,y));
    }else{
     line.setEndPoint(new Point(x,y));
    } 
    line.drawLine();
   } 
  }
  
  public function setLine(line:LinkLine,flag:Boolean):void{
   var lineFlag:LineFlag = new LineFlag(line,flag);
   lineList[lineCount] = lineFlag;
   lineCount++;
  }
  
  
  private function dragBegin(event:MouseEvent):void{
   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();     
  }
  public function getCenterX():int{
   return this.x+30;
  }
  public function getCenterY():int{
   return this.y+30;
  }
 }
}