Twave Flex实现自定义连线及附件

 

 

如上图，我们要实现中间两个飞机之间连线以及上面点的功能， 点如果采用twave的节点那么无法跟，线绑定所以方法是不可取的。

根据Twaver API有两种实现方式：

1.添加图标附加，图标附件可以添加多个，但是仅仅是一个图标没有其他更多的功能，比如图标上添加Label,以及添加tooltip，以及其他一些列鼠标事件。所以仅仅附件功能并不可取。

2.自定义Link和LinkUI.以及自定义更强大的附件。

我们现在采用第二种方式：

首先重写Link:

package com.zznode.iss.topo.gummonitor.components.common
{
	import twaver.Link;
	import twaver.Node;
	
	public class CLink extends Link
	{
		public function CLink(id:Object=null, fromNode:Node=null, toNode:Node=null)
		{
			//TODO: implement function
			super(id, fromNode, toNode);
		}
		
		override public function get elementUIClass():Class
		{
			return ClinkUI;
			
		}
		 
	}
}

 

自定义Link中关键的是引入了自定义的CLinkUI它是负责线呈现的，简单说Link是个数据人那么CLinkUI是人的外表具体什么样的外表需要ClinkUI来实现

2.重写LinkUI

package com.zznode.iss.topo.gummonitor.components.common
{
	import com.zznode.iss.common.components.topo.common.TopUtils;
	
	import flash.display.GradientType;
	import flash.display.Graphics;
	import flash.display.SpreadMethod;
	import flash.geom.Matrix;
	import flash.geom.Point;
	
	import mx.collections.ArrayCollection;
	
	import spark.components.Image;
	import spark.components.Label;
	
	import twaver.ICollection;
	import twaver.IData;
	import twaver.Link;
	import twaver.Node;
	import twaver.network.Network;
	import twaver.network.ui.LinkUI;
	
	public class ClinkUI extends LinkUI
	{
	
		public var attachmentDatas:ArrayCollection=new ArrayCollection();
		
		public var airattachments:ArrayCollection=new ArrayCollection();
		
		private var center:Point;
		
		private var contentCenter:Point;
		
		
		public function ClinkUI(network:Network, link:Link)
		{
			var serviceType:String=link.getClient(TopUtils.SERVICE_TYPE);
			var pArr:Array=serviceType.split("||");
			for each(var pdata:String in pArr){
				var pointStrArr:Array=pdata.split(",");
				var attachmenetData:Object=new Object();
				for each(var attribute:String in pointStrArr){
					var attS:Array=attribute.split(":");
					attachmenetData[attS[0]]=attS[1];
				}
				attachmentDatas.addItem(attachmenetData);
				var ariAttachment:AirAttachmentUI=new AirAttachmentUI();
				ariAttachment.data=attachmenetData;
				ariAttachment.width=200;
				ariAttachment.height=60;
				airattachments.addItem(ariAttachment);
			}
			super(network, link);
			
		}
		
		override public function checkAttachments():void
		{			
			super.checkAttachments();
			super.checkLinkHandlerAttachment();
			//this.checkLinkBundleAttachment();
		}
		public var fp:Point;
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
			super.updateDisplayList(unscaledWidth,unscaledHeight);
			//将fromPoint和toPoint转为本地坐标
			fp=this.contentToGlobal(new Point(0,0));
			for each(var att:AirAttachmentUI in airattachments){
				att.xRelativeValue=att.data.Xlocation-this.fromPoint.x;
				att.x=this.fromPoint.x-fp.x-att.width/2+att.xRelativeValue+this.link.fromNode.width/2;
				att.y=this.fromPoint.y-fp.y-(att.height-att.icon.height/2);
			}
			
		}
		override protected function drawBody(g:Graphics):void{
			
			var g:Graphics = this.graphics;  
			
			g.clear();  
			//边框 可以有
			g.lineStyle(1, 0xC0C0C0,0.5);  
			g.drawRect( this.fromPoint.x,this.fromPoint.y-2.5, this.toPoint.x-this.fromPoint.x, 5);   
			//画填充
			var fillType:String = GradientType.LINEAR;  
			var colors:Array = [0x8FCA39, 0xC0C0C0,0x5AC2FD];  
			var alphas:Array = [1, 0,1];  
			var ratios:Array = [0x32, 0x89, 0xFF]; 
			var matr:Matrix = new Matrix();  
			
			//matr.createGradientBox(50, 50, Math.PI / 4, 0, 0);
			matr.createGradientBox(50, 50, 0, 0, 0);
			
			var spreadMethod:String = SpreadMethod.PAD;  
			this.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);    
			g.drawRect( this.fromPoint.x,this.fromPoint.y-2.5, this.toPoint.x-this.fromPoint.x, 5);  
			g.endFill();  
			/*var myMatrix:Matrix = new Matrix();
			myMatrix.createGradientBox(200, 200, 1.6, 50, 50);
			var myColors:Array = [0xFF3300,0x666666];
			var myAlphaS:Array = [100, 100];
			var myRalphaS:Array = [0, 225];
			
			graphics.beginGradientFill(GradientType.LINEAR, myColors, myAlphaS,myRalphaS, myMatrix);
			graphics.drawRoundRectComplex(this.fromPoint.x,this.fromPoint.y-20,70,70,5,5,5,5);*/
		}
		
		override protected  function createChildren():void{
			super.createChildren();
			fp=this.contentToGlobal(new Point(0,0));
			for each(var att:AirAttachmentUI in airattachments){
				this.addChild(att);
			}
		}
		protected function checkLinkBundleAttachment():void
		{
			
		//	this._linkBundleAttachment = new LinkBundleAttachment(this);
			//this.addAttachment(this._linkBundleAttachment);
		}
	}
}

 
 updateDisplayList中我们控制了图标点的移动，呈现的UI,AirAttachmentUI

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="60" creationComplete="vgroup1_creationCompleteHandler(event)" >
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;


