`
shlei
  • 浏览: 287827 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

springGraph edge Renderer

    博客分类:
  • FLEX
 
阅读更多
package controls
{
	import com.adobe.flex.extras.controls.springgraph.Graph;
	import com.adobe.flex.extras.controls.springgraph.IEdgeRenderer;
	import com.adobe.flex.extras.controls.springgraph.Item;
	
	import flash.display.BitmapData;
	import flash.display.Graphics;
	import flash.geom.Matrix;
	import flash.text.TextFieldAutoSize;
	
	import mx.core.IDataRenderer;
	import mx.core.UIComponent;
	import mx.core.UITextField;
	import mx.graphics.ImageSnapshot;

	public class CusEdge implements IEdgeRenderer
	{
		private var thickness:int=2;
		private var lineColor:uint=0x232323;
		private var arrowSize:int=5;
		
		public function CusEdge()
		{
		}
		
		/** 实现画线接口 **/
		public function draw(g:Graphics, fromView:UIComponent, toView:UIComponent, fX:int, fY:int, tX:int, tY:int, graph:Graph):Boolean
		{
			var fromItem: Item = (fromView as IDataRenderer).data as Item;
			var toItem: Item = (toView as IDataRenderer).data as Item;
			var node:Object=graph.getLinkData(fromItem,toItem);
			if (node.@fromID!=(fromView as CusNode).id && node.@fromID==(toView as CusNode).id)
			{
				return drawNew(g,toView,fromView,tX,tY,fX,fY,graph);
			}	
			else
			{
				return drawNew(g,fromView,toView,fX,fY,tX,tY,graph);
			}
			return true;
		}
		
		/** 画线函数 **/
		public function drawNew(g:Graphics, fromView:UIComponent, toView:UIComponent, fX:int, fY:int, tX:int, tY:int, graph:Graph):Boolean
		{
			var fromX:int;
			var fromY:int;
			var toX:int;
			var toY:int;
			var totoX:int;
			var totoY:int;
			var eid:String;
			
			var halfFromH:Number=fromView.height/2;
			var halfFromW:Number=fromView.width/2;
			var halfToH:Number=toView.height/2;
			var halfToW:Number=toView.width/2;
			
			var angle:Number  = getAngle( fX, fY, tX, tY);			
			var toAngle:Number=Math.atan2(halfToH,halfToW)*(180/Math.PI);
			var fromAngle:Number=Math.atan2(halfFromH,halfFromW)*(180/Math.PI);
			var k:Number=Math.tan(angle*(Math.PI/180));
			
			///to坐标换算
			if (angle>=0 && angle<90)//1象限
			{
				if (angle>toAngle)
				{
					toX=tX - halfToH / k;
					toY=tY + halfToH;				
				}
				else
				{
					toX=tX - halfToW;
					toY=tY + halfToW * k;
				}
			}
			if (angle>=90 && angle<=180)//2象限
			{
				if (angle+toAngle>180)
				{
					toX=tX + halfToW ;
					toY=tY - halfToW * k;				
				}
				else
				{
					toX=tX - halfToH / k;
					toY=tY + halfToH;	
				}
			}
			if (angle>=-90 && angle<0)//4象限
			{
				if (Math.abs(angle)>toAngle)
				{
					toX=tX + halfToH / k;					
					toY=tY - halfToH;				
				}
				else
				{
					toX=tX - halfToW;
					toY=tY + halfToW * k;
				}
			}
			if (angle<-90 && angle>=-180)//3象限
			{
				if (angle+180>toAngle)
				{
					toX=tX + halfToH / k;
					toY=tY - halfToH;				
				}
				else
				{
					toX=tX + halfToW;
					toY=tY - halfToW * k;	
				}
			}
			///from坐标换算
			if (angle>0 && angle<=90)
			{			
				if (angle>fromAngle)
				{
					fromX=fX + halfFromH / k;
					fromY=fY - halfFromH;
				}
				else
				{
					fromX=fX + halfFromW;
					fromY=fY - halfFromW * k;
				}
			}
			if (angle>90 && angle<=180)
			{
				if (angle+fromAngle>180)
				{
					fromX=fX - halfFromW;
					fromY=fY + halfFromW * k;			
				}
				else
				{
					fromX=fX + halfFromH / k;
					fromY=fY - halfFromH;
				}
			}
			if (angle>=-90 && angle<=0)
			{
				if (Math.abs(angle)>fromAngle)
				{
					fromX=fX - halfFromH / k;
					fromY=fY + halfFromH;
				}
				else
				{
					fromX=fX + halfFromW;
					fromY=fY - halfFromW * k;
				}
			}
			if (angle<-90 && angle>=-180)
			{
				if (angle+180>fromAngle)
				{
					fromX=fX - halfFromH / k;
					fromY=fY + halfFromH;
				}
				else
				{
					fromX=fX - halfFromW;
					fromY=fY + halfFromW * k;
				}
			}
			
			
			
			totoX=toX - arrowSize * Math.cos(angle*(Math.PI/180));
			totoY=toY + arrowSize * Math.sin(angle*(Math.PI/180));
			
			g.lineStyle(thickness,lineColor);
			g.moveTo(fromX,fromY);			
			g.lineTo(totoX,totoY);

			
			var fromItem: Item = (fromView as IDataRenderer).data as Item;
			var toItem: Item = (toView as IDataRenderer).data as Item;
			var node:Object=graph.getLinkData(fromItem,toItem);
			if (node!=null)
			{
				if (node.@id)			
					eid=node.@prop;
//				if (node.width)
//					weight=node.width;
//				if (node.bytewidth)
//					bytewidth=node.bytewidth;
			}
			var uit:UITextField = new UITextField();
			uit.textColor = lineColor;
			uit.text = eid;
			uit.autoSize =   TextFieldAutoSize.LEFT;
			var textBitmapData:BitmapData = ImageSnapshot.captureBitmapData(uit);
			var sizeMatrix:Matrix = new Matrix();
			var coef:Number = Math.min(uit.measuredWidth/textBitmapData.width,uit.measuredHeight/textBitmapData.height);
			sizeMatrix.a = coef;
			sizeMatrix.d = coef;
			textBitmapData = ImageSnapshot.captureBitmapData(uit,sizeMatrix);
			g.lineStyle(0,0,0);
			var sm:Matrix = new Matrix();
			sm.tx = (fromX+toX)/2;
			sm.ty = (fromY+toY)/2;
			g.beginBitmapFill(textBitmapData,sm,false);
			g.drawRect((fromX+toX)/2,(fromY+toY)/2,uit.measuredWidth,uit.measuredHeight);
			g.endFill();
			
			
			drawArrowHead(fromX,fromY,toX,toY,g);
			return true;
		}
		
		/** 画箭头 **/
		private function drawArrowHead(startX:int,startY:int,endX:int,endY:int,graphics:Graphics):void{
			//得到箭头的角度
			var angle:Number  = this.getAngle(startX,startY,endX,endY);
			var centerX:Number = endX - arrowSize * Math.cos(angle*(Math.PI/180));
			var centerY:Number = endY + arrowSize * Math.sin(angle*(Math.PI/180));
			
			var leftX:Number = centerX + arrowSize * Math.cos((angle+120)*(Math.PI/180));
			var leftY:Number = centerY - arrowSize * Math.sin((angle+120)*(Math.PI/180));
			var rightX:Number = centerX + arrowSize * Math.cos((angle+240)*(Math.PI/180));
			var rightY:Number = centerY - arrowSize * Math.sin((angle+240)*(Math.PI/180)); 
			
			graphics.lineStyle(2,lineColor,1);
			graphics.beginFill(lineColor);
			graphics.moveTo(endX,endY);
			
			graphics.lineTo(leftX,leftY);
			graphics.lineTo(centerX,centerY);
			
			graphics.lineTo(rightX,rightY);
			graphics.lineTo(endX,endY);
			graphics.endFill();
		}
		
		/** 得到箭头的角度 **/
		private function getAngle(startX:int,startY:int,endX:int,endY:int):Number{
			var temX:Number = endX - startX;
			var temY:Number = startY - endY;
			var angle:Number = Math.atan2(temY,temX)*(180/Math.PI);
			return angle;
		}
	}
}
分享到:
评论

相关推荐

    一个SpringGraph的demo

    自己研究的可以运行的springgraph例子,可以在edge上添加自己的组件和文字

    springgraph.zip

    一个n的flex组件(SpringGraph Flex Component) SpringGraph Flex Component 有几个demo,不多做解释,用了就知道强大了,关于如何使用,以后在慢慢写了。 &lt;A href="http://mark-shepherd.com/thesaurus"&gt;...

    springGraph拓扑组件api

    **SpringGraph拓扑组件API详解** SpringGraph是一个用于构建和操作复杂拓扑结构的Java库,它在Spring框架的基础上提供了一套强大的API,使得开发者能够方便地处理节点、边和图的各种操作。在这个主题中,我们将深入...

    SpringGraph实例

    **SpringGraph实例详解** SpringGraph是一款图形化工具,主要用于创建和可视化复杂的网络关系图,尤其在数据建模、系统架构设计以及程序流程分析等领域有着广泛的应用。本实例将深入探讨如何利用SpringGraph来构建...

    springgraph例子

    SpringGraph是一个用于构建图形化应用的Java库,它在Spring框架基础上提供了强大的图表示和操作功能。这个例子是针对SpringGraph的一个实践项目,旨在帮助开发者理解如何在实际开发环境中使用SpringGraph,特别是在...

    springgraph 带API

    **SpringGraph API 深度解析** SpringGraph 是一个用于创建和展示拓扑结构的库,尤其适用于在Flex环境中构建图形界面。它以其强大的功能和灵活性而受到开发者的青睐。这个压缩包包含了SpringGraph的API文档,示例...

    重写SpringGraph的带标签的IEdgeRenderer

    对SpringGraph组件中的IEdgeRenderer接口进行重写,可以在edge上添加汉字说明做为标签

    根据SpringGraph改的简易节点连接器

    《基于SpringGraph改造的简易节点连接器解析》 在IT领域,数据可视化和图形界面设计是不可或缺的一部分。本文将深入探讨一个特别的项目——“根据SpringGraph改的简易节点连接器”。SpringGraph是一款用于构建动态...

    springGraph API

    springGrap用于拓扑与流程图的绘制。

    SrpingGranph 动态生成 拓扑图

    SrpingGranph 动态生成 拓扑图 非常酷的flex拓扑关系组件springgraph。-Topological relationships are very cool flex component springgraph.

    Flex Spring Graph

    Flex Spring Graph 是一款专为Flex开发者设计的开源图形库,主要用于构建拓扑图。拓扑图是一种用于表示网络、系统或任何复杂结构之间关系的图形工具。在IT领域,这样的库常常被用在网络监控、系统架构可视化或者软件...

    flex图形组件

    在本篇中,我们将深入探讨Flex图形组件的原理、使用场景以及如何与其他技术如SpringGraph、GDiagram结合。 一、Flex图形组件基础 1. Flex SDK:Flex图形组件是基于Flex SDK开发的,它提供了丰富的UI组件库,包括...

    Flex拓扑图精品文档

    - **节点和连线**:SpringGraphFlexComponent的核心在于其能够处理网络拓扑图中的节点(Node)和连线(Edge)。程序通过解析数据源来定制化地绘制这两个部分。 - **位置设置**:节点的位置可以通过特定的方法来设定。...

    Flex开源项目

    3. **SpringGraph Flex Component**: 这是一个用于绘制拓扑关系图的组件,非常适合展示复杂的网络或数据结构。 4. **Flex Visual Graph Library**: 类似于SpringGraph,它也专注于拓扑图形展示,动态效果出色。 5....

    flex的组织结构图组件

    关于压缩包子文件的文件名称列表中的“SpringGraph_20061210”,这可能是一个特定版本的Flex组织结构图组件库或者一个示例项目,其中包含有关如何使用该组件的源代码和资源。"SpringGraph"可能是指一种具有弹性效果...

    flex开源项目介绍.doc

    3. SpringGraph flexComponent(http://mark-shepherd.com/blog/springgraph-flex-component/):这是一个用于绘制拓扑关系图的组件,适用于展示复杂的数据关系。 4. FlexVisual Graph Library...

    我的Flex学习之路

    此外,还有aswing、SpringGraph、OpenFlux和Model-Glue等框架供选择和研究。 最后,设计是提升Flex应用的关键。设计应兼顾灵活性(可扩展性)和稳定性(性能)。这需要时间和经验积累,阅读设计模式的书籍,逐步...

    专题资料(2021-2022年)flex开源项目介绍.doc

    3. **SpringGraph flexComponent**:这是一个用于绘制拓扑关系图的组件,非常适合展示复杂的数据结构和关系。 4. **flexVisual Graph Library**:另一个用于拓扑图形展示的类库,以其动态效果而引人注目,对于数据...

    专题资料(2021-2022年)Flex开源项目.docx

    3. **SpringGraph Flex Component**: 这是一个用于绘制拓扑关系图的组件,适用于需要显示复杂网络结构的应用。 4. **Flex Visual Graph Library**: 另一个用于显示拓扑图形的类库,以其动态效果而受到赞誉,提供了...

Global site tag (gtag.js) - Google Analytics