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

在做拓扑图之前，首先要学习一下，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. JustOj 1929: 多输入输出练习1

    题目描述 给定很多行数据,要求输出每一行的最大值. 输入 程序有多行输入,每一行以0结束. 输出 有多行输出,对应输入的行数. 样例输入 23 -456 33 78 0 43 23 987 66 -1 ...

  2. 前端框架VUE----对象的单体模式

    对象的单体模式 为了解决箭头函数this指向的问题 推出来一种写法 对象的单体模式 1 var person = { 2 name:'小马哥', 3 age:12, 4 fav(){ 5 consol ...

  3. python-数据分析与展示（Numpy、matplotlib、pandas）---2

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

  4. redis安装--转

    第一部分:安装redis 希望将redis安装到此目录 1 /usr/local/redis 希望将安装包下载到此目录 1 /usr/local/src 那么安装过程指令如下: 1 2 3 4 5 6 ...

  5. SSMS登记密码清除

    如图,此界面的登录密码如果要清除,可以找到%AppData%\Microsoft\Microsoft SQL Server\100\Tools\Shell\SqlStudio.bin,将SqlStud ...

  6. spring总结之二（Bean作用域、依赖注入）

    ### Bean的作用域:单例(singleton),多例(prototype) 1.单例模式:表示在任何地方使用对象,总是一个(对象是唯一的). (笔面试重点) 饿汉式 public class K ...

  7. Docker学习笔记之Copy on Write机制

    0x00 概述 Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容,当某个人想要修改这个内容的时候,才会真正把内容Copy出去形成一个新 ...

  8. Prometheus监控学习笔记之PromQL 内置函数

    概述 Prometheus 提供了其它大量的内置函数,可以对时序数据进行丰富的处理.某些函数有默认的参数,例如:year(v=vector(time()) instant-vector).其中参数 v ...

  9. Golang通过git clone beego框架报错 error: while accessing https://github.com/astaxie/beego/info/refs fatal: HTTP request failed package github.com/astaxie/beego: exit status 128

    在Centos6.4尝试搭建beego框架,使用git命令clone时报错 # cd .; git clone https://github.com/astaxie/beego /www/projec ...

  10. JavaScript实现表单验证_02

    注册3次错误,最终的结果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...