private var _data:Object;



[Bindable]
/**
* 附件数据项
* Xlocation
* Ylocation
* */
public function get data():Object
{
return _data;
city.setStyle("color",data.citypicturecolor);
}

/**
* @private
*/
public function set data(value:Object):void
{
_data = value;
}

private var _xRelativeValue:Number;

public function get xRelativeValue():Number
{
return _xRelativeValue;
}

public function set xRelativeValue(value:Number):void
{
if(isNaN(_xRelativeValue)){
_xRelativeValue = value;
}
}
protected function vgroup1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stubdata.citypicturecolor

}

]]>
</fx:Script>
<s:Label id="city" width="100%" textAlign="center" y="{data.cityLabelY}" text="{data.cityname}" color="{data.citypicturecolor}"/>
<s:VGroup width="100%"  height="100%" horizontalAlign="center" verticalAlign="bottom">
<s:Image id="icon" source="{data.citypicture}" width="16" height="16"  />
</s:VGroup>
<!--<s:Label id="city"  y="{data.cityLabelY}" text="{data.cityname}" color="{data.citypicturecolor}"/>
<s:Image id="icon" source="{data.citypicture}" width="16" height="16"  />-->
</s:Group>

再看附件LinkBundleAttachment （CLinkUI中添加附件的代码因为不需要所以被注释了）：

