前端开发框架总结之利用Jtopo实现网络拓扑功能（二）

最新推荐文章于 2025-10-04 15:23:30 发布

原创

最新推荐文章于 2025-10-04 15:23:30 发布 · 置顶 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JTopo #连线

本文介绍了在前端开发中利用JTopo框架实现网络拓扑连线的优化交互方式，推荐使用双击结点启动和结束连线操作。同时，讲解了如何添加动态跟随鼠标的虚拟连线以及处理位置变化的问题。此外，还探讨了在拓扑图中插入文本节点的注意事项，包括位置调整、文本内容修改及其与缩放、拖拽的协调。

前端开发框架总结之利用Jtopo实现网络拓扑功能（二）

上文我们讲了一些拓扑结点生成的实际场景设计和实现思路以及一些关键技术细节。本文我们继续我们的拓扑管理开发之旅。

拓扑连线

给拓扑结点添加连线是拓扑管理中必不可少的操作，官网的例子中也有相应的例子。但是如果我们完全按照这个例子的操作方式用到我们项目中的话，其实是很不可取的，例子中是单击结点进行连线，但是实际操作过程中很多时候单击只是为了选中结点而已，然后进行结点的拖拽，拉伸等操作。另外单击操作也会和双击等操作混在一起，导致连线操作交互体验很差。本人在这里推荐一种交互方式供大家参考：我们可以把双击结点的操作定义为连线的触发动作，把双击后对结点的单击动作作为连线的结束动作，经实际操作体验是很不错的。

官方提供的API中只有生成拓扑连线的方法。我们想要实现在连线过程中线的终点跟随鼠标移动效果，其实就是不断的设置连线的一个Node的position。这个场景的实现过程中有三个关键点，1、记录连线起点变量的控制。2、虚拟连线的控制，包括终点位置的设置和虚拟连线的删除等。（为了视觉体验优化，可以设置此虚拟连线为虚线）。3、scene的mousemove事件的监听。

js代码片段

    function nodeDbClick(e){
        console.log("nodeDbClick");

        beginNode = e.target;
        tempNodeS.setLocation(beginNode.x + beginNode.width*0.5, beginNode.y + beginNode.height*0.5);
        tempNodeE.setLocation(e.x, e.y);
        scene.add(tempLink);
    }

    function nodeClick(e){
        console.log("nodeClick");

        if(beginNode){
            if(beginNode != e.target){
                var link = new JTopo.Link(beginNode, e.target);

                link.strokeColor = '181,190,196'