JTopo 框架教程之一:初始JTopo 框架

article/2025/8/15 3:01:22

JTopo 是什么?

JTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。jTopo关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。使用jTopo很简单,可以快速创建一些关系图、拓扑等相关图形化的展示。只要您的数据之间存在有关联关系,都可以使用jTopo来进行人性化、图形化的展示。

jTopo的目标:1.简单好用 2.灵活扩展 3.轻松开发出类似Visio、在线脑图、UML建模等类似工具 4.为大数据可视化提供解决方案。


为什么需要jTopo?

一、随着软件用户体验的要求不断提高,界面图形化展示、操作往往能给用户带来印象深刻、用户体验度提升的同时也会增加对软件更加认可。

二、一般的软件系统图形界面开发需要花费大量的时间和人力,运行效率低下,界面不够专业美观。如果采用jTopo组件来开发软件界面,可以非常简单快速地创建精美、专业、高效的图形化界面,以便提高 开发效率、增加客户满意度、提高软件竞争力
三、基于Html5的拓扑图函数库比较少,好用的更是寥寥无几,好用又跨浏览器平台的目前就只有jTopo。

四、跨行业:可应用到电信、电力、金融、制造、交通、教育等多个行业的软件开发中。


jTopo特点:

一、完全基于HTML5 Canvas开发,始终站在开发者的角度设计,API平易近人、几乎简单到了极致。

二、不依赖任何其他库、执行仅需一个Canvas,不污染你的页面、Dom结构和代码命名空间。

三、功能异常强大、灵活,可扩展性极强(为扩展而生),包装一下,就是一款很专业的图形化软件。

四、体积小,压缩后仅几十KB。

五、性能十分优异,可流畅地展示大量数据(经过专业优化过甚至可以展示几十万、百万级别的数据)

六、免费

不足:目前文档不够详细,主要通过Demo来熟悉。暂时依赖了jQuery库中的一个offset()函数。




JTopo框架示列代码:

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>JTopo 教程</title><script src="js/jquery-1.9.0.js" type="text/javascript"></script><script src="js/jtopo-0.4.2-min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {//画布对象:canvasvar canvas = document.getElementById('canvas');//抽象的舞台对象对应一个Canvas对象,所有图形展示的地方var stage = new JTopo.Stage(canvas);//场景对象var scene = new JTopo.Scene(stage);//背景颜色设置scene.background='#CDC5BF';//节点添加var node = new JTopo.Node("EMC");//设置节点位置node.setLocation(150, 100);//节点填充颜色node.fillcolor='#CD0000';//场景对象添加节点scene.add(node);});</script>
</head>
<body><canvas id="canvas" width="300" height="200"></canvas>
</body>
</html>

效果截图:



补充:JTopo 官网地址;





http://chatgpt.dhexx.cn/article/3sjSAxI2.shtml

相关文章

jtopo的项目实战(一)

前言 初识jtopo是因为项目中需要一个能够动态绘制网络拓扑图的插件&#xff0c;不但能画出基本的网络拓扑结构&#xff0c;还要能够标识出网络设备的类型以及端口设置&#xff0c;甚至是网络连线的流量信息等&#xff0c;基于这个需求查找了很多资料&#xff0c;初步选中了几款…

jtopo的项目实战(二)

话接上回&#xff0c;继续实现jtopo本身不具有的一些功能&#xff0c;有讲的不对的地方&#xff0c;欢迎大家留言提出&#xff0c;我们一起进步&#xff0c;奥利给&#xff0c;还有&#xff0c;码字不易&#xff0c;如果觉得博主写的不错的欢迎打赏哈&#xff01; 2.美化节点之…

vue、jtopo绘制鱼骨图

效果如下图所示&#xff1a; 一、文件目录结构&#xff1a; 二、绘制png的鱼头、鱼尾图片 fish_head.png&#xff1a; fish_tail.png&#xff1a; 三、下载js文件 jquery、jtopo请到官网下载。 四、编写鱼骨图核心文件&#xff1a;MakFishBone.js let MakFishBo…

通过JTopo.js在网页绘制网络拓扑图

项目中遇到要在网页中绘制网络拓扑图的需求&#xff0c;要求节点具备点击、拖拽、缩放等交互功能&#xff0c;并且可以显示/隐藏详细信息&#xff0c;数据是设备实时上报来的。 综上&#xff0c;用画拓扑图的工具画一张固定的图片偷懒显然是不行的&#xff0c;最好是找到一个封…

JTopo添加动态连线

效果如下 先在 JTopo 的 link 原型上定义一个方法 window.requestAnimationFrame window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame JTopo.Link.prototype.drawanimepic functi…

JTopo + Vue 实现自定义拖拽流程图

JTopo Vue 实现自定义拖拽流程图 进入体验效果 进入github 市场上做流程图的插件比较多&#xff0c;这里介绍一种基于canvas编写的js插件&#xff0c;结合vue框架做出精美的流程图 首先搭建vue框架&#xff0c;这里就不做介绍&#xff0c;由于jtopo官方demo里用到了jquery&am…

jtopo连线绘制脉冲动画效果

随着需求的日益精细化&#xff0c;人们越来越多的关注到了画面的美观&#xff0c;单纯的节点间连线已经不满足人们的审美观念了&#xff0c;那么能不能让节点间的连线动起来呢&#xff1f;答案是可以的&#xff0c;老规矩&#xff0c;先上图&#xff0c;再说怎么实现。 同样&am…

