jTopo를 사용하여 Html5 Canva_html5 튜토리얼 팁에 그려진 요소에 마우스 이벤트를 추가하세요.

Html5를 사용하면 Canvas에 그려진 것들은 마우스 이벤트에 반응할 수 없지만 jTopo를 사용하면 이벤트를 추가하는 것이 매우 간단합니다. 효과는 다음과 같습니다.



코드 예:

코드 복사

코드는 다음과 같습니다.

var node = new JTopo.Node ("안녕하세요") ;
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("drag");
})
node.mouseover(function(event){
console.log("mouseover");
});
node.mousemove(function(event){
console.log("mousemove");
})
node.mouseout(function(event){
console .log("마우스아웃") ;
})