package com.zznode.iss.topo.gummonitor.components.common
{
	import flash.display.DisplayObject;
	import flash.display.Graphics;
	import flash.geom.Matrix;
	import flash.geom.Point;
	
	import mx.controls.ColorPicker;
	import mx.utils.ColorUtil;
	
	import spark.components.Image;
	import spark.components.Label;
	
	import twaver.Collection;
	import twaver.ICollection;
	import twaver.IData;
	import twaver.Link;
	import twaver.Node;
	import twaver.Utils;
	import twaver.network.ui.Attachment;
	import twaver.network.ui.ElementUI;
	import twaver.network.ui.LinkUI;
	
	public class LinkBundleAttachment extends Attachment
	{
		var _linkBundleWidth:*;
		var _linkBundleHeight:*;
		var _linkBundleColor:*;
		var _linkBundleAlpha:*;
		
		private var center:Point;
		
		private var contentCenter:Point;
		
		[Embed(source="/resources/images/topo/red.png")]
		/**2G普通基站红**/
		public var BTS_OTH_1:Class;
		
		private var img:Image;
		
		public function LinkBundleAttachment(elementUI:ElementUI, showOnTop:Boolean = false)
		{
		
			super(elementUI, showOnTop);
		}
		
		override public function draw(graphics:Graphics):void
		{		
			var link:Link = Link(element);
			//var fromP:Node=link.fromNode;
			
			//var toP:Node=link.toNode;
			center=new Point((LinkUI(elementUI).toPoint.x+LinkUI(elementUI).fromPoint.x)/2,(LinkUI(elementUI).toPoint.y+LinkUI(elementUI).fromPoint.y)/2);
			contentCenter=LinkUI(elementUI).network.localToContent(center);
			var g:Graphics=graphics;
			g.lineStyle(1, 0x01f0e, 1);
			g.beginFill(0x091231, 0.5);
			g.drawCircle(LinkUI(elementUI).fromPoint.x,LinkUI(elementUI).fromPoint.y,30);
			//g.moveTo(LinkUI(elementUI).fromPoint.x,LinkUI(elementUI).fromPoint.y);
			//g.lineTo(center.x,center.y);
			
			g.drawCircle(center.x,center.y,10);
			//g.lineTo(LinkUI(elementUI).toPoint.x,LinkUI(elementUI).toPoint.y);
			//g.endFill();#EE2E35
			g.drawCircle(LinkUI(elementUI).toPoint.x,LinkUI(elementUI).toPoint.y,30);
			//ClinkUI(elementUI).img.x=contentCenter.x-ClinkUI(elementUI).img.width/2;//-LinkUI(elementUI).x;
			//ClinkUI(elementUI).img.y=contentCenter.y-ClinkUI(elementUI).img.height/2;//-LinkUI(elementUI).y;
			
			var p:Point=ClinkUI(elementUI).contentToLocal(new Point(0,0));
			var p2:Point=ClinkUI(elementUI).contentToGlobal(new Point(0,0));
			for each(var att:AirAttachmentUI in ClinkUI(elementUI).airattachments){
				att.x=-70;//LinkUI(elementUI).fromPoint.x-ClinkUI(elementUI).fp.x;//-att.xRelativeValue-att.width/2
				
				att.y=-20;LinkUI(elementUI).fromPoint.y-ClinkUI(elementUI).fp.y;//-(att.height-att.icon.height/2);
			}
			/*for each(var attachment:AirAttachmentUI in ClinkUI(elementUI).airattachments){
				//attachment.xRelativeValue=contentCenter.x-attachment.data.Xlocation;
				//attachment.x=contentCenter.x-attachment.width/2-attachment.xRelativeValue;
				//attachment.x=contentCenter.x-attachment.xRelativeValue;
				attachment.y=contentCenter.y-(attachment.height-attachment.icon.height/2);
			}*/
			/*for each(var att:AirAttachmentUI in ClinkUI(elementUI).airattachments){
				var iData:ICollection = network.elementBox.datas;
				
				for(var i:Number=0;i<iData.count;i++){
					var data:IData = iData.getItemAt(i) as IData;
					if(data is Node){
						var node:Node=Node(data);
						if(node.id==att.data.enodebid){
							att.x=node.x;
						}
					}
					
				}
			}*/
		
		}
		
		
	}
}

 

 

如上是实现可以解决放大缩小等一些列问题