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><divstyle="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

jTopo入门简单实现拓扑图相关推荐

JMeter压测入门简单使用
JMeter压测入门简单使用. 下载地址:https://mirrors.tuna.tsinghua.edu.cn/apache//jmeter/binaries/apache-jmeter-5.2. ...
第一讲 Matlab/Simulink入门——简单系统模型的Simulink仿真
第一讲 Matlab/Simulink入门--简单系统模型的Simulink仿真 1.模型的数学表达式 2.建立系统模型 2.1.选择模块 2.2.参数设置 3.系统仿真 1.模型的数学表达式 y = ...
最基础的postman入门简单使用教程
最基础的postman入门简单使用教程 1.首先第一步是下载下载地址:链接:https://pan.baidu.com/s/18qxlLWs4z51SVlW7TpwVyQ 提取码:9802 ...
AD17入门简单教程（二）
AD17入门简单教程紧接着上一片文章,紧接着介绍下面的内容文末附视频链接以及C8T6整个工程. 第三部分 PCB 通常对于我们新手来说这一个步骤是一个难点,因为进入到这个界面我们不知道到底要是干什 ...
ArtCAM入门简单教程(一)——矢量雕刻
记录过去,奋斗现在,展望未来 (给未来即将结束的工作的'存档') ArtCAM入门简单教程一.矢量雕刻前言: 菜鸟的教学,介绍最简单.常用的基本功能,希望能帮助方便零基础的人编写简单的数控加工程序 ...
ArtCAM入门简单教程(二)——浮雕
记录过去,奋斗现在,展望未来 (给未来即将结束的工作的'存档') ArtCAM入门简单教程二.浮雕前言:这不是个很专业的浮雕设计教程,不过是很简单即可实现的入门教程,而更深入的浮雕学习建议查找更全 ...
Android入门简单吗
手机可以说是人们形影不离的东西,出门必备的就是手机,随着安卓智能的快速发展,手机已经成为聊天.阅读.支付和拍照的必备工具.手机的大热也给Android程序员带来了未来.那Android入门简单吗? A ...
Linux基础入门,简单讲解
Linux基础入门,简单讲解涵盖内容:计算机组成与Linux操作系统概论任务要求:大概了解计算机的主要组成部件,明白计算机磁盘分区方式,常用的计算单元换算以及LINUX是什么.有什么特点即可. 文 ...
【机器学习】快速入门简单线性回归 (SLR)
简单线性回归图(青色散点为实际值,红线为预测值) statsmodels.api.statsmodels.formula.api 和 scikit-learn 的 Python 中的 SLR 今天云朵 ...

jTopo入门简单实现拓扑图

jtopo特点

下载jtopo

jQuery

举例代码

jTopo入门简单实现拓扑图相关推荐

最新文章

热门文章

jTopo入门 简单实现拓扑图

jtopo特点

下载jtopo

jQuery

举例代码

jTopo入门 简单实现拓扑图相关推荐

最新文章

热门文章

jTopo入门简单实现拓扑图

jTopo入门简单实现拓扑图相关推荐