Autor Beitrag
SyLuS
Hält's aus hier
Beiträge: 6



BeitragVerfasst: Mi 08.01.14 17:56 
Hallo zusammen,

ich bin gerade mal wieder an einem kleinen Projekt und könnte ein wenig Unterstützung gebrauchen.

Und zwar habe ich ein Grid, welches in 2 Stalten unterteilt ist.
Auf der linken Seite ist ein Image, welches logischerweise ein Bild darstellt.

Auf der rechten Seite sollen dann einblendbar Informationen stehen.
Die Informationen sollen, je nachdem welcher Bildteil angeklickt wird, abgeändert werden.

Nun stellt sich mir aber die Frage, wie ich es denn hin bekomme, dass auf die einzelnen Bildteile (Es gibt keine einzelnen Teile, nur ein großes Bild) reagiert wird.

Als erstes habeich einfach ein paar Labels an die entsprechenden Stellen über das Bild gelegt. Bei denen konnte ich dann schön das Click event und den Hover event benutzen.
Funktioniert super. Nur sobald sich das Bild darunter resized wars das dann.

Also hab ich versucht die Labels dynamisch mit zu scalen. Also sprich die prozentuale Position zum Bild berechnen und dann das Label verschieben / skalieren.
Das funktioniert aber leider nicht, da ich keine Informationen von dem Grid oder dem Bild bezüglich der aktuellen Breite/Höhe bekomme.
Ich schiebe das mal darauf, dass die Informationen einfach nicht da sind, da beides, sowohl das Grid, alsauch das Image Auto size und Stretch Eigenschaften haben.

Soviel zu meinem Versuch.

Nun würde mich mal interesieren, wie man den sowas üblicherweise macht / machen könnte.
Denke es ist sicherlich nicht im Sinne des Erfinders labels dynamisch hin und her zu schieben.

Eine andere Idee wäre natürlich dem Image ein MouseMove event zu verpassen und eben die Position der Maus dafür zu benutzen. Aber das würde dann in einem riesigen "Kalibrierungsaufwand" enden, was ich auch gern vermeiden möchte.

Das Grid weiter zu unterteilen, um dann einzelne Zellen dafür zu benutzen ist auch kaum machbar, da es sehr viele und sehr unförmige Bildausschnitte sind. Daher müsste ich dafür eine extrem feine Grid Unterteilung nehmen, bei der es mit den Events auch wieder kein Spaß wird.

Habt ihr Ideen oder am besten natürlich Erfahrungen?

LG

Marc
Christian S.
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 20451
Erhaltene Danke: 2264

Win 10
C# (VS 2019)
BeitragVerfasst: Mi 08.01.14 21:11 
Hallo!

Den Klick auf das Image kannst Du ja über die Ereignisse MouseLeftButtonDown bzw. MouseLeftButtonUp abfangen. In den Parametern für diese Ereignisse kannst Du über e.GetPosition() die Position der Maus innerhalb des Images abfragen.

Die momentane Höhe und Breite des Images sollten Dir die Eigenschaften ActualHeight und ActualWidth liefern.

Viele Grüße
Christian

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".
jaenicke
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 19326
Erhaltene Danke: 1749

W11 x64 (Chrome, Edge)
Delphi 12 Pro, C# (VS 2022), JS/HTML, Java (NB), PHP, Lazarus
BeitragVerfasst: Mi 08.01.14 21:57 
Das Stichwort ist hier Imagemap bzw. verweissensitive Grafik:
www.codeproject.com/...rms-ImageMap-Control

Für diesen Beitrag haben gedankt: SyLuS
icho2099
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Beiträge: 101
Erhaltene Danke: 12

WIN XP, WIN 7, WIN 10
Delphi 6 Prof, Delphi 2005, FPC
BeitragVerfasst: Do 09.01.14 09:20 
Ich habe sowas mal mit einem zweiten Bild in gleicher Größe des sichtbaren Bildes gelöst. In dem zweiten Bild habe ich die Regions auf die reagiert werden soll eingefärbt. Für jede Region eine andere Farbe.
Die Onclick Position im sichtbaren Bild habe ich dann zur Ermittlung der Farbe im zweiten, gleich scalierten aber nicht sichtbaren Region-Bild benutzt und abhängig von der gefundenen Farbe reagiert.

Für diesen Beitrag haben gedankt: SyLuS
SyLuS Threadstarter
Hält's aus hier
Beiträge: 6



BeitragVerfasst: Do 09.01.14 12:34 
Danke, dass sind genau die Stichworte, die mir gefehlt haben. Sieht aber so aus, als wäre es dennoch erstmal ein Haufen Fleisarbeit die Bereiche einzurichten. Drag & Drop und grafisch verschieben mit den Labels war da schon angenehmer.

Kann es gerade leider nicht Testen aber ich meine, dass ich die Höhe und Breite eben NICHT über ActualHeight und ActualWidth bekomme. Sonst hätte ich das gaze schon mit den Labels gemacht.

Nachdem ich alles kurz überglogen habe wäre ich spontan so vorgegangen, dass ich mir eine kleine Methode bastle, welche bei einem OnClick auf das eigentliche Bild die Position des Zeigers logt. Dann kann ich meine Bereiche "Abklicken" und aus den Koordinaten dann die Polygone zeichne. (Das Zeichnen der Polygone würde sich ja dann aus dem Log mittels Notepad++ und ein bischen regex autogenerieren lassen).

@icho2099: Das klingt garnicht so doof und sollte denke ich einfacher zu machen sein als meine erste Idee. Mit Photoshop die einzelnen Bereiche kurz einzufärben und am schluss alles andere entfernen ist ja schnell gemacht. Was mir daran nur nicht gefällt ist dass du jedem Bereich hart eine Farbe zuordnen musst bzw die Farbe irgendwo konfigurierbar machen und sie speichern wenn der Nutzer selber Bereiche erstellen kann (In meinem Fall nicht, aber generell). Bei meinen rund 20 Bereichen noch machbar... aber bei 100+ siehts da schon übel aus.

Wenn noch jemand Ideen hat, immer her damit. Werde erst heute Abend wieder bischen tüfteln können.
SyLuS Threadstarter
Hält's aus hier
Beiträge: 6



BeitragVerfasst: Fr 10.01.14 00:52 
Also, das mit dem 2. Bild hat wirklich 1a funktioniert.

Ein bisschen Fleisarbeit die einzelnen Farben nachher wieder zu mappen aber was solls auf eine Methode mehr oder weniger kommt es auch nicht an. Aber damit konnte ich wirklich genial die total unförmigen Bereiche nachzeichnen.

DANKE!