网络拓扑图jTopo简介和入门

传统的web版网络拓扑制作方法都是采用Flash来做的，但是这种安全性和兼容性比较差，苹果系列的产品也都不支持Flash。因此目前web版的网络拓扑图都采用HTML5的方式来制作。使用HTML5制作网络拓扑图的方式有很多种，最常见的两种应该就是使用Canvas和SVG了。市面上也有很多制作Web版网络拓扑的框架。如： jsplumb 、Qunee (收费的)、 grapheditor 、 Dagre-D3 、 HT for Web 、 Jtopo 、 twaver 等。

jTopo相比于其他框架优点是：

1.国产的，文档齐全，容易上手

2.免费的

3.压缩后体积仅有几十KB，下载速度快, 运行性能优异

4.完全采用HTML5的Canvas实现，效果震撼华丽。轻松移植到其它Html5的平台，如手机、平板上

5.主流浏览器:IE, Firefox, Safari, Opera, Chrome

6.简单好用，灵活扩展，轻松开发出类似Visio、在线脑图、UML建模等类似工具

7.为大数据可视化提供解决方案

入门开发步骤如下：

1.引入jtopo.js文件

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

2.创建Canvas标签

<canvas width="910" height="400" id="canvas"></canvas>

3.绘制网络拓扑

var canvas = document.getElementById('canvas'),
    stage = new JTopo.Stage(canvas), // 创建一个舞台对象
    scene = new JTopo.Scene(stage), // 创建一个场景对象
    node = new JTopo.Node("Hello");    // 创建一个节点
    node.setLocation(300,200);    // 设置节点坐标  
    node.rotate = Math.random(); // 旋转角度
    node.scaleX = Math.random(); // 水平方向的缩放
    node.scaleY = Math.random(); // 垂直方向的缩放
    node.alpha = Math.random();  // 透明度
    node.setImage('host.png'); // 设置图片
    node.fontColor ="0,0,0"; // 设置文字颜色
    scene.add(node); // 放入到场景中
    var nodeFrom = new JTopo.Node("from");
    nodeFrom.setLocation(200,200);
    scene.add(nodeFrom);
         
    var nodeTo = new JTopo.Node("To");
    nodeTo.setLocation(300,200);
    scene.add(nodeTo);
            
    var link = new JTopo.Link(nodeFrom, nodeTo); // 增加连线
    scene.add(link);