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

Asked

Viewed 99 times

1

Hi, I wonder if you have any way to change the size of each of the tags, I’m using tagcanvas.js and can’t change the size of these tags individually; 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
  • 1

    Have you seen in the documentation the option textHeight?

1 answer

1


I think you’re looking for the textHeight, in pixels, referred to in the documentation.

In your case the code would look like this textHeight30:

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

jsFiddle: http://jsfiddle.net/b71aa4xk/1/

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

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

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

jsFiddle: http://jsfiddle.net/rts94jkk/

  • Sergio do you want to add the text I put in my about the description and default value? I delete mine :)

  • 1

    @Maiconcarraro because, we answered +/- the same at the same time. Both are right, they can be both I think. +1

  • 1

    @Angelicaribeiro in this case you need to use the weightand tell him where to read it. Is this what you want? -> http://jsfiddle.net/rts94jkk/

  • 1

    I believe that’s right Sergio, I will remove my answer :)

  • 1

    That’s what I wanted @Sergio, thank you so much. :)

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.