jTopo 拓撲圖(項目簡記）

一:所需js插件

topo-0.4.8-min.js

二:簡紹

(1).canvas  畫布    stage  舞臺   scene 場景   node 節點  link鏈路(線)

(2).代碼描述

jsp前臺建立一個canvas標籤，並給id一個值

<canvas id="canvas" style="margin: 0 auto;"></canvas>

js  

//一般將畫布、舞臺、場景設爲全局變量，這樣方便獲取數據。
var canvas,stage,scene;

//依據canvas的id獲取標籤
canvas = document.getElementById("canvas");
//設置畫布寬度和高度
canvas.width = window.screen.width * ratio_x;
canvas.height = window.screen.height * ratio_y;
//在畫布上創建一個舞臺對象
stage = new JTopo.Stage(canvas);
//在舞臺上創建一個場景對象
scene = new JTopo.Scene(stage);

//新建一個節點
var node = new JTopo.Node("1");
//節點存放的位置(寬度、高度)
node.setLocation(50, 20);
//是否可拖動
node.dragable = true;
//存放的圖片路徑
node.setImage(imgpath);
......
//將節點對象添加到場景中
scene.add(node)

//數據都放在了scene.childs

//節點監聽事件
node.mousedown(function(event){
if(event.button == 2){
	node.text = '按下右鍵';					
	}else if(event.button == 1){
		node.text = '按下中鍵';					
	}else if(event.button == 0){
		node.text = '按下左鍵';	
	}				
});
			
node.mouseup(function(event){				
	if(event.button == 2){
		node.text = '鬆開右鍵';					
	}else if(event.button == 1){
		node.text = '鬆開中鍵';					
	}else if(event.button == 0){
		node.text = '鬆開左鍵';	
	}
});	

node.click(function(event){					
	console.log("單擊");				
});	
node.dbclick(function(event){				
	console.log("雙擊");				
});
node.mousedrag(function(event){				
	console.log("拖拽");
});	
node.mouseover(function(event){				
	console.log("mouseover");				
});
node.mousemove(function(event){				
	console.log("mousemove");				
});	
node.mouseout(function(event){				
	console.log("mouseout");				
});