JTopo使用心得
因为工作关系,最近用到了拓扑图,找了一溜工具后,发现了这个--JTopo,纯国产而且免费
当然了如果你英文水平足够好的话。也可以看看这些英文的做拓扑图的工具,以下网站出自知乎回答:开源HTML5 绘图工具
回到JTopo上来,正JTopo首页上说的那样:给我一块'布', 我能在上面画出一个美丽的软件世界。
首先要在JSP页面中加入画布标签:<canvas>
<canvas width="800" height="500" id="canvas" style=" background-color:#EEEEEE; border:1px solid #444;">
下面看官网上的API文档,Jtopo的核心对象有6个,分别是Stage(舞台对象),Scene(场景对象),Node(节点对象),Link(连线对象),Container(容器对象),Effect.Animate(动画效果),下面挑每个对象值得注意的地方说一下
1 Stage:
1.1 Mode属性:
normal[默认] | 可以点击选中单个节点(按住Ctrl可以选中多个),点中空白处可以拖拽整个画面 |
drag | 该模式下不可以选择节点,只能拖拽整个画面 |
select | 可以框选多个节点、可以点击单个节点 |
edit | 在默认基础上增加了:选中节点时可以通过6个控制点来调整节点的宽、高 |
1.2 add/remove(scene)函数:
将一个场景加入到/移除出舞台效果
1.3 setCenter(x,y)函数:
设置舞台的中心坐标点(舞台平移)
2 Scene:
2.1 Mode属性和Stage属性一致
2.2 alpha属性:场景的透明度
2.3 show()/hide() 函数:
表示场景的显示/隐藏
2.4 add/remove(element)函数:
添加对象到当前场景/移除场景中的某个元素
2.5 findElements(code)函数:
查找场景中的对象
3 Node:
3.1 dragable/selected/editAble/rotate属性:
设置节点是否可以被拖动/是否被选中/是否可编辑/节点旋转的角度
3.2 setImage(url)/setBound(x,y,width,height)函数:
设置节点的图片/坐标和宽,高
4Link:
NodeA/NodeZ/style.strokeColor
起始节点/终止节点/连线的颜色
两个简单的示例:
1 创建随机节点对象:
$(document).ready(function() {
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
var scene = new JTopo.Scene(stage); // 创建一个场景对象 var 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('img/bg.jpg'); // 设置图片
scene.add(node); // 放入到场景中
});
2 各种连线:
$(document).ready(function() {
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas); var scene = new JTopo.Scene(stage);
scene.background = 'img/bg.jpg'; // 节点
function newNode(x, y, w, h, text){
var node = new JTopo.Node(text);
node.setLocation(x, y);
node.setSize(w, h);
scene.add(node);
return node;
} // 简单连线
function newLink(nodeA, nodeZ, text, dashedPattern){
var link = new JTopo.Link(nodeA, nodeZ, text);
link.lineWidth = 3; // 线宽
link.dashedPattern = dashedPattern; // 虚线
link.bundleOffset = 60; // 折线拐角处的长度
link.bundleGap = 20; // 线条之间的间隔
link.textOffsetY = 3; // 文本偏移量(向下3个像素)
link.strokeColor = '0,200,255';
scene.add(link);
return link;
} // 折线
function newFoldLink(nodeA, nodeZ, text, direction, dashedPattern){
var link = new JTopo.FoldLink(nodeA, nodeZ, text);
link.direction = direction || 'horizontal';
link.arrowsRadius = 15; //箭头大小
link.lineWidth = 3; // 线宽
link.bundleOffset = 60; // 折线拐角处的长度
link.bundleGap = 20; // 线条之间的间隔
link.textOffsetY = 3; // 文本偏移量(向下3个像素)
link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
link.dashedPattern = dashedPattern;
scene.add(link);
return link;
} // 二次折线
function newFlexionalLink(nodeA, nodeZ, text, direction, dashedPattern){
var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);
link.direction = direction || 'horizontal';
link.arrowsRadius = 10;
link.lineWidth = 3; // 线宽
link.offsetGap = 35;
link.bundleGap = 15; // 线条之间的间隔
link.textOffsetY = 10; // 文本偏移量(向下15个像素)
link.strokeColor = '0,250,0';
link.dashedPattern = dashedPattern;
scene.add(link);
return link;
} // 曲线
function newCurveLink(nodeA, nodeZ, text){
var link = new JTopo.CurveLink(nodeA, nodeZ, text);
link.lineWidth = 3; // 线宽
scene.add(link);
return link;
} var from = newNode(100, 60, 30, 30);
var to = newNode(300, 60, 30, 30);
var link = newLink(from, to, 'Arrow', 5);
link.arrowsRadius = 10; var from = newNode(100, 120, 30, 30);
var to = newNode(300, 120, 30, 30);
var link = newLink(from, to, 'Link'); var from = newNode(100, 200, 30, 30);
var to = newNode(200, 300, 30, 30);
var link = newFoldLink(from, to, 'FoldLink');
var link = newFoldLink(to, from,'FoldLink', 'vertical', 5); var from = newNode(100, 300, 30, 30);
var to = newNode(200, 400, 30, 30);
var link = newFoldLink(from, to, 'FoldLink', 'vertical'); var from = newNode(450, 250, 30, 30);
var to = newNode(400, 100, 30, 30);
var link = newFlexionalLink(from, to, 'FlexLink1');
var from = newNode(600, 100, 30, 30);
var to = newNode(650, 200, 30, 30);
var link = newFlexionalLink(from, to, 'f', 'vertical', 2); var from = newNode(450, 400, 30, 30);
var link = newLink(from, from, 'loop'); var from = newNode(550, 400, 30, 30);
var to = newNode(650, 300, 30, 30);
var link = newCurveLink(from, to, 'curve');
});
JTopo使用心得的更多相关文章
- JS绘制拓扑图示例 (JTopo)
目前在做的项目是渔政的监控,需要用到的设备包括雷达,光电,站点信息等,想要更直观的展现设备之间的连接关系和状态信息,这时候需要画一张拓扑图 在做拓扑图之前,首先要学习一下,html里面另一个比较常用的 ...
- 我的MYSQL学习心得(一) 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- NoSql数据库使用半年后在设计上面的一些心得
NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...
- 我的MYSQL学习心得(二) 数据类型宽度
我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(三) 查看字段长度
我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(四) 数据类型
我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(五) 运算符
我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...
- 我的MYSQL学习心得(六) 函数
我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
- 我的MYSQL学习心得(七) 查询
我的MYSQL学习心得(七) 查询 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
随机推荐
- linux 安装sqlite3
python2个版本导致的问题. 网上找了好多方法都不行. 最后自己莫名其妙弄好了, 回想了一下大概是 安装sqlite3 重新安装python 最后 yum update 更新 就好了.
- Selenium+Headless Firefox
背景 今天本地调试基于Selenium+PhantomJS的动态爬虫程序顺利结束后,着手部署到服务器上,刚买的热乎的京东云,噼里啪啦一顿安装环境,最后跑的时候报了这么个错误: UserWarning: ...
- paymob浙江正和
#region 上海 ZH //else if (order.SP.Contains("上海") && order.Area.Contains("移动&q ...
- 【题解】Luogu P1533 可怜的狗狗
原题传送门 莫队介绍,Splay介绍 离线的题目,莫队是不错的解决方法 先把询问排一下序 剩下就套一个莫队的板子 每来一只狗就把漂亮值插入平衡树 每去掉一只狗就把漂亮值从平衡树中删掉 每次查询查平衡树 ...
- linux配置powerline(bash/vim)美化
安装powerline需要pip 链接:https://pan.baidu.com/s/1Jc59VD35PYic2fTK5v8h1w 密码:otfp pip curl https://bootstr ...
- 关于A left join B,A是否一定是主表?
一般情况,我们作左连接 select * from A left join B on A.id=B.a_id;一定认为A就是主表,其实还有另外的情况,我们若将sql改写成 select * from ...
- Exp2_固件程序设计 20165226_20165310_20165315
Exp2_固件程序设计 20165226_20165310_20165315 Exp2_1 MDK 实验内容 注意不经老师允许不准烧写自己修改的代码 两人(个别三人)一组 参考云班课资源中" ...
- Installing Jenkins as a Windows service
Install Jenkins as a Windows service NOTE: if you installed Jenkins using the windows installer, you ...
- img的基线对齐问题
http://blog.csdn.net/u011997156/article/details/44806523
- 怎么删除git本地分支以及Bitbucket的远程分支?
1. 如果分支只是本地分支,则可以使用 -d (如果分支已合并),例如 git branch -d <branch name>如果分支包含不计划合并的代码,请改用 -D (即使有没有mer ...