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

jTopo Canvas 交互示例

最新推荐文章于 2022-11-21 16:37:20 发布

原创最新推荐文章于 2022-11-21 16:37:20 发布 · 5.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #html5 #鼠标 #事件 #jtopo

本文介绍如何使用jTopo在HTML5 Canvas上添加鼠标事件，包括单击、双击、拖拽等，并提供了具体实现代码。

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