Qunee for HTML5 - 中文 : 子网类型

拓扑图可以描述网络结构的分布,一个图就表示一个网络,网络通常具有层级关系,广域网下面有城域网,城域网下面有局域网,这种从属网络我们称为子网(Sub Network)

Qunee中任何图元都可以作为子网,文字,节点,连线,甚至分组,只需要设置enableSubNetwork属性为true,即可表示为子网类型

子网相关API

  • 设置为子网类型 - 任何图元都可以作为子网
    element.enableSubNetwork = true; 
  • 进入该子网
    graph.currentSubNetwork = element;
  • 退回上层子网
    graph.upSubNetwork();
  • 监听子网变化事件
     graph.onPropertyChange('currentSubNetwork', function(evt){ … } )

示例

var graph;
$(function(){
    graph = new Q.Graph('canvas');

    var subnetwork = graph.createNode('双击进入子网');
    subnetwork.image = Q.Graphs.subnetwork;
    subnetwork.enableSubNetwork = true;

    var hello = graph.createNode("Hello", -100, -50);
    var qunee = graph.createNode("Qunee", 100, 50);
    var edge = graph.createEdge("Hello\nQunee", hello, qunee);

    hello.parent = subnetwork;
    qunee.parent = subnetwork;
    edge.parent = subnetwork;

    graph.onPropertyChange('currentSubNetwork', function(){
        graph.html.style.backgroundColor = graph.currentSubNetwork == subnetwork ? '#DDF' : '#FFF';
    });
})

运行效果

 

Attachments: