共计 2640 个字符,预计需要花费 7 分钟才能阅读完成。
最近我的项目中须要绘制拓扑图,于是钻研了下绘制拓扑图的组件,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
正文完