jTopo 拓扑图(入门)

jTopo是我在17年用到过的一款绘制拓扑图的插件，该插件使用yH5 Canvas进行绘制元素以及操作元素，优点在于可实现数据的依赖关系图形化处理，缺点就是使用canvas有时候会出现一些功能难以实现。除此之外，像现在市面上比较流行的Qunee拓扑图插件，如果你的资金准备充足建议使用这款产品，因为该产品的api做的比较详尽，同时ui效果也相比jTopo要好的多，但是如果你想免费使用拓扑图插件的话，jTopo则可以暂时列为你的首选。

废话不多说了，jTopo的官网:http://www.jtopo.com/，下载下最新的js:http://www.jtopo.com/download.html -> jtopo-0.4.8-min.js

官网入门demo1 元素节点

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{background: red;}</style></head><body><canvas id="canvas" width="300" height="300"></canvas><script type="text/javascript" src="js/jTopo/jtopo-0.4.8-min.js" ></script><script type="text/javascript">var canvas = document.getElementById('canvas'); var stage = new JTopo.Stage(canvas); // 创建一个舞台对象var scene = new JTopo.Scene(stage); // 创建一个场景对象var node = new JTopo.Node("Hello");    // 创建一个节点node.setLocation(100,100);    // 设置节点坐标                    scene.add(node); // 放入到场景中</script></body>
</html>

官网入门demo2 图片节点

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{background: red;}</style></head><body><canvas id="canvas" width="300" height="300"></canvas><script type="text/javascript" src="js/jTopo/jtopo-0.4.8-min.js" ></script><script type="text/javascript">var canvas = document.getElementById('canvas'); var stage = new JTopo.Stage(canvas); // 创建一个舞台对象var scene = new JTopo.Scene(stage); // 创建一个场景对象var node = new JTopo.Node("Hello");    // 创建一个节点node.setLocation(100,100);    // 设置节点坐标                    node.rotate = Math.random(); // 旋转角度node.scaleX = Math.random(); // 水平方向的缩放node.scaleY = Math.random(); // 垂直方向的缩放node.alpha = Math.random();  // 透明度node.setImage('img/lbxx.jpeg'); // 设置图片scene.add(node); // 放入到场景中</script></body>
</html>

官方入门demo3 连线

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{background: red;}</style></head><body><canvas id="canvas" width="300" height="300"></canvas><script type="text/javascript" src="js/jTopo/jtopo-0.4.8-min.js" ></script><script type="text/javascript">var canvas = document.getElementById('canvas'); var stage = new JTopo.Stage(canvas); // 创建一个舞台对象var scene = new JTopo.Scene(stage); // 创建一个场景对象var nodeFrom = new JTopo.Node("from");nodeFrom.setLocation(50,50);scene.add(nodeFrom);var nodeTo = new JTopo.Node("To");nodeTo.setLocation(100,100);scene.add(nodeTo);var link = new JTopo.Link(nodeFrom, nodeTo); // 增加连线
            scene.add(link);</script></body>
</html>

转载于:https://www.cnblogs.com/xiaohualu/p/10383801.html

jTopo 拓扑图(入门)相关推荐

zabbix——拓扑图入门
zabbix的拓扑图是动态的,当你配置好拓扑图后,一旦网络中那个节点出现了问题,很容易在拓扑图中看出问题具体出在哪个位置. 新建一个拓扑图我们常用到的图标有rack(机柜)还有rackmountab ...
jtopo 拓扑图的简单使用
官网 jtopo 一个好用的交互式HTML5图形软件下载 jtopo-npm安装包-Javascript文档类资源-CSDN下载引入将 jtopo-1.3.8_trial-esm-min.js ...
多页面应用画拓扑图利器-jTopo
多页面应用画拓扑图利器-jTopo 文章目录多页面应用画拓扑图利器-jTopo 前言入门 api 结点连接其它解决数据问题前言 jTopo主要应用在多页面web网站上,一款完全基于HTML ...
Eureke服务入门就这一篇就够了
什么是Eureka Eureka服务发现拓扑图入门Demo microservice-eureka-server 配置启动类效果 microservice-provider-user 依赖配 ...
jTopo入门简单实现拓扑图
最近项目中需要绘制拓扑图,于是研究了下绘制拓扑图的组件,jtopo是一款比较简单易上手的开发工具包,分享给大家. jtopo特点 1.完全基于HTML5 Canvas开发,API平易近人.几乎简单到了 ...
html 拓扑图开源,GitHub - pylixm/zJTopo: 开源拓扑图工具类jTopo的扩展,jtopo是一个不错的拓扑图,基于html5 canvas,功能强大...
zJTopo 开源拓扑图工具类jTopo的扩展说明该项目依赖于开源拓扑图工具类jTopo,详情:JTopo 联系本人:799378666@qq.com ###扩展api简介 ///获取该场景下所有 ...
php画网络拓扑图,jtopo js插件绘制网络拓扑图
一.实现的功遇新是直朋能到能 1.拓扑的基遇新是直朋能到分览本绘制 2.拓扑放射遇新是直朋能到分览性布局 3.多级拓扑遇新是直朋能到分览的实现 4.下级拓扑节点的隐藏与新直能分支调二浏页器朋代说,展现 ...
html5拓扑图图入门,如何使用HTML5 Canvas动态的绘制拓扑图
如何使用HTML5 Canvas动态的绘制拓扑图使用HTML5 Canvas动态的绘制拓扑图: HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( ...
JTopo绘制网络拓扑图
JTopo绘制网络拓扑图 1.因为公司项目的需要,研究下JTopo开源框架.如果对JTopo不了解的话,建议搜索下, 篇幅有限,此处不描述了. 2.为了各位不走弯路,这里描述下目前JTopo的缺点.目 ...
快速开发基于 HTML5 网络拓扑图应用--入门篇（二）
上一篇我们绘制了一个 graphView 场景,在场景之上通过 graphView.dm() 获取数据容器,并通过 graphView.dm().add() 函数添加了两个 Node 节点,并通过 s ...

jTopo 拓扑图(入门)

jTopo 拓扑图(入门)相关推荐

最新文章

热门文章