网络拓扑图jTopo简介和入门

HTML5 herman 12111浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

传统的web版网络拓扑制作方法都是采用Flash来做的,但是这种安全性和兼容性比较差,苹果系列的产品也都不支持Flash。因此目前web版的网络拓扑图都采用HTML5的方式来制作。使用HTML5制作网络拓扑图的方式有很多种,最常见的两种应该就是使用Canvas和SVG了。市面上也有很多制作Web版网络拓扑的框架。如:jsplumbQunee(收费的)、grapheditorDagre-D3HT for WebJtopotwaver等。
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)!可加作者微信号1:xmtxtt(5000人已满),微信号2:codedq(5000人已满),微信号3:xttblog(超2800)。备注:“xttblog”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!

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