TagCanvas - HTML5 Canvas Tag Cloud

TagCanvas is a Javascript class which will draw and animate a HTML5 canvas based tag cloud.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: goat1000.com

1. INCLUDE JS FILES

<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="tagcanvas.min.js" type="text/javascript"></script>

2. HTML

<div id="myCanvasContainer">
 <canvas width="300" height="300" id="myCanvas">
  <p>In Internet Explorer versions up to 8, things inside the canvas are inaccessible!</p>
 </canvas>
</div>
 
<div id="tags">
 <ul>
  <li><a href="http://www.google.com" target="_blank">Google</a></li>
  <li><a href="/fish">Fish</a></li>
  <li><a href="/chips">Chips</a></li>
  <li><a href="/salt">Salt</a></li>
  <li><a href="/vinegar">Vinegar</a></li>
 </ul>
</div>

3. JAVASCRIPT

window.onload = function() {
    try {
      TagCanvas.Start('myCanvas','tags');
    } catch(e) {
      // something went wrong, hide the canvas container
      document.getElementById('myCanvasContainer').style.display = 'none';
    }
};

4. OPTIONS

Option	Default	Description
interval[1]	20	Interval between animation frames, in milliseconds.
maxSpeed	0.05	Maximum speed of rotation.
minSpeed	0.0	Minimum speed of rotation when mouse leaves canvas.
dragControl	false	When enabled, cloud moves when dragged instead of based on mouse position.
dragThreshold	4	The number of pixels that the cursor must move to count as a drag instead of a click.
initial	null	Starting rotation speed, with horizontal and vertical values as an array, e.g. [0.8,-0.3]. Values are multiplied bymaxSpeed.
fadeIn	0	Time to fade in tags at start, in milliseconds.
decel	0.95	Deceleration rate when mouse leaves canvas.
minBrightness	0.1	Brightness (opacity) of tags at back of cloud (0.0-1.0).
maxBrightness	1.0	Brightness (opacity) of tags at front of cloud (0.0-1.0).
textColour	"#ff99ff"	Colour of the tag text - empty string or null to use the colour of the original link.
textHeight	15	Height of the tag text font (in pixels).
textFont	"Helvetica, Arial, sans-serif"	Font family for the tag text - empty string or null to use the font of the original link.
bgColour	null	Background colour of tag, null for no background. The string "tag" means use the original link background colour.
bgRadius	0	Radius for rounded corners of background in pixels.
bgOutlineThickness	0	Thickness of tag background outline in pixels, 0 for no outline.
bgOutline	null	Colour of tag background outline. Use null for the same as the text colour, use "tag" for the original link text colour.
padding	0	Amount of space around text and inside background.
outlineColour	"#ffff99"	Colour of the active tag highlight
outlineMethod	"outline"	Type of highlight to use. Options are: outline for an outline at the same depth as the active tag classic for the old-style outline on top of all tags block for a solid block around the active tag colour to change the colour of the text or image of the current tag to the outlineColour value none for no highlighting at all
outlineThickness	2	Thickness of outline in pixels
outlineOffset	5	Distance of outline from text, in pixels. This also increases the size of the active area around the tag.
outlineRadius	0	Radius for rounded corners on outline box in pixels
pulsateTo	1.0	Pulsate outline to this opacity (0.0-1.0)
pulsateTime	3	Pulse rate, in seconds per beat
depth	0.5	Controls the perspective (0.0-1.0)
freezeActive	false	Set to true to pause movement when a tag is highlighted.
freezeDecel	false	Set to true to decelerate when highlighted tags freeze instead of stopping suddenly.
activeCursor	"pointer"	The CSS cursor type to use when the mouse is over a tag.
frontSelect	false	Set to true to prevent selection of tags at back of cloud.
clickToFront	null	If set to a number, the selected tag will move to the front in this many milliseconds before activating.
txtOpt	true	Text optimisation, converts text tags to images for better performance.
txtScale	2	Scaling factor of text when converting to image in txtOptmode.
reverse	false	Set to true to reverse direction of movement relative to mouse position.
hideTags	true	Set to true to automatically hide the tag list element if TagCanvas is started successfully.
zoom	1.0	Adjusts the relative size of the tag cloud in the canvas. Larger values will zoom into the cloud, smaller values will zoom out.
wheelZoom	true	Enables zooming the cloud in and out using the mouse wheel or scroll gesture.
zoomStep	0.05	The amount that the zoom is changed by with each movement of the mouse wheel.
zoomMax	3.0	Maximum zoom value.
zoomMin	0.3	Minimum zoom value.
shadow	"#000000"	Colour of the shadow behind each tag.
shadowBlur	0	Amount of tag shadow blurring, in pixels.
shadowOffset	[0,0]	X and Y offset of the tag shadow, in pixels.
weight	false	Set to true to turn on weighting of tags.
weightMode	"size"	Method to use for displaying tag weights. Should be one of: size to display more significant tags in a larger font size colour to display tags using colour values from the weightGradientoption both to use both size and colour to visualise weights
weightSize	1.0	Multiplier for adjusting the size of tags when using a weight mode of size or both.
weightGradient	{0:'#f00', 0.33:'#ff0', 0.66:'#0f0', 1:'#00f'}	The colour gradient used for colouring tags when using a weight mode of colour or both.
weightFrom	null	The link attribute to take the tag weight from. The default ofnull means that the weight is taken from the calculated link font size.
weightSizeMin	null	Minimum font size when weighted sizing is enabled.
weightSizeMax	null	Maximum font size when weighted sizing is enabled.
shape	"sphere"	The shape of the cloud. Currently supported are sphere,hcylinder for a cylinder that starts off horizontal, vcylinderfor a cylinder that starts off vertical, hring for a horizontal circle and vring for a vertical circle.
lock	null	Limits rotation of the cloud using the mouse. A value of "x"limits rotation to the x-axis, "y" limits rotation to the y-axis. A value of "xy" will prevent the cloud rotating in response to the mouse - the cloud will only move if theinitial option is used to give it a starting speed.
tooltip	null	Sets tooltip display method: null for no tooltips; native for operating system tooltips; div for div-based.
tooltipClass	"tctooltip"	Class of tooltip div.
tooltipDelay	300	Time to pause while mouse is not moving before displaying tooltip div, in milliseconds.
radiusX	1	Initial size of cloud from centre to sides.
radiusY	1	Initial size of cloud from centre to top and bottom.
radiusZ	1	Initial size of cloud from centre to front and back.
stretchX	1	Stretch or compress the cloud horizontally.
stretchY	1	Stretch or compress the cloud vertically.
offsetX	0	Offsets the centre of the cloud horizontally (measured in pixels)
offsetY	0	Offsets the centre of the cloud vertically (measured in pixels)
shuffleTags	false	Set to true to randomize the order of the tags.
noSelect	false	Set to true to prevent the selection of tags.
noMouse	false	Set to true to prevent any mouse interaction. The initialoption must be used to animate the cloud, otherwise it will be motionless.
imageScale	1	Amount to scale images by - the default of 1 uses the size they appear on the page. For no scaling (use the actual image size) set this to null.
centreFunc	null	Function for drawing in centre of cloud. The function is passed in these parameters in order: canvas 2D context; canvas width; canvas height; centre X; centre Y.
animTiming	Smooth	The animation timing function for use with the RotateTag and TagToFront functions. The values available are "Smooth" and "Linear".
splitWidth	0	If greater than 0, breaks the tag into multiple lines at word boundaries when the line would be longer than this value. Lines are automatically broken at <br> tags.

