goat1000 / tagcanvas Goto Github PK
View Code? Open in Web Editor NEWHTML5 canvas-based tag cloud
HTML5 canvas-based tag cloud
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
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:
// 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();
}
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?
目前按常规方式 引入的 还需要弄dom元素 有没有vue直接使用的
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.
the information in tagcanvas.jquery.json needs to be updated to version 2.11
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();
}
Please add support of bower.
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.
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.
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!
Is compatible with jquery 3.x.x?
hi dear author:
I think this lib is very cool.but why no support npm install ?
Dear author:
How can I display multiple images simultaneously in a tag?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.