轻量高效的拓扑图组件
zh

Qunee Developer Guide

总线效果

总线布局是拓扑图中的一种典型结构,总线(Bus),是计算机各种功能部件之间传送信息的公共通信干线,总线和与之连接的设备一起组成一种拓扑结构,这种图称为总线型拓扑图,Qunee中定义了Bus图元类型,当然要得到总线效果还需要对连线进行设置

Qunee中定义了连线角度属性,结合总线图元类型,可以实现特定方向的连线效果

Edge#angle - 连线走向角度

总线示例

var graph = new Q.Graph("canvas");
var bus = new Q.Bus();
graph.addElement(bus);
bus.moveTo(-200, 0);
bus.lineTo(200, 0);
bus.setStyle(Q.Styles.SHAPE_STROKE, 10);
for(var i = 0; i < 5; i++){
    var node = graph.createNode("" + i, -100 + i * 70, 60);
    var edge = graph.createEdge(bus, node);
    edge.angle = Math.PI * 0.2;
    node = graph.createNode("" + i, -80 + i * 70, -60);
    edge = graph.createEdge(bus, node);
    edge.angle = -Math.PI * 0.2;
}

运行效果

ScreenShot 2014-06-05 at 下午4.23.59.png