TagCanvas 2.2
Published
The new version of TagCanvas adds two functions for rotating the cloud and a couple of extra options.
The new functions are demonstrated by the first two buttons under the example
canvas above. TagToFront rotates the cloud so that the desired tag
is at the front of the cloud. RotateTag rotates the cloud so that
the tag is wherever you want it to be - the position is specified using a
longitude and latitude. This example always rotates a tag to the same position,
though it is quite tricky to figure out where. If you can't figure out where the
tags are going, highlight this spoiler text:
latitude -30, longitude 90, which
is on the right and below the middle.
The choice of which tag to move can be specified using its id (the id attribute
of the <a> element) or the text inside it, or by using an
index into TagCanvas' array of tags. The last option is most useful when you
want to pick a random tag because the order in the array might not match the
original order of the tags on the page.
Both of the new functions support an optional callback function that is called when the movement has completed. You can use this to move the cloud again, or to do whatever else you like. If clicking either of the two buttons doesn't appear to do anything, then it means the selected tag is already in the right place. The animation is skipped (since there is nothing to do) and the callback function would be called immediately if there was one.
Clicking on one of the tags will demonstrate the first of the new options,
clickToFront. When this option is enabled, the clicked tag will
move to the front before triggering the click event for the link. This just
looks weird if your tags link to new pages, but for Javascript events this
could be useful.
The second of the new options is a setting for controlling the animation when
the TagToFront and RotateTag functions are used. animTiming is set
to "Smooth" by default to accelerate and decelerate the cloud movement, but you
can set it to "Linear" to move the cloud at a constant rate instead.
The last of the new options is demonstrated by pressing the “Restart”
button. This calls the Start function again whereupon you should
notice the effect of the fadeIn option.
The new and improved TagCanvas files are all available from the TagCanvas page.