wordcloud2.js
wordcloud2.js copied to clipboard
timdream
Background-Shapes for each Tag
There is an interesting and easy way to form a cloud-shape with CSS3 (http://thecodeplayer.com/walkthrough/make-a-simple-cloud-in-css3). I would really like to implement this (or any other way to build 'clouds') into wordcloud.js... as a background for each tag/text. And, of course, the clouds will resident, too, and there must not be an overlapping. That would look really awesome, I think. Do you think, it's possible (maybe with the span-option)?
I am not following ... are you looking at creating a cloud according to the shape drawn by CSS? That would be non-trivial because JavaScript don't have enough layout information to tell the actual shape.
If you are looking at draw the cloud into a specific shape, there are other methods available (with a mask image or with a polar equation), both would work better than getting a shape from CSS!
Sorry, I couldn't myself clear. Let me explain it with this example-graphic:
I want that cloud-shapes sourrounding the tags. With your elements-option I thought, a CSS3-Styling will be more easier to do this. If not, have you any idea, how can I perform such thing with your tool? Or do you know a skript, which wil handle this?
Ah, that's completely the other way around. What you want is very easy to do by drawing the cloud in a <div> and set some style to div > span. However, the cloud-drawing logic will not account the spacing required for the styling. Anything advanced would probably need to dive into the code...
Speak of, it would be great if there is some way to make the library plug-able to account for these use cases, but I haven't think of a good API yet.
Thank you for the reply, but I'm afraid, my expertise is not good enough to realise that. I just saw that CSS-Cloud, which looks pretty nice, but I've noticed, that there are only absolute sizes, so maybe that's a problem with the relativ sizes of the tags in your cloud?
But if you say, it's "very easy" could you please give me a solution or a walkthrough or a link-tipp for this case? I would really appreciate that. Thank you and have a nice week!
How to draw the cloud in a div, like you said? I will give it a try, but maybe you can introduce me only in this?
Pass a DOM Element object into elements argument here:
https://github.com/timdream/wordcloud2.js/blob/master/API.md#usage
If any of the elements is not a <canvas>, the code will attempt to draw text by appending <span> as child elements, instead of using ConvasContext2D API.