JTopo交互式拓扑图（基本使用+常用场景）

Jtopo介绍和使用

Jtopo是一款完全基于HTML5 Canvas的数据关系+交互式图形库，可以快速创建一些拓扑关系图、交互式图形软件、监控告警等可视化软件。

为什么需要Jtopo

1. 提高用户体验，软件用户体验的要求不断提高，界面图形化展示、操作往往能给用户带来深刻印象；
2. 容易上手，一般的软件系统图形界面开发需要花费较多的时间和人力，界面不够专业美观影响用户体验。采用jtopo组件来开发软件界面，可以非常简单快速地创建精美、专业、高效的图形化应用，一边提高开发效率、增加客户满意度、提高软件竞争力 ；
3. 行业针对性，可应用到电信、电力、金融、制造、交通、教育等行业的软件开发中 ；

如何使用Jtopo

步骤：

步骤	项目	Value	代码
1	获取 Canvas	canvas	var canvas = document.getElementById(‘canvas’)
2	创建 舞台	stage	var stage = new JTopo.Stage(canvas)
3	创建 场景	scene	var scene = new JTopo.Scene(stage)
4	创建 节点	node	var node = new JTopo.Node(‘hello’)
5	设置 节点坐标	node	node.setLocation(400, 300)
6	将 节点 放入 场景 中	add	scene.add(node)
7	创建 线段	link	var node = new JTopo.Link(‘nodeA’, ‘nodeB’, ‘linkName’)
8	将 线段 放入 场景 中	add	scene.add(link)

场景相关设置

this.stage.dragable = false; // 场景不可拖拽
this.stage.eagleEye.visible = true; // 开启鹰眼，右下角 场景缩略展示

节点相关设置

• 尺寸/透明度/图片

node.setSize(40, 40); // 尺寸 
node.alpha =1; // 透明度 
node.setImage('static/images/text/mao.png'); // 设置图片

• dragable/selected/editAble/rotate属性：

// 设置节点是否可以被拖动/是否被选中/是否可编辑/节点旋转的角度
node