jTopo 拓扑图(项目简记）

最新推荐文章于 2025-11-21 11:35:32 发布

原创最新推荐文章于 2025-11-21 11:35:32 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用JTopo JavaScript库创建动态图示，包括设置画布、舞台和场景，添加节点和链接，以及实现鼠标事件监听等功能。

一:所需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>

//一般将画布、舞台、场景设为全局变量，这样方便获取数据。
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");				
});