jtopo简单实例

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量1.8w 收藏 2
点赞数 1
分类专栏： web编程 javascript 文章标签： jtopo javascript

原贴地址

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.可以添加对节点单击、双击、右击的事件处理

截图



代码

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

 

laputa73
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
JS绘制拓扑图示例 （JTopo）
baliang9989的博客
07-13 912
目前在做的项目是渔政的监控，需要用到的设备包括雷达，光电，站点信息等，想要更直观的展现设备之间的连接关系和状态信息，这时候需要画一张拓扑图 在做拓扑图之前，首先要学习一下，html里面另一个比较常用的标签--<Canvas> <canvas> 标签定义图形，通过脚本 (通常是JavaScript)来完成，意思即，canvas只是提供一个容器，元素本身是没有绘...
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1500
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
jtopo拓扑图实例代码
05-11
该资源是一个开发小实例，仅供参考。有什么不懂的，进入http://www.jtopo.com查看api和相关的介绍
遗传算法简单实例
12-11
遗传算法简单实例，遗传算法简单实例课件，遗传算法简单实例PPT
jtopo自己写的完整例子，下载就能运行
08-17
jtopo的实用案例，根据数据格式即可实现多层级
jTopo 入门 简单实例-附件资源
03-05
jTopo 入门 简单实例-附件资源
jTopo(一)
qq_32436781的博客
05-06 1535
jTopo(一) 一、jTopo是什么 jTopo（Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。 jTopo关注于数据的图形展示，它是面向开发人员的，需要进行二次开发。 使用jTopo很简单，可以快速创建一些关系图、拓扑等相关图形化的展示。只要您的数据之间存在有关联关系，都可以使用jTopo来进行人性化、图形化的展示。 二、基础讲解 jtopo的核心对象有Stage、Layer、Canvas、Node、Link, 关系如下图
vue使用jtopo实现拓扑图
weixin_43656393的博客
08-25 2436
vue使用jtopo实现拓扑图
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件_html5教程技巧
starsliu
06-29 1286
代码如下: var node = new JTopo.Node("Hello");  node.setLocation(409, 269);  node.mousedown(function(event){  if(event.button == 2){  node.text = '按下右键';  }else if(event.button == 1){  node.text
jtopo 实现一键布局
andsll的专栏
08-30 1956
最近很忙、也很懒，一堆烦心事，jtopo后面不准备再深究了，本身东西也不多，做出的新功能，新特效也都写到博客中来了，今天给大家分享最近研究的一个新技能——jtopo一键布局，写给大家、也写给自己。 因为jtopo天然不支持节点对其，所以很不友好，但甲方往往需要的是理想化的操作，所以一键布局显得尤为必要，还是老规矩，先看效果，再说实现。 这里完全不需要手动去拖动节点，只需要点击按钮，即可实现自动布局成树形结构，用到的思想就是递归函数，会的小伙伴们可...
Vue+JTopo（一）
tutouxiaoyaonie的博客
10-13 1576
Vue+JTopo学习（一）
jtopo最简单的例子
11-04
jtopo拓扑图javascript框架 最简单的例子 单个节点
html5绘图工具 jtopo 完整示例
01-19
html5绘图工具 基于 HTML5 的 Canvas 技术，拓扑图是电力和电信的叫法
Jtopo代码实例
04-27
自己写的拓扑实例，可以看下，html点开就可以运行
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 991
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 576
官网代码（在取消选中状态的时候不生效）
一个小时学习javaScript
weixin_43064364的博客
04-20 914
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
vue 实现级联选择器功能
清音的博客
04-22 483
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 381
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
android studio简易实例
03-16
Android Studio是一款用于开发Android应用程序的集成开发环境。下面是一个简单的Android Studio实例： 1. 创建一个新项目：打开Android Studio，选择“Start a new Android Studio project”，填写应用程序名称、包名和项目位置等信息，然后点击“Finish”按钮。 2. 添加一个按钮：在“activity_main.xml”文件中，添加一个Button控件，并设置其属性，如文本、大小、位置等。 3. 添加一个点击事件：在“MainActivity.java”文件中，为Button控件添加一个点击事件，例如： Button button = (Button) findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 在此处添加点击事件的代码 } }); 4. 运行应用程序：点击Android Studio工具栏中的“Run”按钮，选择一个模拟器或连接一个Android设备，然后等待应用程序运行。 以上就是一个简单的Android Studio实例，你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值