Multiple Animation Jcanvas

[Jofre]

Da hast du recht. Ich habe es abgeändert.

var myVar = setInterval(Flieg, 500);
var j = 0;
function Flieg() {
for (let i = 0; i <= 2; i++) {
$('canvas').drawArc({
layer: true,
name: 'myBox' + j,
fillStyle: '#'+ Math.floor(Math.random()*16777215).toString(16),
x: Math.floor(Math.random() * 1000) + 100,
y:400,
// x: 50 + i * 30, y: 400,
radius: 20
});
$('canvas')
.animateLayer('myBox' + j, {
y: 0,
}, 1000, function (layer) {
});
j++
}
}

Wenn ich jetzt wissen möchte ob ein Ballon mit einer bestimmten Farbe z.B. Rot angeklickt wurde, kann ich ihn dann in der click funktion über mxBox+j ansprechen?. Gilt das let auch für den Index j?
wenn ich das über

 

[Sempervivum]

Gilt das let auch für den Index j?

Daran habe ich gar nicht gedacht. Sicherlich nicht. Wenn es damit Probleme geben sollte, kann man es aber auch anders lösen.

Wenn ich jetzt wissen möchte ob ein Ballon mit einer bestimmten Farbe z.B. Rot angeklickt wurde, kann ich ihn dann in der click funktion über mxBox+j ansprechen?

Am besten gleich beim Erzeugen über jCanvas einen click-Handler registrieren, dann stellt sich Problem nicht.

 

[Jofre]

document.getElementById('??????').addEventListener('click', clickHandler, false);


Aber auch hier brauch ich eine Id. Und die hab ich nicht .

 

[Sempervivum]

Nein, so kannst Du auf die Objekte von jCanvas nicht zugreifen. Ich meine dies:
https://projects.calebevans.me/jcanvas/docs/mouseEvents/
Dann hast Du den Layer gleich als Parameter.

 

[Jofre]

Fehler: Bezeichner erwartet. Begreif nicht was ein Bezeichner da soll?

var myVar = setInterval(Flieg, 1000);
var j = 0;
function Flieg()
{

$('canvas').drawArc({
layer: true,
name: 'myBox' + j,
fillStyle: '#'+ Math.floor(Math.random()*16777215).toString(16),
x: Math.floor(Math.random() * 600) + 100,
y:400,
radius: 40,
});
$('canvas')
.animateLayer('myBox' + j, {
y: -100,
}, 4000, function (layer) {
});
click: function (layer)
{
fillStyle: 'blue',
alert(j)
};

j++

}
Rudi Ratlos

 

[Sempervivum]

Ja, da war ein Syntaxfehler.

1. Den Clickhandler musst Du beim Erzeugen des Layers registrieren.
2. Beim Animieren musst du die vorgegebene Syntax einhalten: https://projects.calebevans.me/jcanvas/docs/animateLayers/

Dies funktioniert:

        var myVar = setInterval(Flieg, 1000);
        var j = 0;
        function Flieg() {

            $('canvas').drawArc({
                layer: true,
                name: 'myBox' + j,
                fillStyle: '#' + Math.floor(Math.random() * 16777215).toString(16),
                x: Math.floor(Math.random() * 600) + 100,
                y: 400,
                radius: 40,
                click: function (layer) {
                    layer.fillStyle = 'blue';
                }
            });
            $('canvas').animateLayer('myBox' + j, {
                y: -80
            }, {
                duration: 4000,
                easing: 'linear',
                step: function (now, fx, layer) {
                    // do something for each step of the animation
                },
                complete: function (layer) {
                    // still do something at end of animation
                }

            });
            j++

        }

 

[Jofre]

Super, Danke Meister

Aber eine Frage: warum muss ich LAYER vor fillStyle setzen?

 

[Sempervivum]

Offenbar steht im click-Handler die ursprüngliche Umgebung nicht mehr zur Verfügung. Das Event feuert ja viel später, wenn das drawArc längst abgeschlossen ist. Daher muss man Javascript erneut sagen, auf welches Element es die Eigenschaft anwenden soll.