Click Bereich unsichtbar erweitern

Jofre

Erfahrenes Mitglied
Grüß Gott,

Grundlage der Frage:

var myVar = setInterval(Flieg, 1000);
var j = 0;
function Flieg()
{
$('canvas').drawArc({
layer: true,
name: 'myBox' + j,
fillStyle: Farbe(),
x: Math.floor(Math.random() * 1200) + 100,
y: 800,
radius: 40,

click: function (layer) {
layer.fillStyle = '#FFEFDB'
}

});
$('canvas').animateLayer('myBox' + j, {
y: -180
}, {
duration: 8000,
easing: 'linear',
step: function (now, fx, layer) {

},
complete: function (layer) {

}
});

j++
}
function Farbe()
{
farbe = [" red", "red", "green", "yellow", "black","coral", "orange", "red", "indigo","palegreen","green","blue" ];
return farbe[Math.floor((Math.random() * farbe.length-1))];
}


Die Frage:

Wenn man abfragt ob der Kreis angeklickt wurde, bekommt man einen Response, der mit dem persönlichen Eindruck gut übereinstimmt wenn die Kreise langsam fliegen. Man meint man hättre getroffen und das Programm bestätigt es. Der Kreis wird blue.k
Fliegen die Kreise schnell, dann meint man oft, dass man den Kreis getroffen hat. Aber das stimmt nicht mit den Fakten überein, der Kreis hier im Code wird nicht blue.
Auge/Gehirn und Programm (Realität) laufen auseinander. Das erzeugt Frust.
Deshalb fände ich es hilfreich wenn man den Kreis unsichtbar erweitert. Damit wird er für die Klick Abfrage größer für das Auge. Somit stimmen dann vermeintliche Treffer mit den „augenscheinlichen“ Treffern mehr überein. Der Frust kommt erst gar nicht auf.
Frage:
Eine Idee wie man elegant um den sichtbaren Kreis eine erweiterte Treffer Zone legen kann?
Ich hoffe ich konnte mein Anliegen transparent rüber bringen.

LG

Joachim
 
Eine Möglichkeit ist, zwei Kreise übereinander zu legen, wobei der größer transparent ist. jCanvas kennt Layergroups, so dass man sowohl das Clickevent der Gruppe zuweisen als auch die Gruppe animieren kann.
 
Das hatte ich schon als Möglichkeit gesehen. Ich befürchte nur, dass ich dann irgendwann/irgendwo mich mit der Gruppe verhasple. Ich brauche es ja nur für das Klick Ereigniss..
 
Eine andere Möglichkeit fällt mir im Moment nicht ein. Für das Clickevent braucht man ja ein Objekt, dem man es zuweisen kann.
 
Könnte man nicht einen Virtuellen kreiß rumherum machen.
Wenn man die position des Kreisses kennt und dann zb rumherum ein padding von 10 pixel dazurechnet ,hätte man doch einen Virtuellen größeren Kreis .Dann beim klicken der Maus die position der Maus mit den Virtuellen Kreis abgleichen ??
Wahrscheinlich denke ich wieder zu ümständlich. Da es Canvas ist kann ich meine Idee auch nicht testen,weil ich es nicht kann.Von da her weiter machen ich bin wieder weg.
 
Der Durchmesser soll nicht vergrößert werden. Vertikal soll der Klickbereich unsichtbar erweitert werden.
Heute Nacht hatte ich dann die Erleuchtung.
Ich nehme ein Bild mit der Breite x und der Höhe y. Das Bild ist transparent. Lediglich der darauf gezeichnete Ballon ist zu sehen. Das x entspricht der Breite des gezeicneten Ballons, y variert mit der Schnelligkeit des Fluges.
 
Wenn Du ein Bild nimmst, hast Du aber ein Problem mit den Zufallsfarben. Du müsstest für jede Farbe ein Bild anfertigen ...
 
Den Klickbereich nur vertikal zu erweitern, ist ein gute Idee. Ich habe das mal mit Ellipsen und Layergroups implementiert. Du kannst statt Ellipsen natürlich auch Rechtecke nehmen. Um den Klickbereich sichtbar zu machen, habe ich ihm provisorisch einen hellgrauen Hintergrund gegeben.
Javascript:
        function Flieg() {
            var xPos = Math.floor(Math.random() * 600) + 100;
            $('canvas').drawEllipse({
                layer: true,
                groups: ['group-' + j],
                name: 'myBox-' + j + '-outer',
                // fillStyle: 'rgba(0, 0, 0, 0)',
                fillStyle: 'lightgrey',
                x: xPos,
                y: 400,
                width: w,
                height: h,
                fromCenter: true,
                click: onclick
            }).drawArc({
                layer: true,
                groups: ['group-' + j],
                name: 'myBox-' + j,
                fillStyle: '#' + Math.floor(Math.random() * 16777215).toString(16),
                x: xPos,
                y: 400,
                radius: r,
                fromCenter: true,
                click: onclick
            }).animateLayerGroup('group-' + j, {
                y: -80
            }, 10000);
            j++;
            function onclick(layer) {
                var j = layer.name.split("-")[1];
                console.log(j);
                $('canvas').setLayer('myBox-' + j, {
                    fillStyle: 'blue'
                });
            }
        }
 
Zurück