目前在做的项目是渔政的监控，需要用到的设备包括雷达，光电，站点信息等，想要更直观的展现设备之间的连接关系和状态信息，这时候需要画一张拓扑图

在做拓扑图之前，首先要学习一下，html里面另一个比较常用的标签--<Canvas>

<canvas> 标签定义图形，通过脚本 (通常是JavaScript)来完成，意思即，canvas只是提供一个容器，元素本身是没有绘图能力的，真正形成图形，还是需要通过脚本语言去绘制

知道了这个标签的含义及用法之后，开始网络拓扑图的绘制

首先找到一个开源且免费的拓扑图形包，Jtopo，前面我写了一个JTopo的使用心得，里面写了两个示例，基本上就可以完成这次拓扑图的设计，我将步骤拆分一下：

首先加载场景：

 var canvas = document.getElementById('canvas');

        var stage = new JTopo.Stage(canvas);

        var scene = new JTopo.Scene();　　

编写两个函数，用来定义Node和Link的属性，传入参数即可生成节点：

 //定义生成节点函数

        function node(x, y, img,name,height,width){

            var node = new JTopo.Node(name);

            node.setImage('img/control/' + img, true);

            node.setLocation(x, y);

            node.setSize(height,width);

            scene.add(node);

            return node;

        }

        //定义连线函数

        function linkNode(nodeA, nodeZ,color){

            var link = new JTopo.FoldLink(nodeA, nodeZ);

            link.lineWidth = 3;

            link.strokeColor = color;

            scene.add(link);

            return link;

        }

然后根据需求生成节点连接即可，效果如下图所示：

　

完整代码如下：

<html>

<head>

  <title>Demo</title>

  <meta charset="UTF-8">

  <link href="css/jquery.snippet.min.css">

  <script type="text/javascript" src="htforweb/jquery-1.7.1.min.js"></script>

  <script type="text/javascript" src="htforweb/jquery.js"></script>

  <script type="text/javascript" src="htforweb/jquery.snippet.min.js"></script>

  <script type="text/javascript" src="htforweb/jtopo-min.js"></script>

</head>

<body>

<script>

    //动态生成拓扑图

    $(document).ready(function(){

        var canvas = document.getElementById('canvas');

        var stage = new JTopo.Stage(canvas);

        var scene = new JTopo.Scene();

        //定义生成节点函数

        function node(x, y, img,name,height,width){

            var node = new JTopo.Node(name);

            node.setImage('img/control/' + img, true);

            node.setLocation(x, y);

            node.setSize(height,width);

            scene.add(node);

            return node;

        }

        //定义连线函数

        function linkNode(nodeA, nodeZ,color){

            var link = new JTopo.FoldLink(nodeA, nodeZ);

            link.lineWidth = 3;

            link.strokeColor = color;

            scene.add(link);

            return link;

        }

        var r1 = node(40, 40,'satellite_antenna.png','XX站',50,30);

        var r2 = node(40, 110, 'satellite_antenna.png','XX站',50,30);

        var r3 = node(40, 180,'satellite_antenna.png','XX站',50,30);

        var r4 = node(40, 300,'satellite_antenna.png', 'XX站',50,30);

        var r5 = node(40, 370,'satellite_antenna.png','XX站',50,30);

        var r6 = node(40, 440,'satellite_antenna.png','XX站',50,30);

        var r7 = node(200, 350,'terminal.png','XX分中心',50,70);

        var r8 = node(400, 270, 'nation.png','南京中心', 900,400);

        linkNode(r1, r8,'26,191,94');

        linkNode(r2, r8,'206,8,101');

        linkNode(r3, r8,'26,191,94');

        linkNode(r4, r7,'26,191,94');

        linkNode(r5, r7,'26,191,94');

        linkNode(r6, r7,'26,191,94');

        linkNode(r7, r8,'26,191,94');

        var r9 = node(600, 50, 'host.png','XX局',60,40);

        var r10 = node(600, 110, 'host.png','XX局',60,40);

        var r11 = node(600, 170, 'host.png','XX局',60,40);

        var r12 = node(600, 230,'host.png', 'XX局',60,40);

        var r13 = node(600, 290,'host.png', 'XX局',60,40);

        var r14 = node(600, 350, 'host.png','XX局',60,40);

        var r15 = node(600, 410, 'host.png','XX局',60,40);

        linkNode(r9, r8,'26,191,94');

        linkNode(r10, r8,'26,191,94');

        linkNode(r11, r8,'26,191,94');

        linkNode(r12, r8,'26,191,94');

        linkNode(r13, r8,'26,191,94');

        linkNode(r14, r8,'26,191,94');

        linkNode(r15, r8,'26,191,94');

        stage.add(scene);

    });

</script>

  <canvas width="1000" height="800" id="canvas" style=" background-color:#EEEEEE; border:1px solid #444;">

  </canvas>

