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(event){
if(event.button == 2){
node.text = '右のボタンを放します';
}else if(event.button == 1){
node.text = '中央のボタンを放します'; event.button == 0) {
node.text = '左ボタンを放します';
}
}); ("クリック");
});
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){
コンソール.log("マウスアウト")
});