关于vue.js:jTopo入门-简单实现拓扑图

2次阅读

共计 2640 个字符，预计需要花费 7 分钟才能阅读完成。

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

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

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

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

目前我是 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;}
          }
        }

代码运行效果图如下：

不懂可留言征询