Jcanvas Index zurückgeben

Du arbeitest gerne mit Canvas wa?

Aber jederhat was was er gerne macht oder nicht gerne,

Würde dir ja gerne helfen bei deinen Problemen ,aber Canvas ist nicht mein Thema.

Fals ich mal mit Canvas anfange wird du mir wohl helfen.

Zitat

Mit dem nr kann ich nicht arbeiten, Hier erhalte ich immer den letzten Index.

Dies ist ein häufiges Problem, wenn man Eventlistener in einer Schleife zuweist und diese auf einen Schleifenindex zugreifen: Wenn das Event feuert, ist die Schleife längst durchgelaufen und der Index, hier die Variable nr, hat den Endwert, hier 10.

Lösen kann man dies durch die Verwendung einer Funktion, wie du schon geschrieben hast oder einfacher, indem man "let" statt "var" bei der Initalisierung verwendet. Dann findet der Listener den Wert vor, den die Variable hatte, als der Listener registriert wurde.

Und um jederzeit auf die Elemente zugreifen zu können, empfehle ich, ihnen Namen zu geben.

<canvas width="400" height="300"></canvas>
    <script>
        var wrect = 50, hrect = 50, dist = 5,

            xstart = 50, ystart = 50,

            cv = $("canvas");



        for (let x = xstart, y = ystart, nr = 0; nr < 10; nr++) {

            var num = nr;

            cv.drawRect({
                name: 'rect' + nr,
                layer: true,

                fillStyle: 'lightblue',

                x: x, y: y, width: wrect, height: hrect,

                fromCenter: false,



                click: function (layer) {
                    var txt = cv.getLayer('text' + nr).text;
                    alert(txt);

                    $(this).animateLayer(layer, {

                        fillStyle: 'blue'

                    });



                }

            }).drawText({
                name: 'text' + nr,
                layer: true,

                fillStyle: 'black',

                x: x + wrect / 2,

                y: y + hrect / 2,

                text: nr

            });

            if ((nr + 1) % 5 == 0) {

                y += dist + hrect;

                x = xstart;

            } else {

                x += dist + wrect;

            }

        }
    </script>

Zitat

.getLayer('text' + nr).text;

was macht dieser Ausdruck genau?

Was bedeuted das .text

getLayer('text' + nr)ermittelt den Layer mit dem Namen des Eingangsparameters. Zuvor wurde dieser mit dem selben Namen erzeugt: .drawText({ name: 'text' + nr,. D. h. wenn nr = 5 lautet der Name text5. 'text' ist nur ein Bestandteil des Namens, den ich selber fest gelegt habe.

Und mit .text ermittelt man den Wert des Attributes, das man zuvor hinein geschrieben hat. Du hast Recht, die Doku ist hier etwas dürftig. Das dies geht, habe ich nur durch Probieren heraus gefunden.

Zitat

warum ist das Ergebnis nur nr, dh zB. nur "3" wenn da zweimal text verwandt wird?

'text' wird nur im Namen verwendet. In das Attribut text wurde beim drawText nur nr hinein geschrieben: text: nr Man könnte irgend etwas hinein schreiben wie 'hallo' und könnte dann diesen Text wieder heraus lesen. Das Attribut text hat mit dem Namen nichts zu tun.

Vgl. auch mit dem anderen Beispiel mit den Plus- und Minus-Tasten: Dort kann man das Attribut text beliebig verändern wobei der Name immer gleich bleibt.

Mag zunächst ein wenig kompliziert sein, aber nur dadurch kann man ein gezeichnetes Element hinterher wieder ansprechen und verändern. Bei einfachem Javascript ist das nicht möglich. Man müsste "zu Fuß" die gezeichneten Elemente in Objekten parallel halten und nach jeder Änderung neu zeichnen. Genau das tut jCanvas hinter den Kulissen, aber es ist verborgen und man muss sich darüber keine Gedanken machen.