使用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中怎么去掉阴影效果

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

自己实现JTopo插件的圆形布局

JTopo有自己的圆形布局,只需要调用一下圆形布局的方法即可。我自己粗糙的也算实现了一个圆形布局吧。比较简单:以x轴正方向为0度,然后计算出每个节点连线的角度,因为半径是固定的,根据半径和角度便可以计...
  • qq_30051139
  • qq_30051139
  • 2016年08月25日 16:20
  • 914

Jtopo提示框实现

  • 2017年07月17日 17:31
  • 759KB
  • 下载

jTopo通过给node添加属性以达到只传参数而不显示的功能

首先感谢jTopo的开发人员,你们的努力才是大家进步的前提 进入正题: 需求:     现在是2017.1.18日,最近的工作接到了这样一个需求,A~Z端口的时延信息统计,并被推...
  • linkedin_37345339
  • linkedin_37345339
  • 2017年01月18日 09:24
  • 1315

JTopo 框架教程之一:初始JTopo 框架

JTopo 是什么?
  • zhouzhiwengang
  • zhouzhiwengang
  • 2014年06月04日 15:56
  • 7947

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

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

基于jtopo实现拖拽和连线

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

jtopo简单实例

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

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

  • 2014年11月22日 18:59
  • 25KB
  • 下载

vml实现web topo原型(14)-背景图

Vml实现整体的背景图非常简单,而且可以矢量缩放,保存相对位置。还可以支持对不同的图形元素设置背景图。暂时用不到。只需要使用v:image对象,设好zIndex就可以了   ...
  • laputa73
  • laputa73
  • 2010年03月24日 13:40
  • 766
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jTopo给Html5 Canva中的元素添加鼠标事件
举报原因:
原因补充:

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