Laden...

Bewegung von einer Maus in einer kleinen Grafik darstellen/tracken

Erstellt von PierreDole vor 6 Jahren Letzter Beitrag vor 6 Jahren 1.786 Views
P
PierreDole Themenstarter:in
74 Beiträge seit 2017
vor 6 Jahren
Bewegung von einer Maus in einer kleinen Grafik darstellen/tracken

Moin,
ich möchte eine Art Mausbewegungs-Viewer schreiben und verzweifle an der Berechnung. Die Aufgabe ist ganz einfach: wenn ich die Maus bewege, soll es in einer kleinen Grafik angezeigt werden. Ich habe ein Kreis von 150px Durchmesser, mit einer kleinen grafischen Maus in der Mitte, und wenn ich meine Maus z.B. nach oben bewege, bewegt sich die grafische Maus nach oben an den Rand des Kreises. Je nach dem wie ich relativ zum letzten Punkt (Stillstand) meine Maus bewege, soll sich die grafische Maus in diesem Kreis bewegen.
Ich habe zwei Koordinaten: die Ausgangskoordinate und die Aktuelle. Und jetzt kommt Mathe... wo wir bei meinem Problem wären: es ist über 20 Jahre her, als ich Mathe-Unterricht hatte und ich finde einfach keinen Ansatz. Mache ich das irgendwie mit Winkeln oder doch lieber mit Verhältnissen(x zu y)? Oder doch völlig anders? Wäre sehr dankbar, wenn mir jemand einen kleinen Denkanstoß geben könnte.

2.079 Beiträge seit 2012
vor 6 Jahren

Ich würde mit Verhältnis der Positionen rechnen.
Das geht am einfachsten, wenn Du mit einem Viereck rechnest.
Wenn die X-Koordinate 30% von der Desktop-Höhe ist, dann nimmst Du auch 30% von der Höhe des Vierecks. Das Gleiche für die Y-Koordinate.

Danach musst Du berechnen, ob der virtuelle Punkt sich im Kreis befindet.
Der Kreis ist ein echter Kreis, sprich ein gleichbleibender Radius?
Dann berechne einfach den Abstand vom virtuellen Punkt zum Mittelpunkt und vergleiche mit dem Radius.

Befindet er sich im Kreis: Anzeigen
Befindet er sich nicht im Kreis: Ausblenden

So kommst Du ohne komplexe Mathematik aus

NuGet Packages im Code auslesen
lock Alternative für async/await

Beim CleanCode zählen nicht die Regeln, sondern dass wir uns mit diesen Regeln befassen, selbst wenn wir sie nicht befolgen - hoffentlich nach reiflichen Überlegungen.

T
154 Beiträge seit 2009
vor 6 Jahren

Mehrmals pro Sekunde (ich würd ca. 10-100ms nehmen) die Mausposition abfragen, dabei die vorherige immer speichern. Einfach die neue Position - die alte rechnen, damit hast du die Delta-Position, also die Verschiebung.

Mit den trigonometrischen Funktionen (Sinus, Cosinus, Tangens) kannst du dann den Winkel berechnen. Die Delta-Koordinaten (Vektor) stellen dabei die Hypotenuse (die lange Seite des daraus gebildeten Dreiecks) dar. Im Endeffekt sind die neue Position und die alte Position damit die Eckpunkte des Dreiecks, welche die Hypotenuse, also eben längste Kante bilden. Der letzte Eckpunkt ergibt sich aus einer Kombination von X und Y Koordinaten beider Positionen (X1 + Y2 oder X2 + Y1).

Mit den trigonometrischen Funktionen kannst du also den Winkel berechnen. Den dann einfach am "virtuellen Kreis" ansetzen und den Punkt am Rand entlang zeichnen (siehe diesen Artikel - es ist verdammt einfach: Find the point on a circle with given center point, radius, and degree)

Dazu findest du genug auf Wikipedia und Google. Das sind sehr einfache, normalerweiße intensiv-gelernte Funktionen, die du auch nach 20 Jahren noch hinkriegen dürftest.

D
985 Beiträge seit 2014
vor 6 Jahren

Man kann auch einfach auf die Nachricht hören, wenn die Maus bewegt wird. Da muss man nicht zyklisch die Position abfragen.

Wenn die Nachricht kommt, dann setzt man noch einen Timer, der sich dann um die Rückstellung (es bewegt sich nicht) kümmert.

P
PierreDole Themenstarter:in
74 Beiträge seit 2017
vor 6 Jahren

Danke für eure Ratschäge. Hat mir sehr geholfen! Und sorry, daß ich erst jetzt Feedback gebe. Ich war so sehr in das Probieren und Programmieren vertieft, daß ich glatt vergessen habe zu antworten. 😃