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

在做拓扑图之前，首先要学习一下，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. [转载]DLL命名规则

    程序集是一个部署单元,同时还代表托管代码程序的身份.一般来说一个程序集仅与一个DLL相对应.本节主要讲DLL命名约定,程序集的命名约定与此类似. 要记住,名字空间与DLL和程序集是不同的概念.名字空间 ...

  2. 4-20mA电流环路发送器入门（转）

    4-20mA电流环路发送器入门 作者:Collin Wells, 德州仪器精密模拟应用工程师 在现代工业控制系统中,4-20 mA电流环路发送器一直是在控制中心和现场传感器/执行器之间进行数据传输最为 ...

  3. oracle之存储过程和存储函数的使用和区别

    #存储过程:封装在服务器上一段sql片段,已经编译好了的代码. 1.客户端调存储过程,执行效率就会非常高效. 语法: create [or replace] procedure 存储过程名称 (参数名 ...

  4. ==和equasl、hashmap原理（***）

    public class String01 { public static void main(String[] args) { String a="test"; String b ...

  5. Django里自定义用户登陆及登陆后跳转到登陆前页面的实现

    def logout(request): request.session.flush() return HttpResponseRedirect(request.META.get('HTTP_REFE ...

  6. Cannot assign “A1”: “B1” must be a “C1” instance.

    应用 django FORM 录入数据 必须 item_id supplier_id 不能item, supplier

  7. MySQL 常用使用语句

    1)批量删除表 Select CONCAT( 'drop table ', table_name, ';' ) FROM information_schema.tables Where table_n ...

  8. Linux 基础知识选择/填空

    选择题 1. 返回调用进程的进程标识号的系统函数是________. A. getpid B. getpgrp C. getppid D. setpid ##A 2. 关于文件系统的安装和卸载,下面描 ...

  9. Hibernate properties文件

    ###################### ### Query Language ### ###################### ## define query language consta ...

  10. android之csv导出

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.Fi ...