5. METHODS

Starting the cloud

The start functions start or restart the cloud animation. The canvas ID must be provided for the stand-alone version, though the tag list ID and options arguments are optional.

When the tag list ID is not provided, TagCanvas will use any links it finds inside the canvas element for the tags - though this will not work in IE versions before IE9.

// stand-alone version
TagCanvas.Start(canvasId, tagListId, options);

The jQuery version gets the canvas from the selector. The options and tag list arguments are both optional, and the tag list selection works in the same was as with the stand-alone version.

// jQuery plugin version
$(selector).tagcanvas(options, tagListId);

Calling the start functions again for the same canvas will restart the cloud. The tag list can be updated this way, and many of the options may be changed.

Pausing the cloud animation

The pause functions will stop the cloud animating. The script will continue receiving Javascript timer callbacks, but the animation code will be skipped. Calling the pause function again when a cloud is already paused will have no effect.

The stand-alone version is paused by calling the TagCanvas.Pause() function, passing in the ID of the canvas to be paused.

// stand-alone version
TagCanvas.Pause(canvasId);

The jQuery plugin version gets the canvas from the selector again, and uses the same tagcanvas() function, this time with the string "pause" passed in as an argument.

// jQuery plugin version
$(selector).tagcanvas("pause");

The jQuery selector may match multiple canvases - so you can pause some or all clouds on the page at once.

