level 1
bluepig001
楼主
图片和字都特别模糊，不知道是哪里的问题。代码如下：
<!doctype html>
<html>
<head>
<title>jsPlumb 1.5.3 - flowchart connectors demonstration - jQuery</title>
<!-- DEP -->
<script src="easyui1.5.1/jquery.min.js"></script>
<script src="easyui1.5.1/jquery.easyui.min.js"></script>
<!-- main jsplumb engine -->
<script src="js/jtopo-0.4.8-min.js"></script>
<!-- /JS -->
<!-- demo code -->
<script src="js/jsPlumb/stationTopo.js"></script>
<script type="text/javascript">
</script>
</head>
<body style="overflow: hidden; height: 100%; width: 100%;" >
<canvas id="canvas" style="height: 100%; width: 100%;"></canvas>
</body>
</html>
/**
* 使用 jTopo 根据指定的拓扑数据结构绘制拓扑图
*
*
*/
$(document).ready(function(){
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas);
var scene = new JTopo.Scene(stage);
function node(name,img){
var node = new JTopo.Node(name);
node.setImage('./images/graph/' + img);
node.setLocation(600 * Math.random(), 400 * Math.random()); // 设置节点坐标
node.setSize(15, 15);
node.alpha = 1; //透明度
scene.add(node);
return node;
}
function linkNode(nodeA, nodeZ, f){
var link;
if(f){
link = new JTopo.FoldLink(nodeA, nodeZ);
}else{
link = new JTopo.Link(nodeA, nodeZ);
}
link.direction = 'vertical';
scene.add(link);
return link;
}
//启用鼠标滚轮缩放，缩放比例是0.85
stage.wheelZoom=0.85;
$parent = document.getElementById('canvas');
stage.width=$parent.width;
stage.height =$parent.height;
stage.mode = "normal";
//设置背景
//scene.background = './images/bg.jpg';
// 场景设置
scene.translateX = 0; // 场景偏移
scene.translateY = 0;
scene.scaleX = 1; // 场景缩放
scene.scaleY = 1;
scene.alpha = 1; // 通道透明度
scene.backgroundColor = '80,100,80'; // 背景颜色--只支持输入rgb值，设置背景颜色是必须设置通道透明度
scene.background = './images/bg.jpg'; // 背景图
//显示工具栏
//showJTopoToobar(stage);
stage.add(scene);
var r1 = node('root','station.png');
//使用树形拓扑时，根节点要做如下赋值
r1.layout = {type: 'tree', width:100, height: 100};
var s1 = node('192.168.1.1','station.png');
s1.text = '192.168.1.1'; // 文字
s1.fontColor = '0,0,0';
var s2 = node('192.168.1.2','station.png');
s2.text = '192.168.1.2';
s2.fontColor = '0,0,0';
// s2.layout = {type: 'tree', width:50, height: 100};
var c1 = node('127.0.0.1','firePowerFactory.png');
c1.text = '127.0.0.1';
c1.fontColor = '0,0,0';
var cloud = node('公网','firePowerFactory.png');
cloud.text='公网';
cloud.textPosition = 'Middle_Center';// 文字居中
cloud.fontColor = '0,0,0';
var web_server = node('web服务器','station.png');
web_server.text='web服务器';
web_server.fontColor = '0,0,0';
var r2 = node('ff','firePowerFactory.png');
linkNode(c1,cloud);
linkNode(cloud,web_server);
linkNode(web_server,r2);
linkNode(r2,r1);
//画树形拓扑时要把父节点放置于第一个参数，比如此函数中的r1
linkNode(r1, s1);
linkNode(r1, s2);
s2.alarm="ping不通";
setInterval(function(){
if(s2.alarm == 'ping不通'){
s2.alarm = null;
}else{
s2.alarm = 'ping不通'
}
}, 600);
// linkNode(h1, r1);
JTopo.layout.layoutNode(scene, r1, true);
stage.centerAndZoom(1);
}
);
