Javascript : tagcanvas

Les options de tagcanvas….

TagCanvas - an HTML5 Canvas Tag Cloud
Capture de l’effet 3D de tagcanvas

Un exemple simple sur notre page accueil :

TagCanvas options – Hide table

activeCursor""pointer""The CSS cursor type to use when the mouse is over a tag.
animTiming"Smooth"The animation timing function for use with the RotateTag and TagToFront functions. The values available are « Smooth » and « Linear ».
bgColournullBackground colour of tag, null for no background. The string "tag" means use the original link background colour.
bgOutlinenullColour of tag background outline. Use null for the same as the text colour, use "tag" for the original link text colour.
bgOutlineThickness0Thickness of tag background outline in pixels, 0 for no outline.
bgRadius0Radius for rounded corners of background in pixels.
centreFuncnullFunction 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. See the centre callback function page for details.
centreImagenullImage to draw at centre of cloud. Uses a built-in centreFunc callback function to draw the image at full size in the middle of the canvas.
clickToFrontnullIf set to a number, the selected tag will move to the front in this many milliseconds before activating.
decel0.95Deceleration rate when mouse leaves canvas.
depth0.5Controls the perspective (0.0-1.0)
dragControlfalseWhen enabled, cloud moves when dragged instead of based on mouse position.
dragThreshold4The number of pixels that the cursor must move to count as a drag instead of a click.
fadeIn0Time to fade in tags at start, in milliseconds.
freezeActivefalseSet to true to pause movement when a tag is highlighted.
freezeDecelfalseSet to true to decelerate when highlighted tags freeze instead of stopping suddenly.
frontSelectfalseSet to true to prevent selection of tags at back of cloud.
hideTagstrueSet to true to automatically hide the tag list element if TagCanvas is started successfully.
imageAlign""centre""Horizontal image alignment, one of “centre”, “left” or “right”.
imageModenullWhat to display when tag contains images and text. nullImage if present, otherwise text. imageImage tags only. textText tags only. bothImage and text on tag using imagePosition.
imagePadding2Distance between image and text when using an imageMode of “both”.
imagePosition""left""Position of image relative to text when using an imageMode of “both”. Options are “left”, “right”, “top“ or “bottom”.
imageRadius0Radius for image corners, in pixels. Also supports using a percentage which must be enclosed in a string, e.g. "20%".
imageScale1Amount 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.
imageVAlign""middle""Vertical image alignment, one of “middle”, “top” or “bottom”.
initialnullStarting rotation speed, with horizontal and vertical values as an array, e.g. [0.8,-0.3]. Values are multiplied by maxSpeed.
interval[1]20Interval between animation frames, in milliseconds.
locknullLimits 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 the initial option is used to give it a starting speed.
maxBrightness1.0Brightness (opacity) of tags at front of cloud (0.0-1.0).
maxSpeed0.05Maximum speed of rotation.
minBrightness0.1Brightness (opacity) of tags at back of cloud (0.0-1.0).
minSpeed0.0Minimum speed of rotation when mouse leaves canvas.
minTags0The minimum number of tags to show in the cloud. If the number of links available is lower than this value, the list will be repeated. The maximum supported value is 200. The repeatTags option takes precedence over minTags.
noMousefalseSet to true to prevent any mouse interaction. The initial option must be used to animate the cloud, otherwise it will be motionless.
noSelectfalseSet to true to prevent the selection of tags.
noTagsMessagetrueDisplays “No tags” instead of an empty canvas when there are no tags available.
offsetX0Offsets the centre of the cloud horizontally (measured in pixels)
offsetY0Offsets the centre of the cloud vertically (measured in pixels)
outlineColour""#ffff99""Colour of the active tag highlight. This can be a colour to use for all tags, or one of these options to set the colour differently for each tag: tag Use the text colour from the original tag link tagbg Use the background colour from the original tag link See also the “outline” weightMode for another way to set the highlight colour.
outlineDash0Size of marching ants dash for outline/classic highlights, 0 for no dashes
outlineDashSpace0Size of space between marching ants dashes, 0 for same as outlineDash
outlineDashSpeed1Speed of marching ants animation, 0 for no movement, negative for reverse
outlineIncrease4Number of pixels to increase size of tag by for the “size” outline method. Negative values are supported for decreasing the size.
outlineMethod""outline""Type of highlight to use. Options are: outline An outline at the same depth as the active tag. classic Old-style outline on top of all tags. block Solid block of colour around the active tag. colour Changes the colour of the text or image of the current tag to the outlineColour value. size Increases the size of the tag, using the outlineIncrease option for the amount. none No highlighting at all.
outlineOffset5Distance of outline from text, in pixels. This also increases the size of the active area around the tag.
outlineRadius0Radius for rounded corners on outline box in pixels
outlineThickness2Thickness of outline in pixels
padding0Amount of space around text and inside background.
pinchZoomfalseSet to true to enable zooming in and out of the cloud by pinching on touchscreen devices.
pulsateTime3Pulse rate, in seconds per beat
pulsateTo1.0Pulsate outline to this opacity (0.0-1.0)
radiusX1Initial size of cloud from centre to sides.
radiusY1Initial size of cloud from centre to top and bottom.
radiusZ1Initial size of cloud from centre to front and back.
repeatTags0The number of times to repeat the list of tags in the cloud. The maximum supported value is 64. This option overrides the minTags option.
reversefalseSet to true to reverse direction of movement relative to mouse position.
scrollPause0Animation delay in milliseconds for when the page is being scrolled. Applies to all TagCanvas instances on the page.
shadow""#000000""Colour of the shadow behind each tag.
shadowBlur0Amount of tag shadow blurring, in pixels.
shadowOffset"[0,0]"X and Y offset of the tag shadow, in pixels.
shape""sphere""The shape of the cloud. Currently supported are sphere, hcylinder for a cylinder that starts off horizontal, vcylinder for a cylinder that starts off vertical, hring for a horizontal circle and vring for a vertical circle. You may also provide the name of a function to use for generating the shape. See the TagCanvas shapes page for details and examples.
shuffleTagsfalseSet to true to randomize the order of the tags.
splitWidth0If 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.
stretchX1Stretch or compress the cloud horizontally.
stretchY1Stretch or compress the cloud vertically.
textAlign""centre""Horizontal text alignment, one of “centre”, “left” or “right”.
textColour[2]""#ff99ff""Colour of the tag text – empty string or null to use the colour of the original link.
textFont[2]""Helvetica, Arial,
Font family for the tag text – empty string or null to use the font of the original link.
textHeight15Height of the tag text font (in pixels).
textVAlign""middle""Vertical text alignment, one of “middle”, “top” or “bottom”.
tooltip[3]nullSets tooltip display method: null for no tooltips; native for operating system tooltips; div for div-based.
tooltipClass[3]""tctooltip""Class of tooltip div.
tooltipDelay[3]300Time to pause while mouse is not moving before displaying tooltip div, in milliseconds.
txtOpttrueText optimisation, converts text tags to images for better performance.
txtScale2Scaling factor of text when converting to image in txtOpt mode.
weight[4]falseSet to true to turn on weighting of tags.
weightFrom[4]nullThe link attribute to take the tag weight from. The default of null means that the weight is taken from the calculated link font size.
weightGradient[4]"{0:'#f00', 0.33:'#ff0',
0.66:'#0f0', 1:'#00f'}"
The colour gradient used for colouring tags, backgrounds, etc. when using a colour-based weight mode.
weightMode[4]""size""Method to use for displaying tag weights. Should be one of: size Display more significant tags in a larger font size. colour Display tags using colour values from the weightGradient option. both Use both size and colour to visualise weights. bgcolour Use a weightGradient to set the tag background colour. bgoutline Use a weightGradient to set the tag background outline colour. Tag background outlines must be enabled using the bgOutlineThickness option. outline Use a weightGradient to set the tag highlight colour.
weightSize[4]1.0Multiplier for adjusting the size of tags when using a weight mode of size or both.
weightSizeMax[4]nullMaximum font size when weighted sizing is enabled.
weightSizeMin[4]< /a>nullMinimum font size when weighted sizing is enabled.
wheelZoomtrueEnables zooming the cloud in and out using the mouse wheel or scroll gesture.
zoom1.0Adjusts the relative size of the tag cloud in the canvas. Larger values will zoom into the cloud, smaller values will zoom out.
zoomMax3.0Maximum zoom value.
zoomMin0.3Minimum zoom value.
zoomStep0.05The amount that the zoom is changed by with each movement of the mouse wheel.