jtopo简单实例

原贴地址

http://cn-arthurs.iteye.com/blog/2009345

说明:

 jtopo是一个基于canvas的js拓扑图形组件.比canvasexpress容易多了.

 可以方便地加点,加连线,加鼠标事件,拖曳.

 号称跨浏览器,不过实际上不支持ie678,加上excanvas.js也没用,除非像canvasexpress那样使用chrome插件.

注意在IE9下,第一行的>必不可少

 

网络拓扑图DEMO

背景

在一个项目中,需要展示模型结构,模型是有层级结构的,而且底层的模型可能被上层的多个模型所引用。

如果希望在前台展示模型的依赖关系,使用Tree结构肯定是不够直观的,而且数据有一些混乱。

因此,在技术讨论的时候,提出使用网络拓扑结构展示模型及子模型的关系。特此验证。

组件工具

JTopo(http://www.jtopo.com/)

需求

1.可以显示多个节点图标和节点名称

2.可以对节点进行连线,显示递进关系

3.可以添加对节点单击、双击、右击的事件处理

截图


jtopo简单实例_第1张图片

代码

Html代码 复制代码 收藏代码
  1. >
  2. <html>
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
  5. <title>jTopo Demotitle>
  6. <linkrel="stylesheet"type="text/css"href="../css/base.css">
  7. <linkhref="../css/jquery.snippet.min.css"rel="stylesheet">
  8. <scriptsrc="../js/jquery.js">script>
  9. <scripttype="text/javascript"src="js/snippet/jquery.snippet.min.js">script>
  10. <scripttype="text/javascript"src="js/excanvas.js">script>
  11. <scripttype="text/javascript"src="js/jtopo-min.js">script>
  12. <scriptid='code'>
  13. $(document).ready(function(){
  14. var canvas =document.getElementById('canvas');
  15. var stage =new JTopo.Stage(canvas);
  16. var scene =new JTopo.Scene(stage);
  17. scene.setBackground('./img/bg.jpg');
  18. function addLink(form,to){
  19. var l =new JTopo.ArrowsLink(form, to);
  20. l.style.lineWidth =3;
  21. l.style.lineJoin ='round';
  22. scene.add(l);
  23. };
  24. var node =new JTopo.Node("总模型");
  25. node.setLocation(scene.width * Math.random(), scene.height * Math.random());
  26. scene.add(node);
  27. var node1 =new JTopo.Node("模型1");
  28. node1.setLocation(scene.width * Math.random(), scene.height * Math.random());
  29. scene.add(node1);
  30. var node2 =new JTopo.Node("模型2");
  31. node2.setLocation(scene.width * Math.random(), scene.height * Math.random());
  32. scene.add(node2);
  33. var node3 =new JTopo.Node("模型3");
  34. node3.setLocation(scene.width * Math.random(), scene.height * Math.random());
  35. scene.add(node3);
  36. var node4 =new JTopo.Node("模型4");
  37. node4.setLocation(scene.width * Math.random(), scene.height * Math.random());
  38. scene.add(node4);
  39. var node5 =new JTopo.Node("模型5");
  40. node5.setLocation(scene.width * Math.random(), scene.height * Math.random());
  41. scene.add(node5);
  42. var node6 =new JTopo.Node("模型6");
  43. node6.setLocation(scene.width * Math.random(), scene.height * Math.random());
  44. scene.add(node6);
  45. var node7 =new JTopo.Node("模型7");
  46. node7.setLocation(scene.width * Math.random(), scene.height * Math.random());
  47. scene.add(node7);
  48. var node8 =new JTopo.Node("模型8");
  49. node8.setLocation(scene.width * Math.random(), scene.height * Math.random());
  50. scene.add(node8);
  51. var node9 =new JTopo.Node("模型9");
  52. node9.setLocation(scene.width * Math.random(), scene.height * Math.random());
  53. scene.add(node9);
  54. addLink(node1,node);
  55. addLink(node2,node1);
  56. addLink(node3,node2);
  57. addLink(node4,node3);
  58. addLink(node5,node4);
  59. addLink(node6,node);
  60. addLink(node7,node6);
  61. addLink(node8,node7);
  62. addLink(node9,node8);
  63. addLink(node8,node5);
  64. stage.play(scene);
  65. });
  66. script>
  67. head>
  68. <body>
  69. <center>
  70. <canvaswidth="800"height="500"id="canvas"style=" background-color:#EEEEEE; border:1px solid #444;">
  71. canvas>
  72. center>
  73. body>
  74. html>

 

你可能感兴趣的:(web编程,javascript)