Verwenden Sie jTopo, um Mausereignisse zu Elementen hinzuzufügen, die in Html5 Canva_html5-Tutorial-Tipps gezeichnet wurden

Bei Verwendung von Html5 können auf Canvas gezeichnete Dinge nicht auf Mausereignisse reagieren, aber es ist sehr einfach, Ereignisse mit jTopo hinzuzufügen. Der Effekt ist wie folgt:



Codebeispiel:

Code kopieren

Der Code lautet wie folgt:

var node = new JTopo.Node ("Hallo") ;
node.setLocation(409, 269);
node.mousedown(function(event){
if(event.button == 2){
node.text = 'Drücken Sie die rechte Taste' ;
}else if(event.button == 1){
node.text = 'Drücken Sie die mittlere Taste'
}else if(event.button == 0) {
node.text = 'Drücken Sie die linke Taste';
}
node.mouseup(function(event){
if(event.button == 2){
node.text = 'Rechte Taste loslassen';
}else if(event.button == 1){
node.text = 'Mittlere Taste loslassen'; event.button == 0) {
node.text = 'Linke Taste loslassen';
});
node.click(function(event){
console.log ("click");
});
node.dbclick(function(event){
console.log("Double-click");
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("mouseout") ;
});