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例子,可以在edge上添加自己的组件和文字
一个n的flex组件(SpringGraph Flex Component) SpringGraph Flex Component 有几个demo,不多做解释,用了就知道强大了,关于如何使用,以后在慢慢写了。 <A href="http://mark-shepherd.com/thesaurus">...
**SpringGraph拓扑组件API详解** SpringGraph是一个用于构建和操作复杂拓扑结构的Java库,它在Spring框架的基础上提供了一套强大的API,使得开发者能够方便地处理节点、边和图的各种操作。在这个主题中,我们将深入...
**SpringGraph实例详解** SpringGraph是一款图形化工具,主要用于创建和可视化复杂的网络关系图,尤其在数据建模、系统架构设计以及程序流程分析等领域有着广泛的应用。本实例将深入探讨如何利用SpringGraph来构建...
SpringGraph是一个用于构建图形化应用的Java库,它在Spring框架基础上提供了强大的图表示和操作功能。这个例子是针对SpringGraph的一个实践项目,旨在帮助开发者理解如何在实际开发环境中使用SpringGraph,特别是在...
**SpringGraph API 深度解析** SpringGraph 是一个用于创建和展示拓扑结构的库,尤其适用于在Flex环境中构建图形界面。它以其强大的功能和灵活性而受到开发者的青睐。这个压缩包包含了SpringGraph的API文档,示例...
对SpringGraph组件中的IEdgeRenderer接口进行重写,可以在edge上添加汉字说明做为标签
《基于SpringGraph改造的简易节点连接器解析》 在IT领域,数据可视化和图形界面设计是不可或缺的一部分。本文将深入探讨一个特别的项目——“根据SpringGraph改的简易节点连接器”。SpringGraph是一款用于构建动态...
springGrap用于拓扑与流程图的绘制。
SrpingGranph 动态生成 拓扑图 非常酷的flex拓扑关系组件springgraph。-Topological relationships are very cool flex component springgraph.
Flex Spring Graph 是一款专为Flex开发者设计的开源图形库,主要用于构建拓扑图。拓扑图是一种用于表示网络、系统或任何复杂结构之间关系的图形工具。在IT领域,这样的库常常被用在网络监控、系统架构可视化或者软件...
在本篇中,我们将深入探讨Flex图形组件的原理、使用场景以及如何与其他技术如SpringGraph、GDiagram结合。 一、Flex图形组件基础 1. Flex SDK:Flex图形组件是基于Flex SDK开发的,它提供了丰富的UI组件库,包括...
- **节点和连线**:SpringGraphFlexComponent的核心在于其能够处理网络拓扑图中的节点(Node)和连线(Edge)。程序通过解析数据源来定制化地绘制这两个部分。 - **位置设置**:节点的位置可以通过特定的方法来设定。...
3. **SpringGraph Flex Component**: 这是一个用于绘制拓扑关系图的组件,非常适合展示复杂的网络或数据结构。 4. **Flex Visual Graph Library**: 类似于SpringGraph,它也专注于拓扑图形展示,动态效果出色。 5....
关于压缩包子文件的文件名称列表中的“SpringGraph_20061210”,这可能是一个特定版本的Flex组织结构图组件库或者一个示例项目,其中包含有关如何使用该组件的源代码和资源。"SpringGraph"可能是指一种具有弹性效果...
3. SpringGraph flexComponent(http://mark-shepherd.com/blog/springgraph-flex-component/):这是一个用于绘制拓扑关系图的组件,适用于展示复杂的数据关系。 4. FlexVisual Graph Library...
此外,还有aswing、SpringGraph、OpenFlux和Model-Glue等框架供选择和研究。 最后,设计是提升Flex应用的关键。设计应兼顾灵活性(可扩展性)和稳定性(性能)。这需要时间和经验积累,阅读设计模式的书籍,逐步...
3. **SpringGraph flexComponent**:这是一个用于绘制拓扑关系图的组件,非常适合展示复杂的数据结构和关系。 4. **flexVisual Graph Library**:另一个用于拓扑图形展示的类库,以其动态效果而引人注目,对于数据...
3. **SpringGraph Flex Component**: 这是一个用于绘制拓扑关系图的组件,适用于需要显示复杂网络结构的应用。 4. **Flex Visual Graph Library**: 另一个用于显示拓扑图形的类库,以其动态效果而受到赞誉,提供了...