`
xhload3d
  • 浏览: 209303 次
社区版块
存档分类
最新评论

电信网络拓扑图自动布局之总线

阅读更多

在前面《电信网络拓扑图自动布局》一文中,我们大体介绍了 HT for Web 电信网络拓扑图自动布局的相关知识,但是都没有深入地描述各种自动布局的用法,我们今天在这边就重点介绍总线的具体实现方案。

HT for Web 的连线手册中,有说明可以自定义连线类型,通过 ht.Default.setEdgeType(type, func, mutual) 函数定义,我们今天要描述的总线也是通过这样的方法来实现的。

我们来简单地描述下这个方法,虽然在文档(http://www.hightopo.com/guide/guide/plugin/edgetype/ht-edgetype-guide.html)中已经描述得很详细了,为了下面的工作能够更好的开展,我这边还是再强调下。

这个函数名是 setEdgeType,顾名思义,它是用来自定义一个 EdgeType 的,那么第一个参数 type 就是用来定义这个 EdgeType 的名称,在 Edge 的样式上设置 edge.type 属性为 type 值,就可以让这条连线使用是我们自定义的 EdgeType。

那么第二个参数呢,就是用来计算连线的走线信息的函数,这个回调函数将会传入四个参数,分别是:edge、gap、graphView、sameSourceWithFirstEdge,其中 edge 就是样式上设置 edge.type 属性为 type 值的连线对象,这个参数是最重要的,通常有这个参数就可以完成格式各样的连线了。其他参数在手册中都描述得很清楚,可以转到手册中阅读,http://www.hightopo.com/guide/guide/plugin/edgetype/ht-edgetype-guide.html

那这第三个参数呢,是决定连线是否影响起始或结束节点上的所有连线,这个参数解释起来比较复杂,后续有机会的话,我们再详细说明。

先来看看一个简单的例子,http://www.hightopo.com/guide/guide/plugin/edgetype/examples/example_custom.html

上图中,可以看到节点间的连线并不是普通的直线,或者简单的折线,而是漂亮的曲线,那么这样的曲线是怎么生成的呢?既然将这个例子放到这边作为案例,那么它一定使用了自定义 EdgeType 的功能,观察图片可以发现曲线其实可以用二次方曲线来表示,所以呢,我们在 setEdgeType 函数的回调中返回的连线走向信息中,将其描述为一条二次方曲线就可以了。说得有些绕,我们来看看代码实现吧。

 

ht.Default.setEdgeType('custom', function(edge, gap, graphView, sameSourceWithFirstEdge){
    var sourcePoint = edge.getSourceAgent().getPosition(),
        targetPoint = edge.getTargetAgent().getPosition(),
        points = new ht.List();       
        points.add(sourcePoint);
        points.add({
            x: (sourcePoint.x + targetPoint.x)/2, 
            y: (sourcePoint.y + targetPoint.y)/2 + 300
        });                  
        points.add(targetPoint);                                                       

    return {
        points: points,
        segments: new ht.List([1, 3])
    };                 
});

从代码中可以看出,返回到顶点是连线的起点和终点,还有中间的二次方曲线的控制点,还有设置了顶点的连线方式,就是在 return 中的 segments,1 代表是路径的起点,3 代表的是二次方曲线,这些相关知识点在 HT for Web 的形状手册中描述得很清楚,不懂的可以转到手册详细了解,http://www.hightopo.com/guide/guide/core/shape/ht-shape-guide.html

前面的废话太多了,下面就是我们今天的主要内容了,看看如何通过自定义 EdgeType 来实现总线的效果,http://www.hightopo.com/demo/EdgeType/BusEdgeType.html

上图就是一个总线的简单例子,所有的节点都通过线条链接黑色的总线,连线的走向都是节点到总线的最短距离。

来讲讲整体的设计思路吧,其实总的来说,就是点的线的垂直点计算问题。那么问题来了,碰到曲线怎么办?其实曲线也是可以微分成线条来处理的,至于这个线段的划分精细度就需要用户来自定义了。

EdgeType 结合 ShapeLayout 实现均匀自动布局:http://www.hightopo.com/demo/EdgeType/ShapeLayout-Oval.html

但是,像上图所示的椭圆形总线该如何处理呢?对于这种有固定表达式的形状,我们就不需要用曲线分割的方法来做总线布局了,我们完全可以获取到圆或者椭圆上的一点,所以在处理圆和椭圆上,我们获取 Edge 连边节点中线连成线,然后计算出夹角,通过圆或者椭圆的三角函数表示法计算出总线上的一点,这样来构成连线。

在上图中,我们用到了 ShapeLayout 来自动布局和总线相连的节点,让其相对均匀地分布在总线周围,对于 ShapeLayout 的相关设计思路我们在后面的章节中再具体介绍。

那么我们今天的内容就到这里了,对于总线的设计是不是很简单呢,下面附上总线的所有代码,有需要的话,可以直接复制出来,在页面中引入 HT for Web 的核心包 ht.js 后面引入以下代码就可以直接使用总线功能了。代码不多,也就将近 200 行,感兴趣的朋友可以通读一遍,有什么问题,还请不吝赐教。

 

;(function(window, ht) {
    var getPoint = function(node, outPoint) {
        var rect = node.getRect(),
            pos = node.getPosition(),
            p = ht.Default.intersectionLineRect(pos, outPoint, rect);
        if (p) return { x: p[0], y: p[1] };
        return pos;
    };
    var pointToInsideLine = function(p1, p2, p) {
       var x1 = p1.x,
           y1 = p1.y,
           x2 = p2.x,
           y2 = p2.y,
           x = p.x,
           y = p.y,
           result = {},
           dx = x2 - x1,
           dy = y2 - y1,
           d = Math.sqrt(dx * dx + dy * dy),
           ca = dx / d, // cosine
           sa = dy / d, // sine
           mX = (-x1 + x) * ca + (-y1 + y) * sa;

       result.x = x1 + mX * ca;
       result.y = y1 + mX * sa;
       
       if (!isPointInLine(result, p1, p2)) {
           result.x = Math.abs(result.x - p1.x) < Math.abs(result.x - p2.x) ? p1.x : p2.x;
           result.y = Math.abs(result.y - p1.y) < Math.abs(result.y - p2.y) ? p1.y : p2.y;
       }

       dx = x - result.x;
       dy = y - result.y;
       result.z = Math.sqrt(dx * dx + dy * dy);

       return result;
    };
    var isPointInLine = function(p, p1, p2) {
        return p.x >= Math.min(p1.x, p2.x) &&
            p.x <= Math.max(p1.x, p2.x) &&
            p.y >= Math.min(p1.y, p2.y) &&
            p.y <= Math.max(p1.y, p2.y);
    };
    var bezier2 = function(t, p0, p1, p2) {
        var t1 = 1 - t;
        return t1*t1*p0 + 2*t*t1*p1 + t*t*p2;
    };
    var bezier3 = function(t, p0, p1, p2, p3 ) {
        var t1 = 1 - t;
        return t1*t1*t1*p0 + 3*t1*t1*t*p1 + 3*t1*t*t*p2 + t*t*t*p3;
    };
    var distance = function(p1, p2) {
        var dx = p2.x - p1.x,
            dy = p2.y - p1.y;
        return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
    };
    var getPointWithLength = function(length, p1, p2) {
        var dis = distance(p1, p2),
            temp = length / dis,
            dx = p2.x - p1.x,
            dy = p2.y - p1.y;
        return { x: p1.x + dx * temp, y: p1.y + dy * temp };
    };
    var getPointInOval = function(l, r, p1, p2) {
        var a = Math.atan2(p2.y - p1.y, p2.x - p1.x);
        return { x: l * Math.cos(a) + p1.x, y: r * Math.sin(a) + p1.y };
    };
    ht.Default.setEdgeType('bus', function(edge, gap, graphView, sameSourceWithFirstEdge) {
        var source = edge.getSourceAgent(),
            target = edge.getTargetAgent(),
            shapeList = ['circle', 'oval'],
            shape, beginNode, endNode;
            
        if (shapeList.indexOf(source.s('shape')) >= 0) {
            shape = source.s('shape');
            beginNode = source;
            endNode = target;
        }
        else if (shapeList.indexOf(target.s('shape')) >= 0) {
            shape = target.s('shape');
            beginNode = target;
            endNode = source;
        }
        
        if (shapeList.indexOf(shape) >= 0) {
            var w = beginNode.getWidth(),
                h = beginNode.getHeight(),
                l = Math.max(w, h) / 2,
                r = Math.min(w, h) / 2;
            if (shape === 'circle') l = r = Math.min(l, r);
            var p = getPointInOval(l, r, beginNode.getPosition(), endNode.getPosition());
            return {
                points: new ht.List([ p, getPoint(endNode, p) ]),
                segments: new ht.List([ 1, 2 ])
            };
        }
            
        var segments, points, endPoint;
        if (source instanceof ht.Shape) {
            segments = source.getSegments();
            points = source.getPoints();
            beginNode = source;
            endPoint = target.getPosition();
            endNode = target;
        }
        else if (target instanceof ht.Shape) {
            segments = target.getSegments();
            points = target.getPoints();
            beginNode = target;
            endPoint = source.getPosition();
            endNode = source;
        }
        
        if (!points) {
            return {
                points: new ht.List([
                    getPoint(source, target.getPosition()),
                    getPoint(target, source.getPosition())
                ]),
                segments: new ht.List([ 1, 2 ])
            };
        }
        
        if (!segments && points) {
            segments = new ht.List();
            points.each(function() { segments.add(2); });
            segments.set(0, 1);
        }
        
        var segLen = segments.size(),
            segV, segNextV, beginPoint, j,
            p1, p2, p3, p4, p, tP1, tP2, tRes,
            curveResolution = beginNode.a('edge.curve.resolution') || 50,
            pointsIndex = 0;
        for (var i = 0; i < segLen - 1; i++) {
            segNextV = segments.get(i + 1);
            if (segNextV === 1) {
                pointsIndex++;
                continue;
            }
                
            p1 = points.get(pointsIndex++);
            
            if (segNextV === 2 || segNextV === 5) {
                p2 = points.get((segNextV === 5) ? 0 : pointsIndex);
                p = pointToInsideLine(p1, p2, endPoint);
                if (!beginPoint || beginPoint.z > p.z)
                    beginPoint = p;
            }
            else if (segNextV === 3) {
                p2 = points.get(pointsIndex++);
                p3 = points.get(pointsIndex);
                tP2 = { x: p1.x, y: p1.y };
                for (j = 1; j <= curveResolution; j++) {
                    tP1 = tP2;
                    tRes = j / curveResolution;
                    tP2 = {
                        x: bezier2(tRes, p1.x, p2.x, p3.x),
                        y: bezier2(tRes, p1.y, p2.y, p3.y),
                    };
                    p = pointToInsideLine(tP1, tP2, endPoint);
                    if (!beginPoint || beginPoint.z > p.z)
                        beginPoint = p;
                }
            }
            else if (segNextV === 4) {
                p2 = points.get(pointsIndex++);
                p3 = points.get(pointsIndex++);
                p4 = points.get(pointsIndex);
                tP2 = { x: p1.x, y: p1.y };
                for (j = 1; j <= curveResolution; j++) {
                    tP1 = tP2;
                    tRes = j / curveResolution;
                    tP2 = {
                        x: bezier3(tRes, p1.x, p2.x, p3.x, p4.x),
                        y: bezier3(tRes, p1.y, p2.y, p3.y, p4.y),
                    };
                    p = pointToInsideLine(tP1, tP2, endPoint);
                    if (!beginPoint || beginPoint.z > p.z)
                        beginPoint = p;
                }
            }
        }
        endPoint = getPoint(endNode, beginPoint);
        return {
            points: new ht.List([
                { x: beginPoint.x, y: beginPoint.y },
                endPoint
            ]),
            segments: new ht.List([ 1, 2 ])
        };
    });
}(window, ht));

 

0
0
分享到:
评论

相关推荐

    基于FPGA的IPMB总线实现方法.pdf

    IPMB(Intelligent Platform Management Bus)总线是ATCA(Advanced Telecom Computing Architecture,即先进的电信计算平台)架构中的关键组件之一,它用于在电信、工业控制和其他系统中实现模块间的管理通信。...

    电子购物网站课程设计

    **网络拓扑图**是指网络中各个节点(例如计算机、路由器、交换机等)的连接方式及其结构布局。它不仅反映了网络中各节点之间的逻辑关系,还体现了它们之间的物理连接方式。 - **逻辑拓扑**:关注数据在节点间的流动...

    网络工程布线实例图

    4. 布线拓扑:常见的网络拓扑结构包括总线型、环形、星形、树形和网状。星形拓扑是最常见且易于管理的,每个设备通过独立的线路连接到中心交换机。 5. 垂直(主干)布线:在大楼内,垂直布线通常采用光纤,将不同...

    电脑网络之网络布线

    5. **网络方案**:设计一个合适的网络方案需要根据实际需求,考虑网络拓扑(星型、环型、总线型、网状等)、带宽需求、冗余策略和故障恢复机制。网络方案应具备高效、稳定、安全和可扩展的特点。 6. **工程设计**:...

    计算机网络,是指利用各种传输介质和设备连接在一起的若干计算机。

    计算机网络还可以按照其物理布局或拓扑结构进行分类,常见的拓扑结构包括总线型、星型、环型、树型和网状等。 - **总线型**:所有节点通过一条共享的主干线连接,信息沿这条主线双向传播。 - **星型**:每个节点...

    计算机网络英语 计算机网络术语

    - **Bus Topology**(总线拓扑结构):一种网络布局方式,所有设备都通过共享电缆(总线)连接在一起。 - **Bursts**(突发):网络中数据流量的短暂高峰。 - **Burst Mode**(突发模式):NetWare网络中的一种数据...

    操作系统基本知识.docx

    7. **网络拓扑**:网络的形状和布局,如总线型、环形、星形、网状等,影响网络的性能和可靠性。 8. **网络设备分类**:通信子网设备如路由器、交换机等,资源子网设备如服务器、工作站等。 9. **局域网特点**:...

    通信工程专业认识实习报告

    分析拓扑图有助于理解网络架构和故障定位。 - **连接类型**:实验室中的设备通过不同的连线方式相连接,如网线、2M线、光纤等,每种连接方式适用于不同类型的数据传输需求。 #### 五、信号传输形式 - **信号类型**...

    硬件工程师需掌握的基础知识

    这包括TCP/IP协议栈、网络拓扑结构以及网络设备的工作原理等。 #### 十三、国内大型通信设备公司硬件研究开发流程 熟悉行业内领先企业的研发流程有助于提高工作效率并减少项目风险。这包括从产品需求分析到最终...

    局域网综合布线设计施工方案.pdf

    - 连接图描绘了布线系统的拓扑结构,包括垂直(主干)布线和水平(工作区)布线,以及管理间子系统的布局。 4. **综合布线系统的组成**: - **工作区子系统**:包括终端设备连接到信息插座的线路,采用 AMP 超五...

Global site tag (gtag.js) - Google Analytics