jTopo入门 简单实现拓扑图

最近项目中需要绘制拓扑图，于是研究了下绘制拓扑图的组件，jtopo是一款比较简单易上手的开发工具包，分享给大家。

jtopo特点

1、完全基于HTML5 Canvas开发，API平易近人、几乎简单到了极致。
2、不依赖任何其他库、执行仅需一个Canvas。
3、体积小，压缩后仅几十KB。
5、免费！

下载jtopo

大家可以去官网自行下载 http://www.jtopo.com/download/jtopo-0.4.8-min.js，目前版本是0.4.8，官网有API文档和案例。

jtopo官网地址：http://www.jtopo.com/

jQuery

目前我是vue项目中引入的jtopo，jtopo只支持在jQuery语言编写，需要项目中引入jQuery，不是vue项目的可以自行去官网下载jQuery.js，vue引入jQuery可参考https://blog.csdn.net/JQdazhuang/article/details/107152192

举例代码

html代码：

<template>
  <div
    style="position: relative; width: 100%; height: 100%; margin: auto"
    id="topo_content"
  >
    <canvas id="topology-canvas" width="1000" height="600"></canvas>
  </div>
</template>

js代码：

var canvas = document.getElementById("topology-canvas");
        var stage = new JTopo.Stage(canvas);//创建一个画布

        var scene = new JTopo.Scene(stage);//创建一个背景

        _this.scene = scene;
        var childs = topoData;
        for (let i in childs) {
          var a = childs[i];
          if (a.elementType == "node") {//如果是拓扑节点
            //节点
            var node = new JTopo.Node(a.text);
            node.setLocation(a.x, a.y);
            node.setImage("/static/img/" + a.nodeImage, true);
            node.fontColor = "0,0,0";
            node.nodeId = a.nodeId;
            node.nodeType = a.nodeType;
            node.nodeImage = a.nodeImage;
            node.scaleX = a.scaleX;
            node.scaleY = a.scaleY;
            node.devIp = a.devIp;
            node.textPosition = a.textPosition;
            if (node) {
              node.alarm = a.alarm;
              node.alarmColor = "255,0,0";
              node.alarmAlpha = 0.5;
            }
            scene.add(node);
          } else if (a.elementType == "link") {
            //如果是连线
            var link = null;
            if (link == null) {
              var nodes = stage.find("node");
              var nodeA, nodeZ;
              if (a.nodeSrc && a.nodeDst) {
                nodes.forEach(function (nodeElement) {
                  if (nodeElement.elementType == "node") {
                    if (nodeElement.nodeId == a.nodeSrc) {
                      nodeA = nodeElement; //起点
                    }
                    if (nodeElement.nodeId == a.nodeDst) {
                      nodeZ = nodeElement; //终点
                    }
                  }
                });
              }

              //绘制折线
              var c = null;
              if (nodeA && nodeZ) {
                // 折线和直线绘制
                if (a["lineType"] == "line") {
                  c = new JTopo.Link(nodeA, nodeZ);
                  c.lineType = "line";
                }
                if (a["lineType"] == "foldLine") {
                  c = new JTopo.FoldLink(nodeA, nodeZ);
                  c.bundleOffset = 40;
                  c.direction = a.direction;
                  c.lineType = "foldLine";
                }
                if (a["lineType"] == "flexLine") {
                  c = new JTopo.FlexionalLink(nodeA, nodeZ);
                  c.offsetGap = 40;
                  c.direction = a.direction;
                  c.lineType = "flexLine";
                }
                if (a["lineType"] == "curveLine") {
                  c = new JTopo.CurveLink(nodeA, nodeZ);
                  c.lineType = "curveLine";
                }
                c.alpha = 1;
                c.shadow = false;
                c.font = "12px Consolas";
                c.arrowsRadius = 0;
                c.lineWidth = 1.5;
                c.bundleGap = 0;
                c.eagleEyeVsibleDefault = false;

                c.id = a.id;
                c.strokeColor = a.strokeColor;
                c.lineClass = a.lineClass;
                c.nodeSrc = nodeA.nodeId;
                c.nodeDst = nodeZ.nodeId;
                c.localDevId = a.localDevId;
                c.localDevIp = a.localDevIp;
                c.localDevIfindex = a.localDevIfindex;
                c.localDevIfname = a.localDevIfname;
                c.remoteDevId = a.remoteDevId;
                c.remoteDevIp = a.remoteDevIp;
                c.remoteDevIfindex = a.remoteDevIfindex;
                c.remoteDevIfname = a.remoteDevIfname;
                scene.add(c);
              }
            } else {
              link.strokeColor = a.strokeColor;
            }
          }
        }

代码运行效果图如下：

不懂可问,留言就行

具体完整代码可看我的码云，自行下载运行即可 https://gitee.com/niexiaohua/JTopo