way to change the size of each of the tags using tagcanvas.js

Question

way to change the size of each of the tags using tagcanvas.js

Navigation

#1 by (1 votes)

1

Hi, I would like to know if there is any way to change the size of each of the tags, I'm using tagcanvas.js and I can not change the size of these tags individually; the html is like this

<!DOCTYPE html>
<html>
<head>
<title>Nuvem de Tags</title>

<script src="js/tagcanvas.js" type="text/javascript"></script>
<script type="text/javascript">
    window.onload = function() {
        try {
            TagCanvas.Start('myCanvas', 'tags', {
                textColour : '#000000',
                outlineColour : '#ff0000',
                reverse : true,
                depth : 0.8,
                maxSpeed : 0.03
            });
        } catch (e) {
            document.getElementById('myCanvasContainer').style.display = 'none';
        }
    };
</script>

</head>
<body>
    <div id="myCanvasContainer" style="text-align: center">
        <canvas width="1000" height="1000" id="myCanvas">
      </canvas>
    </div>
    <div id="tags" style="text-align: center">
        <ul>
            <!--         links que quero que cada um fique com tamanho de fonte diferentes -->

            <li><a href="linksGeneralReference.html" target="_blank">GENERAL
                        AND REFERENCE</a></li>
            <li><a href="linksAppliedComputing.html" target="_blank">APPLIED
                    COMPUTING</a></li>
            <li><a href="linksComputerSystemsOrganization.html"
                target="_blank">COMPUTER SYSTEMS ORGANIZATION</a></li>
            <li><a href="linksEmbeddedCyberPhysical.html" target="_blank">EMBEDDED
                    AND CYBER PHYSICAL SYSTEMS</a></li>
         </ul>
    </div>

javascript html5

asked by anonymous 16.06.2015 / 23:45

1 answer

Convert JSoup doc to string, apply Regex, and return a value in String Google reCAPTCHA 2 with AJAX

score 1 · Accepted Answer

I think you're looking for textHeight , in pixels, referenced in the documentation .

In your case the code would look like this with textHeight 30:

TagCanvas.Start('myCanvas', 'tags', {
    textColour: '#000000',
    outlineColour: '#ff0000',
    reverse: true,
    depth: 0.8,
    maxSpeed: 0.03,
    textHeight: 30
});

jsFiddle: link

If you want to have different sizes in tags different use a combination of:

weight: true, // para ativar essa função
weightFrom: 'data-weight' // neste caso usei o data-height

In HTML you have to put the "weight" that you want to give each tag with <a data-weight="30" for example ...