使用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实现拖拽和连线

上代码:jtopoDemo.html 拓扑 ...

jtopo

jtopo文本换行 扩展prototype属性: CanvasRenderingContext2D.prototype.wrapText = function(str,x,y){ ...
  • tianhe8
  • tianhe8
  • 2015年06月19日 10:49
  • 1905

jtopo简单实例

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

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Canvas---Canvas事件处理、Canvas元素的鼠标点击事件处理、实现一个元素管理器

由于Canvas的 ”忘记式“ 绘图机制(就是它没有维护一份绘制元素的列表)。 如果仅仅检测用户是否点击整个canvas元素,只需在canvas上注册事件就好。 如果是要分别检测canvas里绘制的不...

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

代码如下: var node = new JTopo.Node("Hello");  node.setLocation(409, 269);  node.mousedown(functi...

基于lucene的案例开发:分词器介绍

在lucene创建索引的过程中,分词技术是一个十分重要的环节,介绍了7中比较常见的分词技术 CJKAnalyzer、KeywordAnalyzer、SimpleAnalyzer、StopAnalyze...

自定义Lucene分词器示例

集团的内部通讯工具搜同事时,需要根据姓名后缀进行搜索。譬如“徐欢春”,我们要能根据“欢春”搜出这个人;“黄继刚”,要根据“继刚”为关键字搜出“黄继刚”。这是个很人性化的用户体验,当我们有同事的名字是三...

用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动

第三篇,鼠标事件与游戏人物移动 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.csdn.net/lufy_legend/article...

Html5 Canvas初探学习笔记(15) -鼠标事件

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇完成这样一个例子,让主角随着鼠标移动...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jTopo给Html5 Canva中的元素添加鼠标事件
举报原因:
原因补充:

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