goat1000 / tagcanvas

HTML5 canvas-based tag cloud

TagCanvas HTML5 canvas tag cloud

TagCanvas converts text or image links to a 3D rotating tag cloud. For examples, documentation, etc. please see: http://www.goat1000.com/tagcanvas.php

tagcanvas's Issues

why no support npm install

hi dear author:

I think this lib is very cool.but why no support npm install ?

Resolution

Why do my tags look like they're blurred?
How do I fix this?

support for onclick events

Is there any examples for images instead of links, it should be better to have the code as well

multiple color doesn't work?

hello,

I would like to set multiple font and color for my blog(http://hellosure.github.io).
So I followed http://www.goat1000.com/tagcanvas-styling.php .
But I couldn't change the color to multiple style.

I don't know why.

Clouds look blury although everything is left as default

I have been trying to solve the problem by , changing brightness, fonts, color, zoom, weight but none of them seem to work.Tried with jquery 3.4 and standalone version and everything. Blurry on every major browsers. even pasted codes from goat1000 examples.

support for hover events

Missed tagcanvas.jquery.json version update

the information in tagcanvas.jquery.json needs to be updated to version 2.11

有在vue中使用的吗

目前按常规方式 引入的 还需要弄dom元素 有没有vue直接使用的

Typescript support

Hello, I am looking for TS support. Trying to adding by myself but I don't have expertise enough on this matter.
Could you please help me to do it or provide?

Looking forward some comments.
Thanks!

jquery compatibility

Is compatible with jquery 3.x.x?

wheelZoom false don't work

Hello,
i've set wheelZoom to false but i can't prevent zooming with mousewheel.

here is the function:

if( ! $('#tagCloudCanvas').tagcanvas({
textColour : null,
outlineThickness : 1,
maxSpeed : 0.03,
depth : 0.6,
zoom : 1.0,
reverse : true,
outlineMethod : 'none',
shuffleTags : true,
maxSpeed : 0.05,
decel : 0.99,
initial : [0.08,-0.03],
textHeight : 26,
outlineThickness : 2,
outlineOffset: 3,
wheelZoom : false
})) {
// TagCanvas failed to load
$('#tagCloudContainer').hide();
}

fallback?

if the browser doesn't support html5 canvas i want to display an image but in these browsers tha canvas is empty and no image is displayed.

Her is my code:

• Allgemeinmedizin
• Gynäkologie & Geburtshilfe
• Orthopädie
• Urologie
• Dermatologie
• Neurologie
• Chirurgie
• Schmerztherapie
• Psychotherapie

// tagCloud
if($('#tagCloudContainer').length){
    try {
      TagCanvas.Start('tagCloudCanvas');
    } catch(e) {
      // something went wrong, hide the canvas container
      document.getElementById('tagCloudContainer').style.display = 'none';
    }

       if( ! $('#tagCloudCanvas').tagcanvas({
         textColour : null,
         outlineThickness : 1,
         maxSpeed : 0.03,
         depth : 0.6,
         zoom : 1.0,
         reverse : true,
         outlineMethod : 'none',
         shuffleTags : true,
         maxSpeed : 0.05,
         decel : 0.99,
         initial : [0.08,-0.03],
         textHeight : 26,
         outlineThickness : 2,
         outlineOffset: 3,
         wheelZoom : false
       })) {
         // TagCanvas failed to load
         $('#tagCloudContainer').hide();
       }

Support of bower.

Please add support of bower.

How to swap image when the tag is active?

Hi team,
You put an update for the TagCanvas that when we hover any tag in the canvas, it will swap the image with the another altImage when we set altImage: true. But it is not working for me or I didn't know whether I did it in a right way or not.

How to do this?

Canvas tags unaware of themselves when browser window is inactive

I've been having an issue with TagCanvas being unable to bring a "TagToFront" when the browser tab or window is inactive. I've narrowed it down to any tag's "xformed" attribute being undefined.

I use the following code to test:

setTimeout(function() { TagCanvas.TagToFront('tag-cloud', {index: 1}); },1000);

If I keep the tab with the tag canvas active, it runs fine. However, If I run that code and quickly change tabs, (so the TagToFront call happens while tab is inactive), it breaks with the following message:

Uncaught TypeError: Cannot read property 'x' of undefined
TCproto.RotateTag @ jquery.tagcanvas.self.js?body=1:1992
TagCanvas.RotateTag @ jquery.tagcanvas.self.js?body=1:2047
TagCanvas.TagToFront @ jquery.tagcanvas.self.js?body=1:2039

The "undefined" object to which the error is referring is the tag's "xformed" attribute. I've even gone as far as console.logging the xformed attribute, and it is indeed undefined when the browser tab is inactive.

Any idea why the tab's active status would cause this behavior?

How to customize tags?

Dear author:

How can I display multiple images simultaneously in a tag?

mouseover Event Firing

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.

TagCanvas constructor fails on backbone based application.

function TagCanvas(cid,lctr,opt) {
var i, p, c = doc.getElementById(cid), cp = ['id','class','innerHTML'], raf;

if the doc does not yet have the element, as is the case when attempting to render a view in backbone, then the tagCanvas fails because there is not element in the doc