jTopo入门 简单实现拓扑图

最近项目中需要绘制拓扑图&#xff0c;于是研究了下绘制拓扑图的组件&#xff0c;jtopo是一款比较简单易上手的开发工具包&#xff0c;分享给大家。 jtopo特点 1、完全基于HTML5 Canvas开发&#xff0c;API平易近人、几乎简单到了极致。 2、不依赖任何其他库、执行仅需一个Ca…

jtopo 实现一键布局

最近很忙、也很懒&#xff0c;一堆烦心事&#xff0c;jtopo后面不准备再深究了&#xff0c;本身东西也不多&#xff0c;做出的新功能&#xff0c;新特效也都写到博客中来了&#xff0c;今天给大家分享最近研究的一个新技能——jtopo一键布局&#xff0c;写给大家、也写给自己。…

jtopo简单实例

原贴地址 http://cn-arthurs.iteye.com/blog/2009345 说明: jtopo是一个基于canvas的js拓扑图形组件.比canvasexpress容易多了. 可以方便地加点,加连线,加鼠标事件,拖曳. 号称跨浏览器,不过实际上不支持ie678,加上excanvas.js也没用,除非像canvasexpress那样使用chrome插件. …

Vue — jTopo

近期在Vue项目中使用jTopo来制作集群节点拓扑图&#xff0c;官网http://www.jtopo.com/ 使用vue-cli搭建的模块化开发项目&#xff0c;使用第三方库最好的方式就是通过npm install xxx安装&#xff0c;然后在项目 里import xxx来使用&#xff1b;但是在JTopo官网上并没有发现有…

【Vue引入JTopo及所遇到的问题】

Vue引入JTopo及所遇到的问题 前言一、方案选型二、使用步骤三、总结 前言 项目过程中总是会遇到稀奇古怪的需求&#xff0c;这不&#xff0c;咱老大又让我画一个系统拓扑图放在首页&#xff0c;要求部分数据需从后端获取&#xff0c;动态展示在页面上。对于一个后端人猿来说&a…

Vue+JTopo(一)

1.下载js jtopo 更新下载 (不知道为什么网站被封禁了……在这提供下我现在用的 jtopo-1.4.4_trial-esm-min.js) 链接&#xff1a;https://pan.baidu.com/s/18V1HKwAuxzWM19RD4axGOg 提取码&#xff1a;0304 2.引用 文件放在public/js文件夹下&#xff0c;在index.hml内引用。…

jTopo(一)

jTopo(一) 一、jTopo是什么 jTopo&#xff08;Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。 jTopo关注于数据的图形展示&#xff0c;它是面向开发人员的&#xff0c;需要进行二次开发。 使用jTopo很简单&#xff0c;可以快速…

windows10下安装MSYS2+MinGW64

1.下载msys2&#xff0c;官方地址&#xff1a;http://www.msys2.org/&#xff0c;这里选择64位的安装器 2.安装完成之后&#xff0c;先别启动msys2&#xff0c;在 安装根目录/etc/pacman.d/ 下找到mirrorlist.mingw32、mirrorlist.mingw64和mirrorlist.msys并进行修改。 mirr…

Win10 下安装 MSYS2

什么是 MSYS2 MSYS2 &#xff08;Minimal SYStem 2&#xff09; 是一个MSYS的独立改写版本&#xff0c;主要用于 shell 命令行开发环境。同时它也是一个在Cygwin &#xff08;POSIX 兼容性层&#xff09; 和 MinGW-w64&#xff08;从"MinGW-生成"&#xff09;基础上…

【msys2】使用msys2下载工具的旧版本

背景 苯人在计组实验中使用了msys2来安装verilator工具&#xff0c;结果最新版本的verilator有bug&#xff0c;几经探索找到了利用msys2下载旧版本工具的方法&#xff08;还可以将现有工具更新为旧版本&#xff09; 步骤 现以安装旧版本的verilator为例讲解方法。 这是msys…

【Window环境下使用MSYS2搭建CMake + MinGW环境】

目录标题 安装CMakecmake 测试 MSYS2下载MSYS2安装MSYS2修改软件下载源 MSYS2下安装MinGW配置MinGW配置到环境变量 hello world测试 安装CMake Cmake下载地址:https://cmake.org/download/,下一个windows压缩包就好了&#xff0c;因为我比较喜欢自己来配置&#xff0c;免得不知…

用MSYS2安装mingw

文章目录 前言卸载mingw安装MSYS2 前言 安装MSYS2的原因是&#xff0c;在windows安装protobuf时&#xff0c;想用mingw编译protobuf的库&#xff0c;而protobuf的官方手册只给出一句&#xff1a; To build from source using Cygwin or MinGW, follow the Unix installation i…

【VSCode】【msys2】VS Code + msys2配置Windows下C/C++开发环境

【VSCode】【msys2】VS Code msys2配置Windows下C/C开发环境 一、Msys2配置 1. 下载msys2, 网址&#xff1a;https://www.msys2.org/ 2. 安装msys2-x86_64-xxxx.exe 这里没什难度&#xff0c;记住安装路径就好&#xff0c;一路next就装好了。 3. 安装gcc 3.1. 更新msys2…