JTopo使用心得

因为工作关系，最近用到了拓扑图，找了一溜工具后，发现了这个--JTopo，纯国产而且免费

当然了如果你英文水平足够好的话。也可以看看这些英文的做拓扑图的工具，以下网站出自知乎回答：开源HTML5 绘图工具

回到JTopo上来，正JTopo首页上说的那样：给我一块'布', 我能在上面画出一个美丽的软件世界。

首先要在JSP页面中加入画布标签：<canvas>

?

1	<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 创建随机节点对象：

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$(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 各种连线：

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

$(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'); });