goat1000 / TagCanvas

HTML5 canvas-based tag cloud
243 stars 81 forks source link

mouseover Event Firing #12

Closed bootstrappedcoder closed 4 years ago

bootstrappedcoder commented 4 years ago

I am trying design a cloud where- if one hovers over the tags the content of a section will be updated. But the canvas doesn't fire onmouseover events. I looked up the code but couldn't quite build up my logic to modify the code to fire that event although it detects the event and changes the outline and stuff.I hope you can fire onmouseover event as you did for click events. will be waiting for answer.

my sample code will be :

<u>
         <li><a href="#realLink" onclick="return showDataStat(this)" onmouseover="return updateContent(this)" data-stat="90">Google</a></li>
         <li><a href="#fakeLink" onclick="return showDataStat(this)" onmouseover="return updateContent(this)" data-stat="40">Github</a></li>
</ul>

Or if possible JQuery would do.

goat1000 commented 4 years ago

The code you would need to look at for this is the Tproto.CheckActive() function. It is called on each animation frame for each tag to check if the mouse cursor is inside the tag's bounding box:

Tproto.CheckActive = function(c,xoff,yoff) {
  var t = this.tc, o = this.UpdateActive(c, xoff, yoff);
  return o.Active(c, t.mx, t.my) ? o : null;
};

The o variable is an Outline and t.mx and t.my are the coordinates of the mouse cursor. The function returns the Outline if the mouse is inside the tag, and null otherwise.

This is called for each tag in turn, working from the back of the cloud towards the front. The Outline of the frontmost active tag is kept by the TCproto.Draw() function for highlighting the tag. If you only want to trigger an event for the highlighted tag, this is a better place to add some code.