基于HTML5的网络拓扑图(1)

什么是网络拓扑

网络拓扑,指构成网络的成员间特定的排列方式。分为物理的,即真实的、或者逻辑的,即虚拟的两种。如果两个网络的连接结构相同,我们就説它们的网络拓扑相同,尽管它们各自内部的物理接线、节点间距离可能会有不同。 - 维基百科

网络拓扑图的绘制

很多人用visio绘制网络拓扑图,非常精美,但只能静态示意,也有些传统的拓扑图中间件,基于Java、flex或者Silverlight技术,能够动态显示,只是界面略显沉重,于是有人尝试纯Web技术的图形组件,其中有不少佼佼者如:mxgraph, yfiles...... 都是老外开发的产品,类库巨大,售价昂贵,技术支持是个问题,那么有没有一种轻巧、干净、国产的纯Web拓扑图组件呢?于是就有了Qunee - 开发清新、高效的图形组件

Qunee是一套基于HTML5的网络图组件,提供Web图形解决方案,借助Qunee,可以轻松完成 地图,拓扑图,组织图等等,官方网站: qunee.com, 在线演示: demo.qunee.com

拓扑图典型示例

以“公共事业服务中心网络拓扑图”为例,展示典型的拓扑图结构,包含了节点、连线、分组等典型元素,通过图形展示,中心网与各个分支结构之间的关系变得一目了然 基于HTML5的网络拓扑图(1)_第1张图片

拓扑图中元素类型

拓扑图中基本的图元要素有:节点,文字,连线,分组等,在这个示例中都得到了体现

创建节点

function createNode(image, x, y, name, group){
    var node = graph.createNode(name, x, y);
    if(image){
        if(Q.isString(image)){
            image = "./network/images2/" + image;
        }
        node.image = image;
    }
    if(group){
        group.addChild(node);
    }
    return node;
}

创建文字元素

function createText(name, x, y, fontSize, color, parent){
    var text = graph.createText(name, x, y);
    text.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_MIDDLE);
    text.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_MIDDLE);
    text.setStyle(Q.Styles.LABEL_FONT_SIZE, fontSize);
    text.setStyle(Q.Styles.LABEL_COLOR, color);
    if(parent){
        parent.addChild(text);
    }
    return text;
}

 

创建连线元素

function createEdge(a, b, color, dashed, name){
    var edge = graph.createEdge(name, a, b);
    if(dashed){
        edge.setStyle(Q.Styles.EDGE_LINE_DASH, [8, 5]);
    }
    edge.setStyle(Q.Styles.EDGE_WIDTH, 3);
    edge.setStyle(Q.Styles.EDGE_COLOR, color);
    edge.setStyle(Q.Styles.ARROW_TO, false);
    return edge;
}

 

创建云状分组

function createGroup(padding){
    var group = graph.createGroup();
    group.groupImage = graphs.group_cloud;
    group.padding = padding || 30;
    return group;
}

 

创建虚线样式

edge.setStyle(Q.Styles.EDGE_LINE_DASH, [8, 5]);

 

创建Z形连线类型

edge.edgeType = Q.Consts.EDGE_TYPE_ZIGZAG;

 

创建弯向某个节点的曲线

function FlexEdgeUI(edge, graph){
    Q.doSuperConstructor(this, FlexEdgeUI, arguments);
}
FlexEdgeUI.prototype = {
    drawEdge: function(path, fromUI, toUI, edgeType, fromBounds, toBounds){
        var from = fromBounds.center;
        path.curveTo(from.x, from.y, internet.x, internet.y);
    }
}

Q.extend(FlexEdgeUI, Q.EdgeUI);
//关联使用
edge.uiClass = FlexEdgeUI;

 

在线视频

你可能感兴趣的:(JavaScript,html5,拓扑图,qunee)