使用jTopo给Html5 Canva中的元素添加鼠标事件

原创 2014年05月15日 09:25:01

使用Html5的时候,在Canvas上绘制的东西是不能响应鼠标事件的,但是使用jTopo添加事件非常简单,效果如下:

http://www.jtopo.com/demo/helloworld.html


代码示例:

			var node = new JTopo.Node("Hello");							
			node.setLocation(409, 269);

			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");				
			});	


使用jTopo给Html5 Canva中绘制的元素添加鼠标事件_html5教程技巧

代码如下: var node = new JTopo.Node("Hello");  node.setLocation(409, 269);  node.mousedown(functi...
  • starsliu
  • starsliu
  • 2015年06月29日 10:22
  • 764

jtopo简单实例

原贴地址 http://cn-arthurs.iteye.com/blog/2009345 说明:  jtopo是一个基于canvas的js拓扑图形组件.比canvasexpress容易多了.  号称...
  • laputa73
  • laputa73
  • 2014年03月18日 13:49
  • 14730

关于jtopo缩放后在拖拽结束位置生成节点

拖拽结束后应该获取鼠标在jtopo场景scene位置,而不是鼠标在canvas的位置 //拖拽开始 var evId; function drag(ev){ if(Br...
  • qq_39759115
  • qq_39759115
  • 2017年12月11日 15:30
  • 261

基于jtopo实现拖拽和连线

上代码:jtopoDemo.html 拓扑 ...
  • zw421152835
  • zw421152835
  • 2016年04月29日 11:32
  • 8638

jtopo实现路程图

VRRAT var stage ;//new JTopo.Stage(canvas); // 创建一个舞台对象 var scene;  // 节点 f...
  • qq_26562641
  • qq_26562641
  • 2017年11月21日 15:15
  • 583

拓扑图框架Jtopo

使用HTML5制作网络拓扑图的方式有主要有Canvas和SVG,Jtopo采用HTML5的Canvas实现,可以使用到Html5的平台(PC,手机,平板),免费易用,适用于浏览器 开发流程: 1....
  • corolliberty
  • corolliberty
  • 2017年07月03日 10:37
  • 1027

jtopo的业务应用

jtopo的业务应用 jtopo简介 基本介绍 是一款完全基于H5 Canvas的关系、拓扑图图形化界面开发工具包 主要用于数据的图形展示、图形化界面 特点 简单好用 ...
  • qq_36371218
  • qq_36371218
  • 2018年01月02日 18:01
  • 127

使用jTopo画网络拓扑图

今天接到一个任务要求用js动态生成网络拓扑图。在网上搜索了一下发下了这个插件jTopo。可以用于画网络拓扑图,而且封装的比较好。一下午就完成了任务。 中间碰到了一个小问题:图片的标题一直不显示。后来...
  • xgbm_k
  • xgbm_k
  • 2017年08月26日 17:02
  • 419

jTopo中怎么去掉阴影效果

jTopo中显示的节点和连线默认带有阴影效果(由于火狐对阴影效果处理的不好...
  • jtopology
  • jtopology
  • 2014年05月15日 09:24
  • 1196

jtopo写的,有需要的童鞋可以下载看看,很实用的topo图

  • 2014年11月22日 18:59
  • 25KB
  • 下载
收藏助手
不良信息举报
您举报文章:使用jTopo给Html5 Canva中的元素添加鼠标事件
举报原因:
原因补充:

(最多只允许输入30个字)