jtopo简单实例
来源:互联网 发布:天津排名优化 编辑:程序博客网 时间:2024/05/24 00:20
原贴地址
http://cn-arthurs.iteye.com/blog/2009345
说明:
jtopo是一个基于canvas的js拓扑图形组件.比canvasexpress容易多了.
可以方便地加点,加连线,加鼠标事件,拖曳.
号称跨浏览器,不过实际上不支持ie678,加上excanvas.js也没用,除非像canvasexpress那样使用chrome插件.
注意在IE9下,第一行的<!DOCTYPE html>必不可少
网络拓扑图DEMO
背景
在一个项目中,需要展示模型结构,模型是有层级结构的,而且底层的模型可能被上层的多个模型所引用。
如果希望在前台展示模型的依赖关系,使用Tree结构肯定是不够直观的,而且数据有一些混乱。
因此,在技术讨论的时候,提出使用网络拓扑结构展示模型及子模型的关系。特此验证。
组件工具
JTopo(http://www.jtopo.com/)
需求
1.可以显示多个节点图标和节点名称
2.可以对节点进行连线,显示递进关系
3.可以添加对节点单击、双击、右击的事件处理
截图
代码
- <!DOCTYPE html>
- <html>
- <head>
- <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
- <title>jTopo Demo</title>
- <linkrel="stylesheet"type="text/css"href="../css/base.css">
- <linkhref="../css/jquery.snippet.min.css"rel="stylesheet">
- <scriptsrc="../js/jquery.js"></script>
- <scripttype="text/javascript"src="js/snippet/jquery.snippet.min.js"></script>
- <scripttype="text/javascript"src="js/excanvas.js"></script>
- <scripttype="text/javascript"src="js/jtopo-min.js"></script>
- <scriptid='code'>
- $(document).ready(function(){
- var canvas =document.getElementById('canvas');
- var stage =new JTopo.Stage(canvas);
- var scene =new JTopo.Scene(stage);
- scene.setBackground('./img/bg.jpg');
- function addLink(form,to){
- var l =new JTopo.ArrowsLink(form, to);
- l.style.lineWidth =3;
- l.style.lineJoin ='round';
- scene.add(l);
- };
- var node =new JTopo.Node("总模型");
- node.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node);
- var node1 =new JTopo.Node("模型1");
- node1.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node1);
- var node2 =new JTopo.Node("模型2");
- node2.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node2);
- var node3 =new JTopo.Node("模型3");
- node3.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node3);
- var node4 =new JTopo.Node("模型4");
- node4.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node4);
- var node5 =new JTopo.Node("模型5");
- node5.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node5);
- var node6 =new JTopo.Node("模型6");
- node6.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node6);
- var node7 =new JTopo.Node("模型7");
- node7.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node7);
- var node8 =new JTopo.Node("模型8");
- node8.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node8);
- var node9 =new JTopo.Node("模型9");
- node9.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node9);
- addLink(node1,node);
- addLink(node2,node1);
- addLink(node3,node2);
- addLink(node4,node3);
- addLink(node5,node4);
- addLink(node6,node);
- addLink(node7,node6);
- addLink(node8,node7);
- addLink(node9,node8);
- addLink(node8,node5);
- stage.play(scene);
- });
- </script>
- </head>
- <body>
- <center>
- <canvaswidth="800"height="500"id="canvas"style=" background-color:#EEEEEE; border:1px solid #444;">
- </canvas>
- </center>
- </body>
- </html>
1 0
- jtopo简单实例
- jtopo
- jTopo
- jTopo插件
- JTopo 框架教程之一:初始JTopo 框架
- jtopo实现导出图片
- Jtopo 拓扑图
- Jtopo入门Demo
- jtopo文字换行
- 拓扑图框架Jtopo
- jtopo实现路程图
- jtopo 比例尺功能
- jtopo节点文字换行
- java topo: 开源jtopo框架
- JTopo绘制网络拓扑图
- 改写jtopo滚轮缩放代码
- jtopo 告警 Alarm 换行 demo
- JQuery实例Ajax 简单实例
- 关于QT5 自定义设计师界面属性操作相关文章 - 以备后用
- 快速产生一个随机数组,并且数组里面的数字唯一
- 使用MultFile.js实现多文件上传
- Bitcoin相关术语
- 想做好SEO精在持之以恒
- jtopo简单实例
- plsql登陆时报的错误make sure you have the 32 bits oracle client installed或者initialization error could n解决方案
- Android - 使用Intent来启动Activity
- Spring jdbctemplate
- Eclipse设置软tab(用4个空格字符代替)及默认utf-8文件编码(unix)
- 响应式菜单
- SharedPrefences存储方式及使用模块
- 《编程之美》:1.2—中国象棋将帅问题
- /etc这个目录是什么东西的缩写