Jcanvas : texte dynamisch mit Layer setzen

  • Ich möchte einen Text mit Werten aus 2 Arrays in einem drawText ausgeben.


    Ich habe hier den

    text: auskommentiert


    Auszug:


    }).drawText({

    name: 'text' + nr,

    layer: true,

    fillStyle: 'black',

    x: x + wrect / 2,

    y: y + hrect / 2,

    //text: vnamen[nr],

    groups: ['myNamen']

    });


    im Folgenden möchte ich text etwas überweisen. Wenn die Laufvariable kleiner 3 ist Text aus vnamen

    ansonsten text aus nnamen:


    var yy='text' + nr;

    if (nr <3)

    { $('canvas').setLayer('yy', { text:vnamen[nr]}); }

    else

    {$('canvas').setLayer('yy', { text:nnamen[nr]});}


    Ich dachte es funktioniert mit setLayers. Tuts bei mir aber nicht.


    LG


    Jochen

  • Beim reinen Lesen kann ich keinen Fehler entdecken. Hast Du auch an das drawLayers() gedacht?

    Ich würde setLayer nur einmal aufrufen:

    Code
    var yy='text' + nr;
    if (nr < 3) var txt = vnamen[nr];
    else var txt = nnamen[nr]
    $('canvas').setLayer('yy', { text: txt}).drawLayers();
  • Funktioniert nicht. Anbei lauffähige Version



    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.0/jcanvas.js"></script>

    <style type="text/css">


    #Canvas {

    position: absolute;

    top: 0px;

    left: 0px;

    border: 1px red solid;#thing;

    background-color: #FFEFDB;

    }

    </style>

    </head>

    <body>

    <canvas id="Canvas" width="740" height="400" ></canvas>

    <script>


    var nnamen=new Array;

    nnamen=["Wegmann","Schmidt","Schneider","Fischer","Weber","Meyer","Wagner","Becker","Schulz","Hoffmann","Koch",

    "Bauer","Richter","Klein","Wolf","Neumann","Lange","Schmitt","Schmitz","Krause","Lehmann"];



    var vnamen=new Array;

    vnamen=["Anna","Maria","Julia","Eva","Olga","Reante","Baerbel","Ulla","Jan","Alexander",

    "Michael","Christian","Peter", "Martin","Klaus","Andreas","Jens","Hans","Stefan","Wolfgang","Uwe","Marion","Claudia"];


    cv = $("Canvas");

    var x=100;

    var y=100;

    var breite =120;

    var hoehe = 60;


    for (let nr = 0; nr < 6; nr++) {


    cv.drawRect({

    name: 'rect' + nr,

    layer: true,

    strokeStyle: 'black',strokeWidth: 1,fillStyle: 'lightblue',

    fillStyle: '#BCD9F0',

    x: 10+nr*breite, y:100, width: 70, height: 40,


    fromCenter: false,

    click: function (layer) {

    var txt = cv.getLayer('text' + nr).text;

    alert(nr);

    }

    }).drawText({

    name: 'text' + nr,

    layer: true,

    fillStyle: 'black',

    x: 50+ nr* breite,

    y: y + 10,

    //text: nnamen[nr],

    groups: ['myNamen']

    });


    var yy='text' + nr;


    if (nr < 3) var txt = vnamen[nr];

    else var txt = nnamen[nr]

    $('canvas').setLayer('yy', { text: txt}).drawLayers();

    }


    </script>

    </body>

    </html>

  • Den Fehler habe ich eben auch nicht gesehen:

    setLayer('yy', {

    Du willst ja nicht den String 'yy' übergeben, sondern den Inhalt der Variablen yy, die den Namen enthält. Nimmt man die Hochkommas weg, funktioniert es.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!