使用jTopo為Html5 Canva中繪製的元素新增滑鼠事件_html5教學技巧

使用Html5的時候，在Canvas上繪製的東西是不能對應滑鼠事件的，但是使用jTopo加入事件非常簡單，效果如下： 

 

程式碼範例：

複製程式碼

程式碼如下:

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