twaver flex編程之Link定製

   最近工作中做了一個聚合鏈路的效果，默認的聚合鏈路的效果如下圖所示：

   

   定製以後得聚合鏈路效果爲：

  

   定製代碼如下：

   1）.定製Link

 

public class CLink extends Link
	{
		public function CLink(id:* = null, fromNode:Node = null, toNode:Node = null):void
		{
			super(id, fromNode, toNode);
		}
		
		override public function get elementUIClass():Class
		{
			return CLinkUI;
		}
	}

   2）.定製LinkUI
  

public class CLinkUI extends LinkUI
	{
		var _linkBundleAttachment:LinkBundleAttachment = null;
		public function CLinkUI(network:Network, link:Link):void
		{
			super(network, link);
		}
		
		override public function checkAttachments():void
		{			
			super.checkAttachments();
			super.checkLinkHandlerAttachment();
		    this.checkLinkBundleAttachment();
		}
		
		protected function checkLinkBundleAttachment():void
		{
			if(link.isBundleAgent() && !link.getStyle(Styles.LINK_BUNDLE_EXPANDED))
			{
				if(null == this._linkBundleAttachment)
				{
					this._linkBundleAttachment = new LinkBundleAttachment(this);
					this.addAttachment(this._linkBundleAttachment);
				}
			}
			else
			{
				if(null != this._linkBundleAttachment)
				{
					this.removeAttachment(this._linkBundleAttachment);
					this._linkBundleAttachment = null;
				}
			}
		}
	}

   3）.定製Attachment

public class LinkBundleAttachment extends Attachment
	{
		var _linkBundleWidth:*;
		var _linkBundleHeight:*;
		var _linkBundleColor:*;
		var _linkBundleAlpha:*;
		
		public function LinkBundleAttachment(elementUI:ElementUI, showOnTop:Boolean = false)
		{
			super(elementUI, showOnTop);
		}
		
		override public function draw(graphics:Graphics):void
		{		
			var collection:ICollection = this.getPoints();
			this._linkBundleColor = element.getClient("linkBundle.color");
			this._linkBundleAlpha = element.getClient("linkBundle.alpha");
			
			if(!collection || 0 == collection.count)
			{
				return;
			}
			
			graphics.beginFill(this._linkBundleColor, this._linkBundleAlpha);
			Utils.drawLine(graphics, collection);
			graphics.endFill();
		}
		
		private function getPoints():ICollection
		{
			var collection:ICollection = new Collection();
			var link:Link = Link(element);
			
			this._linkBundleWidth = element.getClient("linkBundle.width");
			this._linkBundleHeight = element.getClient("linkBundle.height");
			if(!this._linkBundleWidth || !this._linkBundleHeight)
			{
				return null;
			}
			if(!this._linkBundleColor)
			{
				this._linkBundleColor = 0xfc5c4f;
			}
			if(!this._linkBundleAlpha)
			{
				this._linkBundleAlpha = 1;
			}
			var fromPoint:Point = link.fromNode.centerLocation;
			var toPoint:Point = link.toNode.centerLocation;
			
			var centerPoint:Point = new Point((fromPoint.x + toPoint.x)/2, (fromPoint.y + toPoint.y)/2);
			var lineLength:Number = this.getLinkLength(fromPoint, toPoint);
			var angle:Number = this.getAngle(fromPoint, toPoint);
			
			var x1:Number = centerPoint.x - this._linkBundleHeight/2;
			var y1:Number = centerPoint.y - this._linkBundleWidth/2;
			
			var x2:Number = centerPoint.x - this._linkBundleHeight/2;
			var y2:Number = centerPoint.y + this._linkBundleWidth/2;
			
			var x3:Number = centerPoint.x + this._linkBundleHeight/2;
			var y3:Number = centerPoint.y + this._linkBundleWidth/2;
			
			var x4:Number = centerPoint.x + this._linkBundleHeight/2;
			var y4:Number = centerPoint.y - this._linkBundleWidth/2;
			
			var matrix:Matrix = new Matrix();
			matrix.translate(-centerPoint.x, -centerPoint.y);
			matrix.rotate(angle);
			matrix.translate(centerPoint.x, centerPoint.y);
			
			collection.addItem(matrix.transformPoint(new Point(x1, y1)));
			collection.addItem(matrix.transformPoint(new Point(x2, y2)));
			collection.addItem(matrix.transformPoint(new Point(x3, y3)));
			collection.addItem(matrix.transformPoint(new Point(x4, y4)));
			
			return collection;
		}
		
		private function getLinkLength(p1:Point, p2:Point):Number
		{
			var length:Number = Math.pow((p1.x - p2.x)*(p1.x - p2.x) +
											(p1.y - p2.y)*(p1.y - p2.y), 0.5);
			
			return length;
		}
		
		private function getAngle(p1:Point, p2:Point):Number
		{
			if(p1.x == p2.x)
			{
				if(p2.y == p1.y)
				{
					return 0;
				}
				else if(p2.y > p1.y)
				{
					return Math.PI/2;
				}
				else
				{
					return -Math.PI/2;
				}
			}
			return Math.atan((p2.y - p1.y)/(p2.x - p1.x));
		}
		
		
	}

   4）.最後在初始化函數中增加Link處理監聽器：

network.linkHandlerLabelFunction = function(link:Link):Object
				{
					if(link.isBundleAgent())
					{
						//Alert.show("hi");
						link.setClient("linkBundle.width", 5);
						link.setClient("linkBundle.height", 30);
						link.setClient("linkBundle.color", link.getStyle(Styles.LINK_COLOR));
						link.setClient("linkBundle.alpha", 1);
						return "+(" + link.bundleCount + ")";
					}
					return "";					
				};