网络拓扑图形中能更直观明了的看清楚网络中各个节点之间的链接，还有接口之间的链接，也就是反应网络中各实体间的结构关系，这样方便配置和排除错误。网络拓扑设计地好坏对整个网络的性能和经济性有重大影响。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JTopo 教程</title>
<script src="js/jtopo-048-minjs" type="text/javascript"></script>
</head>
<body>
<canvas width="910" height="800" id="canvas"></canvas>
<script>
canvas = documentgetElementById('canvas');
stage = new JTopoStage(canvas); // 创建一个舞台对象
scene = new JTopoScene(stage); // 创建一个场景对象
scenebackground = '/img/bgjpg'
node = new JTopoNode("Hello"); // 创建一个节点
nodesetLocation(400,200); // 设置节点坐标
/ noderotate = Mathrandom(); // 旋转角度
nodescaleX = Mathrandom(); // 水平方向的缩放
nodescaleY = Mathrandom(); // 垂直方向的缩放
nodealpha = Mathrandom(); // 透明度 /
//nodesetImage('img/nepng'); // 设置
nodefontColor ="0,0,0"; // 设置文字颜色
nodesetSize(100, 60);
nodefont = '14px 微软雅黑';
nodetextPosition = 'Middle_Center';
nodeborderColor = '255,255,255';
nodeborderRadius = 5; //圆角
nodeborderWidth = 2;
nodealpha = 07; //透明度
nodeshowSelected = false;
sceneadd(node); // 放入到场景中
var nodeFrom = new JTopoNode("from");
nodeFromsetLocation(200,200);
sceneadd(nodeFrom);
var nodeTo = new JTopoNode("To");
nodeTosetLocation(300,200);
sceneadd(nodeTo);
var link = new JTopoLink(nodeFrom, nodeTo); // 增加连线
sceneadd(link);
var appleNode = new JTopoNode();
appleNodealpha = 07;
appleNodesetImage('/img/OS_Applepng', true);
appleNodesetLocation(320, 80);
appleNodeshowSelected = false; // 不显示选中矩形
sceneadd(appleNode);
var circleNode = new JTopoCircleNode("node");
circleNoderadius = 24;//半径
circleNodealpha = 07;//透明度
circleNodefillColor = '0, 255, 0';
circleNodesetLocation(508, 100);
circleNodetextLocation = 'Middle_Center';
sceneadd(circleNode);
nodeTomousedown(function(event){
if(eventbutton == 2){
nodeTotext = '按下右键';
}else if(eventbutton == 1){
nodetext = '按下中键';
}else if(eventbutton == 0){
nodetext = '按下左键';
}
});
nodeclick(function(event){
consolelog("单击");
});
nodedbclick(function(event){
consolelog("双击");
});
nodemousedrag(function(event){
consolelog("拖拽");
});
nodemouseover(function(event){
consolelog("mouseover");
});
nodemousemove(function(event){
consolelog("mousemove");
});
nodemouseout(function(event){
consolelog("mouseout");
});
// 节点
function newNode(x, y, w, h, text){
var node = new JTopoNode(text);
nodesetLocation(x, y);
nodesetSize(w, h);
sceneadd(node);
return node;
}
function newFoldLink(nodeA, nodeZ, text, direction, dashedPattern){
var link = new JTopoFoldLink(nodeA, nodeZ, text);
linkdirection = direction || 'horizontal';
linkarrowsRadius = 15; //箭头大小
linklineWidth = 3; // 线宽
linkbundleOffset = 60; // 折线拐角处的长度
linkbundleGap = 20; // 线条之间的间隔
linktextOffsetY = 3; // 文本偏移量（向下3个像素）
linkstrokeColor = JTopoutilrandomColor(); // 线条颜色随机
linkdashedPattern = dashedPattern;//虚线的间隔长度，是一个数值
sceneadd(link);
return link;
}
var link = newFoldLink(appleNode, circleNode, "up");
var link = newFoldLink(circleNode, appleNode, "down");
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 link = newFoldLink(from,from,'FoldLink');
var link = newFoldLink(from,from,'FoldLink');
var link = newFoldLink(from,from,'FoldLink');
var link = newFoldLink(from,from,'FoldLink');
var link = newFoldLink(from,from,'FoldLink');
var link = newFoldLink(from,from,'FoldLink');
var link = newFoldLink(from,from,'FoldLink');
// --------- loop
var loopNode = new JTopoNode("loop");
loopNodesetLocation(600, 400);
sceneadd(loopNode);
for(var i=0; i<5; i++){
var link = new JTopoLink(loopNode, loopNode);
linktext = 'L'+i;
linklineWidth = 3; // 线宽
linkbundleGap = 30; // 线条之间的间隔
linktextOffsetY = 3; // 文本偏移量（向下3个像素）
linkstrokeColor = JTopoutilrandomColor(); // 线条颜色随机
//linktype = 'loop'; // 自定义属性
sceneadd(link);
}
</script>
</body>
</html>
3 Node：
31 dragable/selected/editAble/rotate属性：
设置节点是否可以被拖动/是否被选中/是否可编辑/节点旋转的角度
32 setImage（url）/setBound（x,y,width,height）函数：
设置节点的/坐标和宽，高
网络拓扑图形中能更直观明了的看清楚网络中各个节点之间的链接，还有接口之间的链接，也就是反应网络中各实体间的结构关系，这样方便配置和排除错误。网络拓扑设计地好坏对整个网络的性能和经济性有重大影响。
首先jtopo在连接2个点的时候会获取两个点的node
在每一个node中都要设置一个index变量。比如startNodeindex=0,endNodeindex=1
连接两个点之后需要设置一个links数组来存放自定义的link对象,比如{from:0to:1}
当你点击节点的时候需要通过点击event获取你当前点击的x,y坐标，通过if判断点击的位置是哪个节点，获取了节点，就获取了当前节点的index值，此时在links中寻找from==index或者to==index的对象就ok了。找到link之后加入该link是links[0]那么
links[0]strokeColor = '你要的颜色'（注意不能用css颜色编码，要用rgb编码）
以上就是关于jtopo 画的网络拓扑图有什么用全部的内容，包括:jtopo 画的网络拓扑图有什么用、jtopo和svg哪个简单一点、jtopo 怎么禁止container自由缩放等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）