Beiträge von Jochen

    Kann es sein, dass jcanvas sich nicht mit visual studio verträgt?


    In dem Beispiel wird das rRechteck gezeichnet, der Text wird aber nicht gebracht.


    Fehlermeldung

    TypeError: propCache is undefined


    !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">


    body { background-color: #F3EFF9; margin: 30px; margin-top: 10px; }

    #Canvas { position: absolute; top: 0px; left: 0px; border: 5px red solid; background-color: #FFEFDB; }

    </style>

    </head>

    <body> <canvas id="Canvas" width="640" height="460"></canvas>

    <script>

    $('canvas').addLayer({ type: 'rectangle', fillStyle: 'red', x: 100, y: 100, width: 100, height: 50, fromCenter: false }) .drawLayers();

    $('canvas').drawText({ fillStyle: '#9cf', strokeStyle: '#25a', strokeWidth: 2, x: 150, y: 200, fontSize: 48, fontFamily: 'Verdana, sans-serif', text: 'Hello', fromCenter: false });

    </script>

    </body>

    </html>

    Gruß

    Jochen

    Was bringt step: function?


    In dem folgenden Beispiel teste ich ob ich eine Animation unterbrechen kann. Ich lasse ein Rectangle über eine Erhöhung des X Wertes horizontal über den Bildschirm wandeln.


    in step: function versuche ich ab einen bestimmten X Wert eine Veränderung herbei zu führen. Nichts passiert.


    Was nutzt dann die Step funcion?


    var x;


    $('canvas').drawRect({

    layer: true,

    name:'myBox',

    fillStyle: 'red',

    x: 100, y: 100,

    width: 100, height: 50

    });

    $('canvas').animateLayer('myBox', {

    x: 400

    }, {

    duration: 3000,

    easing: 'swing',

    step: function (now, fx, layer) {

    if (x>250){fillStyle="green";

    aler("hallo"); }

    },

    complete: function (layer) {

    $('canvas').setLayer('myBox', {

    fillStyle: 'blue',

    rotate: 30,

    x: '+=10',

    y: '-=10'

    })

    .drawLayers();


    }


    });

    </script>


    LG aus Portugal


    Jochen

    Wünsche eine tolle Woche.,


    Ich gebe einen mehrzeilligen Text über drawText aus. Der Zeilenumbruch gelingt mit \n.

    Ich habe diverse Versuche gestart den Text linksbündig auszugeben.

    Ich dachte nach diversen Hinweisen im Netz, dass es mit textAlign : 'left'klappt.


    $('canvas').setLayer('myText', {

    fillStyle: 'black',

    x: 50,

    y: 100,

    textAlign: 'left',

    text: 'Am Bildschirm werden gleich Namen erscheinen. Vornamen + Nachnamen. Diese musst du dir merken.\n\n'+

    'Nach einer ge...........................................................


    Ergebnis: Nichts passiert. Pustekuchen


    LG


    Jochen

    Ich kenne die Ursache.


    html-seminar.de/woltlab/attachment/1480/


    Wenn ich in der ersten Reihe im ersten Durchlauf einen Vornamen angeklickt habe lasse ich die Reihe mit



    function Treffer(v,i,nn,name,ar)

    {

    if (v==i)


    {


    $('canvas').setLayer( 'ntext' + (nn-2) + transfer, {

    fillStyle: 'red',

    text: name[ar[transfer]],

    })

    .drawLayers();


    $('canvas').setLayerGroup('Rec' + nn, {

    visible:false,

    }).drawLayers();

    ;

    $('canvas').setLayerGroup('Namen' + nn, {

    visible:false,

    }).drawLayers();

    ;

    }

    }


    Verschwinden.


    Im zweiten Durchlauf erstelle ich die Namensleiste neu mit anderen Vornamen.


    Und dann funktioniert das zweite clicken nicht weil er ????????????????????? die Reihe aus dem ersten Durchlauf im Köcher hat.


    Kann ich das Problem lösen wenn ich in der obigen


    function ErstellNamensListe(nn,ar,rr,x0,y0,ff)


    die alte Leiste wieder sichtbar mache und dann die neuen Namen für den Text ( Vornamen) reinschreibe.


    Oder arbeitet ich bessewr mit removeLayers()?


    LG


    Jochen

    Was mach ich jetzt schon wieder falsch. Gebe nach 2 Stunden auf.


    In der fogenden Funktion ErstellNamensListe soll, wenn gklickt wird, die Funktion Treffer ausgeführt werden.

    Das funktioniert nur einmal. Nur beim ersten Click Ereignis. Wird die Funktion ErstellNamensListe ein zweites Mal aufgerufen reagiert sie nicht auf das Click Ereignis..



    function ErstellNamensListe(nn,ar,rr,x0,y0,ff)

    {

    var xstart = x0; var ystart =y0;

    var wrect = 90; var hrect = 40; var dist = 5;

    borderColor = 'black'; borderWidth = 2;

    for ( let i =0 ; i<rr.length; i++)

    {

    $('canvas').drawRect({

    layer: true,

    name: 'Rec' + nn +i,

    groups: [ 'Rec' + nn],

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

    x: xstart + (i*( wrect+dist)), y: ystart, width: wrect, height: hrect,

    fromCenter: false,

    click: function(layer)

    {


    if (ff == 1)

    {

    if (nn==3)

    {


    Treffer(zrv,i,nn,vnamen,brv);

    }

    }

    }

    });

    $('canvas').drawText({

    layer: true,

    name: 'ntext' + nn +i,

    groups: ['Namen'+nn],

    fillStyle: 'black',

    x: 5 + xstart+ (i* (wrect+dist)),

    y: ystart+15,

    text: ar[rr[i]],

    fromCenter: false

    });

    }

    }


    Schöne Ostertage


    Jochen

    Wenn man auf ein bestimmtes Feld klickt, kommt die folgende Funktion zur Anwendung;



    function Treffer(v,i,nn)

    {

    if (zrv==i)


    {

    $('canvas').setLayer( 'ntext' + 1 + transfer, {

    fillStyle: 'red',

    text: vnamen[brv[transfer]],

    })

    .drawLayers();


    $('canvas').setLayerGroup('rec' + nn, {

    visible:false,

    });

    $('canvas').setLayerGroup('Namen' + nn, {

    visible:false,

    }) ;

    }

    }


    klickt man auf das bestimmte Feld, dann wird gemäss


    $('canvas').setLayer( 'ntext' + 1 + transfer, {....

    der Text in Rot dargestellt,


    Soweit in Ordnung.


    Es werden aber nicht die beiden nachfolgenden setLayerGroup Anweisungen durchgeführt,


    Wenn man dann ein ZWEITES Mal auf das betimmte Feld klickt, dann werden diese beiden Anweisungen ausgeführt-


    Was ist da zu ändern, damit alle 3 Anweisungen mit dem 1.Klick erledigt werden.



    Zur Info der Klick Aufruf:


    click: function(layer)

    {

    if (ff == 1)

    {

    AendereText(1,' ???');

    Treffer(zrv,i,nn);

    }}

    LG


    Jochen

    ich erzeuge mit der nachfolgend dargestellten Funktion 3 Reihen mit Rechtecken incl Text.


    ErstellNamensListe(vnamen,brv,50,100,0);

    ErstellNamensListe(nnamen,brn,50,150,0);

    ErstellNamensListe(vnamen,mrv,50,250,1)



    html-seminar.de/woltlab/attachment/1475/




    Die Funktion ::


    function ErstellNamensListe(ar,rr,x0,y0,ff)

    {

    var xstart = x0; var ystart =y0;

    var wrect = 110; var hrect = 40; var dist = 5;

    /////////////////////////////////////// Ausgabe Vornamen und Nachnamen



    for ( let i =0 ; i<rr.length; i++)

    {

    $('canvas').drawRect({

    layer: true,

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

    x: xstart + (i*( wrect+dist)), y: ystart, width: wrect, height: hrect,

    fromCenter: false,

    click: function(layer) {

    if (ff == 1)

    {

    alert("test HI");}}

    });

    $('canvas').drawText({

    layer: true,

    name: 'ntext' + i,

    groups: ['nachNamen'],

    fillStyle: 'black',

    x: 5 + xstart+ (i* (wrect+dist)),

    y: ystart+15,

    fontSize: 15,

    fontFamily: 'Verdana, sans-serif',

    text: ar[rr[i]],

    fromCenter: false

    });}}

    //////////////////////


    Wenn der Parameter ff in der Parameterleiste der Funktion = 1 gesetzt ist, soll ein Click
    (hier im Beispiel) ein alert bringen.

    Das funktioniert auch.



    Aber:


    Wenn ich die 3. Leiste ( hier ist ff = 1 gesetzt) anklicke, kommt das Alert . Es verschwinden aber die Namen auf der 2. und 3. Leiste


    html-seminar.de/woltlab/attachment/1476/


    Das gleiche passiert mit den Namen wenn ich im Canvas an einer beliebigen Stelle klicke.


    LG


    Jochen

    Hallo


    Ich habe in einer Funktion zwei Arrays kreiert. Diese möchte ich über return an eine dritte Variable für eine andere Funktion übergeben.

    So möchte ich erreichen, dass ich 2 Variable über ein return weitergen kann.


    Nach der Übergabe möchte ich die beiden ursprünglichen Arrays wieder erstellen.


    Ich habe es versucht mit var3 = array1.push(array2)


    und dann

    var31 = var3.slice(0,4)

    var32 = var3.slic(4,9)


    Es funktioniert nicht. UNDEFINED


    Es muss an dem push liegen. Obwohl beim console.log die var3 wie gewünscht aussieht, passiert irgendwo im tieferen Inneren von Javascript etwas mit var3.


    Kann ich es nur lösen indem ich var3 über eine Laufanweisung mit Array1 und Array2 fülle und später über slice trenne?.


    LG


    Jochen

    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>

    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