Resuming animation when paused

The resume functions continue the cloud animation with the same speed and direction as when it was paused. If the cloud is not paused, the resume function will have no effect.

The stand-alone version works by passing the canvas ID to the TagCanvas.Resume() function.

// stand-alone version
TagCanvas.Resume(canvasId);

The jQuery plugin version works similarly to the pause function, though the string "resume" must be passed to the tagcanvas() function instead of "pause".

// jQuery plugin version
$(selector).tagcanvas("resume");

This may also be used to resume multiple paused clouds by choosing a selector that includes the relevant canvases.

Reloading the list of tags

The reload function re-reads the list of tags from the same source, replacing the current list. It works in a similar way to calling Start again, but without all of the initialization code being run.

// stand-alone version
TagCanvas.Reload(canvasId);

The jQuery plugin version:

// jQuery plugin version
$(selector).tagcanvas("reload");

Updating the list of tags

The update function also reloads the list of tags, but keeps unchanged tags in (or close to) their current positions. This works by comparing the text content (or image source) of the tag and the href attribute. Tag weights and titles are updated without changing the tag positions.

// stand-alone version
TagCanvas.Update(canvasId);

The jQuery plugin version:

// jQuery plugin version
$(selector).tagcanvas("update");

In version 2.0, Update and the shuffleTags option didn't work well together - this has been fixed in version 2.1.

Bringing a tag to the front of the cloud

The TagToFront function moves a tag to the front of the cloud, bypassing the mouse or drag-based animation. You must specify which tag to bring to the front, using a list of options.

// stand-alone version
TagCanvas.TagToFront(canvasId, {id: "tag1"});

The jQuery plugin version:

// jQuery plugin version
$(selector).tagcanvas("tagtofront", {id: "tag1"});

There are a few options available to pass to the function. You must specify one of id, index or text for TagCanvas to find the tag to be moved.

The callback function is passed the relevant TagCanvas and Tag objects as arguments, and is called after the cloud has finished its movement.

Moving a tag to another position

TagToFront always moves the chosen tag to the front of the cloud - if you want the tag somewhere else, you must use the RotateTag function.

// stand-alone version
TagCanvas.RotateTag(canvasId, {id: "tag1", lat: 30, lng: -45});

The jQuery plugin version:

// jQuery plugin version
$(selector).tagcanvas("rotatetag", {id: "tag1", lat: 30, lng: -45});

The RotateTag function has a similar list of options, but you must also specify the lat and lng options for the position that you want the tag to be rotated to.

The lat option is the latitude of the destination - the up/down or north/south angle. The angle is in degrees, with 0° in the middle (or equator), 90° at the top (or north pole) and -90° at the bottom (the south pole).

The lng option is the longitude of the destination - the left/right or east/west angle.* This angle is also in degrees, with 0° at the front, 90° to the right/east, -90° to the left/west and both 180° and -180° at the back.

RotateTag and TagToFront both make use of the animTiming option to control the animation movement over time. The default option of “Smooth” uses a sine function to accelerate and decelerate at the start and end of the movement. The alternative “Linear” option rotates the cloud at a constant rate from start to finish.

Setting the cloud speed and direction

The initial option sets the speed and direction of the cloud movement when TagCanvas starts, but if you want to set it again after that you must use the SetSpeed function.

// stand-alone version
TagCanvas.SetSpeed(canvasId, [0.5, -0.25]);

The jQuery plugin version:

// jQuery plugin version
$(selector).tagcanvas("setspeed", [0.5, -0.25]);

The array argument is in the same format as the initial option, a multiple of the maxSpeed option in the X and Y directions. The cloud will maintain the new speed until it is changed by another function call or cursor input.

Removing the cloud

I added this function to help out people wanting to dynamically add and remove instances of TagCanvas on a page. It is easy enough to remove the canvas element from the DOM, but this leaves an instance of the TagCanvas class active, thus preventing you from reusing the same ID when you try to start it again.

// stand-alone version
TagCanvas.Delete(canvasId);

The jQuery plugin version:

// jQuery plugin version
$(selector).tagcanvas("delete");

The Delete function destroys the TagCanvas instance, leaving the canvas element intact on the page. What this means is that the contents of the canvas will be frozen at the time that the Delete function was called, no longer animating or accepting input. It is up to you to remove the canvas from the DOM using removeChild() or one of the jQuery functions for removing elements.