前端开发框架总结之利用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';

                scene.add(link);

                link.addEve