jTopo 功能完善

最近项目中需要一个组网的关系图。通过调研发现jTopo很接地气,国产,能满足需求。在实际应用中,发现作者提供的stage.toJson() ,JTopo.createStageFromJson()这个两个API存在缺陷,stage.tojson()不能把jTopo.Link保存,同时jTopo.Node的背景图不能保存。通过JTopo.createStageFromJson()创建jTopo.Stage时不能创建成功。被逼无奈只好修改源码。通过JS跟踪调试,辛苦了好几个晚上,功夫不负有心人,最终完成了项目需要的效果。本项目是在官网jtopo-0.4.8-min.js版本集成上完成的。官网地址http://www.jtopo.com/api.html#,如果有侵权请作者联系我。

 

包含的功能有双击添加节点,点击两个节点添加连线,两个节点只能有一个连线。节点包含背景图片。背景图片能输出到json结果里。可以通过保存的json还原布局结果。同时可以删除节点,删除连线。连线可以修改成原生自带的箭头连线。可以把生成好的json保存到后台数据库里。

 

后续可以增加节点的报警功能,节点是否正常等效果。左边的节点可以增加。支持更复杂的效果。

 

最终效果如下:

 

源码提供关注公众号发送消息“jTopo.源码”获取。

 

2020-11-26

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jTopo是一个开源的基于HTML5 Canvas的JavaScript拓扑图形绘制库。jTopo在线编辑器是基于jTopo库开发的一个能够实现在线拓扑图编辑的工具。 jTopo在线编辑器具有以下特点和功能: 1. 界面友好:jTopo在线编辑器拥有简单美观的界面设计,用户可以通过直观的操作进行拓扑图的编辑。 2. 功能丰富:jTopo在线编辑器提供了多种拓扑图元素,包括节点、连线、分组等,用户可以通过拖拽、缩放、编辑等功能进行定制化拓扑图的创建和修改。 3. 自定义样式:jTopo在线编辑器支持用户自定义拓扑图元素的样式,包括节点的形状、大小、颜色、边框等,用户可以根据实际需求自由调整拓扑图的外观。 4. 支持交互:jTopo在线编辑器可以绑定各种事件,实现用户与拓扑图的交互,如拖拽节点、点击节点等,可根据事件触发执行自定义的函数。 5. 数据存储:jTopo在线编辑器提供了数据导入和导出的功能,用户可以将拓扑图的数据保存为JSON格式或导入已有的拓扑图数据进行编辑。 6. 浏览器兼容性:jTopo在线编辑器兼容主流的浏览器,并在移动设备上也能够良好地运行。 jTopo在线编辑器通过其强大的功能和便捷的操作,为用户提供了一个方便快捷的拓扑图编辑工具,可广泛应用于网络拓扑、流程图、组织结构图等领域,帮助用户简化拓扑图的创建和修改过程,提升工作效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值