</body>

</html>

2017.9.19日更新：

我写页面一般是用JS写，CSS渲染,在JSP页面中加载，使用过程中发现一个问题，就是给canvas设置属性时，无论是通过CSS渲染还是直接通过style属性添加，JTopo都会出现bug，图像失真且无法拖动，所以建议如果通过JS来编写页面的前端同事，直接通过对象.height/width属性来添加，末尾也无需添加"px“字符串

JS绘制拓扑图示例 （JTopo）的更多相关文章

  1. 使用JsPlumb绘制拓扑图的通用方法

    转自:http://www.it165.net/pro/html/201311/7616.html 使用JsPlumb绘制拓扑图的通用方法 一. 实现目标 绘制拓扑图, 实际上是个数据结构和算法的问题 ...

  2. 使用 JsPlumb 绘制拓扑图的通用方法

    摘要: 实现 JsPlumb 绘制拓扑图的通用方法. 只要服务端返回一个符合指定格式的数据结构,就可以绘制相应的拓扑图. 难度: 中级 示例工程见:  http://download.csdn.net ...

  3. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  4. 使用 jsPlumb 绘制拓扑图 —— 异步加载与绘制的实现

    本文实现的方法可以边异步加载数据边绘制拓扑图. 有若干点需要说明一下: 1.  一次性获取所有数据并绘制拓扑图, 请参见文章: <使用 JsPlumb 绘制拓扑图的通用方法> ; 本文实现 ...

  5. 使用 jsPlumb 绘制拓扑图 —— 异步载入与绘制的实现

    本文实现的方法能够边异步载入数据边绘制拓扑图. 有若干点须要说明一下: 1.  一次性获取全部数据并绘制拓扑图. 请參见文章: <使用 JsPlumb 绘制拓扑图的通用方法> ; 本文实现 ...

  6. 利用d3.js绘制雷达图

    利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入typ ...

  7. 应用wavesurfer.js绘制音频波形图小白极速上手总结

    一.简介 1.1  引   人生中第一份工作公司有语音识别业务,需要做一个web网页来整合语音引擎的标注结果和错误率等参数,并提供人工比对的语音标注功能(功能类似于TranscriberAG等),(博 ...

  8. js 绘制数学函数

    <!-- <!doctype html> --> <html lang="en"> <head> <meta charset= ...

  9. JS 绘制心形线

    JS 绘制心形线 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> < ...

随机推荐

  1. 动态创建生成lambd表达式

    基于网上找的一段代码进行修改,目前扩展了NotContains方法的实现 using System; using System.Collections.Generic; using System.Co ...

  2. Hbase 过滤器的使用

    Filter filter= new RowFilter(CompareFilter.CompareOp.EQUAL,new RegexStringComparator("."+d ...

  3. 前端框架VUE----cli脚手架（框架）

    一.创建vue项目 npm install vue-cli -g #-g全局 (sudo)npm install vue-cli -g #mac笔记本 vue-init webpack myvue # ...

  4. axios post参数为空

    今天在360浏览器访问时后台接收不到参数,但是用谷歌浏览器就能收到传入的值.

  5. c#测试执行时间的方法

    获取当前实例测量出来的总的运行时间 Stopwatch sp = new Stopwatch(); sp.Start(); //要测试的代码块 sp.Stop(); Console.WriteLine ...

  6. 电影编码JPEG2000与H.264

    电影的第三次革命是数字电影的诞生,数字电影取代了胶片,那么数字电影就一定有其独特的封装(压缩)格式.在网络上,我们经常见到许多视频格式,诸如mp4.mkv.flv.rmvb等,这些都是在通用计算机上播 ...

  7. 【题解】Luogu P4679 [ZJOI2011]道馆之战

    原题传送门 码农题树剖好题,口袋妖怪是个好玩的游戏 这道题要用树链剖分,我博客里有对树链剖分的详细介绍 下文左右就代表树的节点按dfs序后的左右,上.下分别表示每个节点的A.B区域 考虑在链上的情况, ...

  8. day24,25组合 封装 多态

    面向对象的精髓:将数据和处理数据的代码绑定成一个对象 只要获取到对象相应的数据和方法都有了 一.组合 什么叫组合? 多个对象放在一起叫组合 组合的作用也是降低代码的冗余 # 学生会增加各种各样的新的属 ...

  9. Java网络通信方面，BIO、NIO、AIO、Netty

    码云项目源码地址:https://gitee.com/ZhangShunHai/echo 教学视频地址:链接: https://pan.baidu.com/s/1knVlW7O8hZc8XgXm1dC ...

  10. topcoder srm 687 div1

    1.$A_{1}=2,A_{2}=3,A_{n}=A_{n-2}+A_{n-1}-1$.给出数字$n$,将其表示成若干个$A$中的不同元素的和. 思路:设$B_{n}=A_{n}-1$,那么有$B_{ ...