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

在做拓扑图之前，首先要学习一下，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. python-数据分析与展示（Numpy、matplotlib、pandas）---2

    笔记内容整理自mooc上北京理工大学嵩天老师python系列课程数据分析与展示,本人小白一枚,如有不对,多加指正 1.python自带的图像库PIL 1.1常用API  Image.open()    ...

  2. 基于rsync的lsyncd自动同步配置

    环境部署 源机:192.168.31.140 目标机:192.168.31.130 源机配置 基于rsync的lsyncd 自动同步,rsync的配置省略 安装lsyncd rpm -ivh lsyn ...

  3. php 查找字符串里面中文字符第一次出现的位置，并插入字符串

    //查找字符串里面中文字符第一次出现的位置,并插入字符串 function find_first_chinese_insert($str,$insert_str){ $count = mb_strle ...

  4. Golang接口简单了解

    在Golang中,一个类只需要实现了接口要求的所有函数,我们就说这个类实现了该接口. package main import "fmt" type Animal interface ...

  5. python2.7安装mysql-python

    环境:python2.7.14+mysql-python-1.2.3.win-amd64-py2.7.exe 安装版本许参照解释器版本,有64和32位之分,如果安装错误版本,则运行时会报错:Impor ...

  6. P4316 绿豆蛙的归宿（期望）

    P4316 绿豆蛙的归宿 因为非要用bfs所以稍微麻烦一点qwq(大家用的都是dfs) 其实问题让我们求的就是经过每条边的概率*边权之和 我们可以用bfs把图遍历一遍处理概率,顺便把每条边的概率*边权 ...

  7. Linux 安装本地 yum源

    放入Centos6.4的镜像光盘或找到镜像文件 [root]#mount /dev/cdrom  /media/cdrom  #挂载本地镜像 [root]#rm -rf /etc/yum.repo.d ...

  8. runtime.Gosched()的作用分析

    untime.Gosched()用于让出CPU时间片.这就像跑接力赛,A跑了一会碰到代码runtime.Gosched()就把接力棒交给B了,A歇着了,B继续跑 测试代码: package main ...

  9. Github网站加载不完全，响应超时，解决办法

    Github网站加载缓慢信息不全解决方法 Github是一个代码托管平台和开发者社区,开发者可以在Github上创建自己的开源项目并与其他开发者协作编码.毫不夸张地说,高效利用Github是一个优秀的 ...

  10. 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165211

    目录 软件和镜像下载 虚拟机软件 Kali系统的下载 Kali系统安装 网络配置 设置共享文件夹和剪切板 安装VMware增强工具 设置共享文件夹 设置共享剪切板 更新软件源 软件和镜像下载 虚拟机软 ...