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

在做拓扑图之前，首先要学习一下，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. AtCoder Beginner Contest 043 D - アンバランス / Unbalanced

    题目链接:http://abc043.contest.atcoder.jp/tasks/arc059_b Time limit : 2sec / Memory limit : 256MB Score ...

  2. bzoj1625 [Usaco2007 Dec]宝石手镯

    01背包 #include<algorithm> #include<iostream> #include<cstdlib> #include<cstring& ...

  3. API gateway 之 kong 安装

    kong安装: https://getkong.org/install/centos/ 下载指定版本rpm: wget https://bintray.com/kong/kong-community- ...

  4. 大数据学习路线之linux系统基础搭建

    学习大数据是必须掌握一定Linux知识的,工欲善其事,必先利其器.在学习之前,首先需要搭建Linux系统,本节将讲解VMware Workstation的安装和CentOS 7系统的安装. 1.2.1 ...

  5. 使用URLConnection进行访问

    package test; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOExcepti ...

  6. Jquery autocomplete.js输入框联想补全功能

    Jquery autocomplete.js插件下载地址:http://files.cnblogs.com/files/jinzhiming/autocomplete.rar 有两种用法,一种是直接使 ...

  7. LNMP 添加 memcached服务

    LNMP 添加 memcached服务   由于memcached具有更多的功能和服务,已经不推荐使用memcache了.(缺少个字母d) 1. 首先安装memcached服务端. 这里使用yum源安 ...

  8. 【题解】bzoj 4327 JSOI2012 玄武密码

    原题传送门 我们先对所有询问串建立AC自动机(今天洛咕上有人分不清AC自动机和自动AC机) 然后将母串在AC自动机上跑,每走到一个点x,从x点出发沿着fail指针所能到的所有前缀都是匹配成功的,暴力向 ...

  9. Java中断异常 InterruptedException 的正确处理方式

    你看到这篇文件可能是因为你已经调用了一个抛出 InterruptedException 异常的方法,并且需要以某种方式处理它. 首先,需要了解为一个方法为啥会 throws InterruptedEx ...

  10. 05: 使用axios/vue-resource发送HTTP请求

    1.1 axios 简介与安装 1.axios简介 1. vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 2. axios是一个基于Promise的HTTP请 ...