网络拓扑图jTopo简介和入门

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

传统的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.为大数据可视化提供解决方案
8.开发社区火热，版本更新快
入门开发步骤如下：
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);

原文地址：http://www.xttblog.com/?p=386

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » 网络拓扑图jTopo简介和入门