VB-fun.de - Tutorial021 (Erzeugung und Verwendung von ImageMaps)

Erzeugen und Verwalten von Regionen

[ Top ]

Eine ImageMap besteht immer aus zwei Komponenten: zum einen aus der Grafik, die angezeigt werden soll, und zum anderen aus den Informationen über die verwendeten Regionen.

Um solche Regionen zu herzustellen, brauchen wir einen Editor, in welchem wir über einer Grafik solche Bereiche anlegen, editieren und abspeichern können. Dazu habe ich das Tool MakeRegion geschrieben, mit dem sich Regionen erzeugen, verwalten und in zwei Varianten exportieren lassen: als binäre *.rgn-Datei und als fertigen HTML-Textblock, der sich einfach in HTML-Dokumente einfügen lässt.

Diese Abbildung zeigt einen Screenshot des Tools MakeRegion während die Bereiche für obige Europakarte angelegt wurden.

Wie du sehen kannst, ist die Grafik gerade gezoomt (400%) dargestellt, damit die für die Regionen verwendeten Polygone pixelgenauer ausgerichtet werden können. Insgesamt sind übrigens 5 Zoom-Stufen einstellbar: 50%, 100% (Originalgröße), 200%, 400% und 800%.

Die Umrisse der Regionen werden unabhängig vom Zoomfaktor als einfache Linien invertiert angezeigt.

Natürlich sind wir nicht auf die Verwendung von Polygonen festgelegt. Es gibt ja noch die beiden einfacheren Formen Rechteck und Kreis, die für viele ImageMaps ausreichend sind.

Hier ein Beispiel für die Verwendung der Kreisfigur. (Sie wird im Edit-Modus zur besseren Orientierung in einem gestrichelten Rechteck angezeigt.)

Streng genommen handelt es sich allerdings nicht um einen Kreis, sondern um eine Ellipse, denn diese Figur lässt sich in Höhe und Breite stauchen.

Da wir also insgesamt drei Grundformen zur Auswahl haben, erscheint folgender Dialog, wenn man über den Menüpunkt 'Region | Neu' eine Figur anlegen will:

Hier kann nun die Art der Region gewählt werden. Das Rechteck empfiehlt sich für Textbereiche, den Kreis verwendet man für runde bzw. elliptische Bereiche, und das Polygon deckt alle restlichen, unregelmäßigen Formen ab (wie wir sie z.B. in der Europa-Karte vorfinden).

Nach dem Auswählen einer Form erscheint diese auf der Grafik und lässt sich nun verschieben und bearbeiten, wobei zur Änderung von Größe/Umriss Ziehpunkte zur Verfügung stehen. Die Größe von Rechteck und Kreis lässt sich hierbei an der linken oberen und der rechten unteren Ecke ändern, während beim Polygon alle Eckpunkte einzeln verschoben werden können.

In der folgenden Abbildung sind diese Ziehpunkte zur Verdeutlichung mit einem schwarzen Quadrat gekennzeichnet:


Rechteck	Kreis	Polygon

Da im Editor keine schwarzen Quadrate als Markierung gezeigt werden, ist es manchmal schwierig, mit der Maus einen Eckpunkt zu 'treffen', um ihn zu verschieben. Deshalb kommen hier verschiedene Mauscursor zum Einsatz, um dem Benutzer mitzuteilen, ob er sich gerade über einer Region, einem Eckpunkt oder einfach nur über der Grafik befindet:

Cursor	Bedeutung
Mauszeiger befindet sich außerhalb von Regionen:
	Normaler Cursor.
	Die Maustaste wurde über einer verschiebbaren Hintergrundgrafik gedrückt, welche nun mit allen enthaltenen Regionen bewegt werden kann. Dies stellt eine Alternative zur Betätigung der Scrollbars dar.
Mauszeiger befindet sich innerhalb einer Region:
	Unter der Maus befindet sich eine Region. Bei Doppelklick würde sich der Eigenschaften-Dialog der Region öffnen.
	Die Maustaste wurde über einer Region niedergedrückt, welche nun verschoben werden kann.
	Unter der Maus befindet sich ein Ziehpunkt.
	Die Maustaste wurde über einem Ziehpunkt niedergedrückt, welcher nun verschoben werden kann.

Wird innerhalb einer Region ein Doppelklick ausgeführt, dann erscheint ihr Eigenschaften-Dialog:

Hier können die grundlegenden Eigenschaften einer Region editiert werden.

In der ComboBox Typ lässt sich nachträglich die Art der Form (RECT | ROUND | POLY) verändern. Dabei wird jeweils das umschließende Rechteck zugrunde gelegt. Bei einer Konvertierung von Kreis zu Polygon wird übrigens ein Sechseck erzeugt.

Im TextFeld Titel trägt man den String ein, der als ToolTip angezeigt werden soll, wenn sich die Maus später innerhalb der Region befindet.

Das TextFeld Tag ist nur dann interessant, wenn man die Region(en) später als HTML-Block exportieren möchte: der Inhalt von Tag wird dann in der erzeugten ImageMap in den HREF-Teil der Region geschrieben. Dies könnte z.B. ein Zieldokument sein, welches beim Anklicken des Bildteils in den Browser geladen werden soll.

Falls man keinen HTML-Export plant oder den exportierten HTML-Block ohnehin nachbearbeitet, kann dieses Textfeld leer bleiben.

Das Hauptmenu von MakeRegion

[ Top ]

Unter Datei befinden sich wie üblich die Punkte zum Laden und Speichern:

Mittels Bild öffnen lässt sich die Hintergrundgrafik laden und die Regionen-Befehle dienen dem Im/Exportieren derselben.

Das Menü Region betrifft das aktuelle Objekt und wird auch als PopUp-Menü angezeigt, wenn innerhalb einer Region bzw. auch über der Hintergrundgrafik die rechte Maustaste gedrückt wird:

	Der Punkt Neu bewirkt das Anzeigen des Dialogs 'Neue Region' (siehe oben).
	Bei Duplizieren wird die aktuelle Region kopiert. Die entstandene Kopie wird als neues Objekt neben der Quellregion angezeigt. Dies ist nützlich, wenn man eine ganze Reihe von ähnlichen Objekten benötigt.

In den Hintergrund bedeutet, dass die aktuelle Region in der Z-Reihenfolge auf den letzten Platz gesetzt wird, wodurch kleinere Regionen, die vorher 'verdeckt' waren, mit der Maus wieder erreichbar sind. (In den meisten Fällen werden in ImageMaps zwar keine überlappenden Regionen verwendet, dennoch ist es ist durchaus machbar, Bereiche zu definieren, die innerhalb von größeren Bereichen liegen. So könnte man im Beispiel der Europakarte zusätzlich kleine Regionen anlegen, mit denen sich die Hauptstädte der Staaten anklicken lassen.)

Mit Löschen wird die aktuelle Region aus der Liste entfernt.

Der Menüpunkt Eigenschaften bewirkt das Öffnen des Eigenschaften-Dialogs für die aktuelle Region.

Unter Punkt befindet sich das Menü zum Hinzufügen und Löschen von einzelnen Punkten (Achtung: nur bei Polygonen), welches auch als PopUp-Menü angezeigt wird, wenn über einem Polygon-Ziehpunkt die rechte Maustaste gedrückt wird.

Beim Einfügen wird der neu entstandene Punkt übrigens genau über dem bereits vorhandenen Punkt angelegt, so dass optisch zunächst keine Änderung zu erkennen ist. Erst wenn man ihn mit der Maus von dieser Stelle wegzieht, wird deutlich, dass er (in der Reihe der vorhandenen Eckpunkte gegen den Uhrzeigersinn) eingefügt wurde.

Speichern von Regionen

[ Top ]

Kommen wir nun zu der Art und Weise, wie die Regionen gesichert werden können. Um sie später in Programmen zu verwenden, benötigen wir sie als separate, von unserer Klasse einlesbare Datei. Um sie als ImageMap in ein HTML-Dokument einzubetten, brauchen wir sie als fertigen, mit den notwendigen Tags formatierten Textblock.

Export als Binärdatei (*.rgn)

Ein solches RegionFile besteht aus einer lückenlosen Folge von Regionen-Einträgen. Jeder Eintrag besteht aus einem Header und den eigentlichen Daten.

RegionFile
1. Eintrag		2. Eintrag		...	letzter Eintrag
Header	Daten	Header	Daten	...	Header	Daten

Im Header finden sich Informationen über den Typ der Region, die Anzahl der Punkte sowie die Strings von Titel und Tag. Die beiden letzteren sind übrigens in Form eines Pascal-Strings (PString) hinterlegt, d.h. 1 Byte mit der Länge (0...255) des Strings und dann der String selbst.

Hier der Aufbau eines Regionen-Eintrags im Detail:

Offset	Größe	Inhalt	Beschreibung
0	1 Byte	Typ	0=RECT, 1=ROUND, 2=POLY
1	1 Long	Size	Länge der Daten in POINTW (Struktur zur Definition eines Punktes: X As Integer, Y As Integer)
4	PString	Titel	Text, der als ToolTip angezeigt werden soll.
...	PString	Tag	Text, der beim HTML-Export bei HREF eingetragen werden soll.
...	n	Koordinaten	Hier stehen die Punkte der Region als POINTW-Strukturen. Bei den Formen RECT und ROUND gibt es nur 2 Punkte (links oben und rechts unten des umschließenden Rechtecks), bei POLY können beliebig viele Punkte angegeben sein (allerdings mindestens 3 Stück, weil das Polygon sonst keine Fläche besitzen würde).

Export als HTML-Block (*.txt)

Das folgende Listing ist ein Beispiel für einen erzeugten Textblock (mit drei Regionen). Laut HTML-Konventionen wird hier zuerst der <MAP>-Bereich mit seinen <AREA>-Elementen definiert, anschließend die zugrundeliegende Grafik im <IMG>-Tag.

(Auf Einzelheiten zu den Tags wie <MAP> oder <AREA> möchte ich an dieser Stelle nicht näher eingehen. Interessierte Leser mögen bitte einen Blick in geeignete Literatur über HTML werfen; den Webdesignern unter uns dürften die verwendeten Anweisungen ohnehin geläufig sein...)

(Die Einrückungen und manche der Zeilenumbrüche habe ich in diesem HTML-Listing manuell vorgenommen, um die Struktur der Tags zu verdeutlichen. Der von MakeRegion erzeugte HTML-Code ist kompakter, dort werden nur die notwendigsten Zeilenumbrüche eingebaut.)

Achtung: Während im rgn-Binärfile auch Ellipsen gespeichert und von der Regions-Klasse als solche erkannt und verarbeitet werden, können in einer HTML-ImageMap nur reine Kreise verwendet werden (siehe obiges Listing: coords=X0,Y0,Radius)! Beim Export wird daher bei Ellipsen die kürzere Kante als Kreisdurchmesser angenommen und die Werte für Mittelpunkt und Radius automatisch berechnet.

Region.cls / cRegions.cls

[ Top ]

Wie so oft, wenn man es mit einer Sammlung von Objekten (hier: Regionen) zu tun hat, empfiehlt es sich, außer der eigentlichen Objektklasse noch eine übergeordnete Klasse zu verwenden, die für die Verwaltung verantwortlich ist.

Deshalb haben wir auch neben der cRegion.cls eine cRegions.cls, die uns als Hauptansprechpartner dienen soll, wenn wir Regionen hinzufügen, abspeichern oder löschen.

cRegion

Betrachten wir zuerst das Modul für die einzelne Region. Im Interface brauchen wir Funktionen zum

Bearbeiten von allgemeinen Eigenschaften wie Typ oder Titel,

Abfragen, Setzen und Löschen von Punkten,

Zeichnen und Bewegen der Figur,

Abfragen, ob sich eine bestimmte Koordinate innerhalb der Figur oder in der Nähe eines
Ziehpunktes befindet.

	Property Let Typ (Figuren-Typ zuweisen)
	ByVal NewTyp As RGN_TYP (neuer Figuren-Typ) Die Aufzählung RGN_TYP definiert dabei folgende Konstanten: RGN_RECT = 0 RGN_ROUND = 1 RGN_POLY = 2
	Property Get Typ (Figuren-Typ abfragen)
	-> RGN_TYP (aktueller Figuren-Typ)

	Property Let Title (Titel/ToolTip definieren)
	ByVal NewTitle As String (neuer Titel)
	Property Get Title (Titel/ToolTip abfragen)
	-> String (aktueller Titel)

	Property Let Tag (Tag definieren)
	ByVal NewTag As String (neuer Tag)
	Property Get Tag (Tag abfragen)
	-> String (aktueller Tag)

	Property Get Points (Anzahl der Punkte abfragen)
	-> Long (Anzahl der Punkte)

	Sub GetPoint (Koordinaten eines einzelnen Punktes holen)
	ByVal Index As Long (Index des Punktes)
	ByRef X As Long (Variable zur Aufnahme der X-Koordinate)
	ByRef Y As Long (Variable zur Aufnahme der Y-Koordinate)

	Sub SetPoint (Koordinaten eines einzelnen Punktes setzen)
	ByVal Index As Long (Index des Punktes)
	ByVal X As Long (neue X-Koordinate)
	ByVal Y As Long (neue Y-Koordinate)

	Sub GetRect (umschließendes Rechteck holen)
	ByRef X1 As Long (Variable zur Aufnahme der Koordinate X1)
	ByRef Y1 As Long (Variable zur Aufnahme der Koordinate Y1)
	ByRef X2 As Long (Variable zur Aufnahme der Koordinate X2)
	ByRef Y2 As Long (Variable zur Aufnahme der Koordinate Y2)

	Sub SetRect (umschließendes Rechteck (Größe für RECT- und ROUND-Figuren) setzen)
	ByVal X1 As Long (neue Koordinate X1)
	ByVal Y1 As Long (neue Koordinate Y1)
	ByVal X2 As Long (neue Koordinate X2)
	ByVal Y2 As Long (neue Koordinate Y2)

	Sub AddPoint (Polygon-Punkt hinzu- bzw. einfügen)
	ByVal X As Long (X-Koordinate des neuen Punktes)
	ByVal Y As Long (Y-Koordinate des neuen Punktes)
	Optional ByVal Index As Long (Index des einzufügenden Punktes) Wird der Parameter Index weggelassen oder -1 übergeben, dann wird der neue Punkt an die Reihe der vorhandenen angehängt; bei Index >= 0 wird er an der entsprechenden Stelle eingefügt.

	Sub DeletePoint (Polygon-Punkt entfernen)
	ByVal Index As Long (Index des zu löschenden Punktes)

	Sub Move (Region verschieben)
	ByVal Xdiff As Long (X-Offset)
	ByVal Ydiff As Long (Y-Offset)

	Sub Copy (Eigenschaften einer anderen Region übernehmen)
	ByVal region As cRegion (Regionen-Objekt, das als Vorlage dienen soll)
	ByVal Xdiff As Long (X-Abstand von der Vorlage)
	ByVal Ydiff As Long (Y-Abstand von der Vorlage)

	Sub Draw (Region in PictureBox zeichnen)
	ByVal pic As PictureBox (Zielcontrol für Ausgabe)
	ByVal Factor As Single (Skalierungsfaktor)
	ByVal Xoff As Single (X-Offset in der PictureBox)
	ByVal Yoff As Single (Y-Offset in der PictureBox)

	Function Hit (Prüfen, ob Koordinaten innerhalb der Region liegt)
	ByVal X As Long (X-Koordinate des Prüfpunktes)
	ByVal Y As Long (Y-Koordinate des Prüfpunktes)
	-> Boolean (True = Prüfpunkt liegt innerhalb der Region, False = Prüfpunkt liegt außerhalb der Region)

	Function HitPoint (Prüfen, ob Koordinaten in der Nähe eines Punktes liegen)
	ByVal X As Long (X-Koordinate des Prüfpunktes)
	ByVal Y As Long (Y-Koordinate des Prüfpunktes)
	ByVal diff As Long (maximale Entfernung bei der Abstandsprüfung)
	-> Long (>0 = Index des getroffenen Punktes, -1 = es wurde kein Punkt getroffen)

	Sub UpdateRegion (Regionen-Info für die API aktualisieren)

Erläuterung zu den privaten Prozeduren der Klasse:

Sub Poly2Rect() : Konvertierung eines Polygons zu einem Rechteck.

Sub Rect2Poly() : Konvertierung eines Rechtecks zu einem Polygon.

Sub Round2Poly() : Konvertierung einer Ellipse zu einem Polygon.

Sub Delete() : API-Speicher freigeben.

Sub GetBoundRect(ByRef x1 As Long, ByRef y1 As Long, ByRef x2 As Long, ByRef y2 As Long)
Umschließendes Rechteck bestimmen/holen.

cRegions

Diese Klasse fungiert als Verwalter für die einzelnen Regionen. Wir brauchen daher Funktionen zum

Hinzufügen und Löschen von Regionen,

Liefern von Regionen-Objekten,

Laden und Speichern von RegionFiles.

	Property Get Count (Anzahl der Regionen abfragen)
	-> Long (Anzahl der Regionen)

	Function Add (Region hinzufügen)
	-> cRegion (Verweis auf die neue Region)

	Sub Delete (Region entfernen)
	ByVal Index As Long (Index der zu löschenden Region)

	Sub Clear (Alle Regionen löschen)

	Function Item (Region holen)
	ByVal Index As Long (Index der zu holenden Region)
	-> cRegion (Verweis auf die fragliche Region)

	Sub OnTop (Region in den Vordergrund setzen)
	ByVal Index As Long (Index der Region)

	Sub OnBack (Region in den Hintergrund setzen)
	ByVal Index As Long (Index der Region)

	Sub Import (RegionFile einlesen)
	ByVal fname As String (kompletter Dateiname des zu lesenden RegionFiles) Achtung: die aktuell im Speicher befindliche Regions-Collection wird vor dem Einlesen gelöscht.

	Sub Export (Regionen abspeichern)
	ByVal fname As String (kompletter Dateiname des zu erzeugenden RegionFiles) Achtung: falls die angegebene Datei bereits existiert, wird sie vor dem Abspeichern gelöscht.

	Function CheckRgnFile (Integrität eines RegionFiles testen)
	ByVal fname As String (kompletter Dateiname des zu überprüfenden RegionFiles)
	-> Boolean (True = Datei ist ein syntaktisch korrektes RegionFile, False = Datei ist kein RegionFile)

Erläuterung zu den privaten Prozeduren der Klasse:

Sub ReadPString(ByVal fh As Long)
Lesen eines PascalStrings aus einer geöffneten Datei.

Sub WritePString(ByVal fh As Long, ByVal s As String)
Schreiben eines PascalStrings in eine geöffnete Datei.

Function FileExist(ByVal f As String) As Boolean
Prüfen, ob Datei existiert.

ImgMapDemo

[ Top ]

An dieser Stelle soll gezeigt werden, wie sich ImageMaps in eigene Anwendungen integrieren lassen. Dazu möchte ich auf das Beispielprojekt ImgMapDemo eingehen.
Es enthält lediglich ein Form-Modul und natürlich unsere beiden Regionen-Klassen, die ich oben bereits beschrieben habe.
Werfen wir also einen Blick auf den Sourcecode der Form, auf der sich die PictureBox mit der Europakarte (picEurope) und ein Image (imgShow) zur Anzeige des aktuellen Staates befinden.
Zunächst wird ein cRegions-Objekt erstellt und im Form_Load-Event initialisiert und mit Daten aus einem RegionFile versorgt:

Option Explicit

Private MyRgns As cRegions

Private Sub Form_Load()
  '---- Regionen laden
  Set MyRgns = New cRegions
  MyRgns.Import App.Path & "\europa.rgn"
  '---- Vorbelegung
  LoadCountry "Deutschland", "germany.jpg"
End Sub

Falls der Benutzer die Maus über die Europakarte bewegt, müssen eventuell ToolTips angezeigt werden. Hierzu bemühen wir das picEurope_MouseMove-Event, wo wir (mittels der Hilfsfunktion HitRgn) prüfen, ob sich die Maus über einer Region (und wenn ja, über welcher) befindet:

Private Sub picEurope_MouseMove(ByRef Button As Integer, _
       ByRef Shift As Integer, ByRef X As Single, ByRef Y As Single)
Dim rgn As cRegion

Set rgn = HitRgn(X, Y)
If (rgn Is Nothing) Then
   picEurope.ToolTipText = ""
   picEurope.MousePointer = vbDefault
Else
   picEurope.ToolTipText = rgn.Title
   picEurope.MousePointer = vbCustom
End If
End Sub

Im picEurope_MouseUp-Event fangen wir eventuelle Klicks auf Staaten ab und zeigen im Bedarfsfall die entsprechende Karte (mittels der Hilfsfunktion LoadCountry) im Image-Control imgShow an:

Private Sub picEurope_MouseUp(ByRef Button As Integer, _
            ByRef Shift As Integer, ByRef X As Single, _
            ByRef Y As Single)
  Dim rgn As cRegion

  Set rgn = HitRgn(X, Y)
If (rgn Is Nothing) Then Exit Sub
LoadCountry rgn.Title, rgn.Tag
End Sub

Schließlich folgen noch unsere lokalen Hilfsfunktionen:

Private Sub LoadCountry(ByVal sTitle As String, _
                        ByVal picName As String)
  labName = sTitle
  imgShow.Picture = LoadPicture(App.Path & "\..\maps\" & picName)
CenterCountry
End Sub

Private Sub CenterCountry()
imgShow.Move (fraShow.Width - imgShow.Width) \ 2, _
               (ScaleHeight - imgShow.Height) \ 2
End Sub

Private Function HitRgn(ByVal X As Long, _
                 ByVal Y As Long) As cRegion
  Dim i As Long

For i = 0 To MyRgns.Count - 1
    Set HitRgn = MyRgns.Item(i)
    If (HitRgn.Hit(X, Y)) Then Exit Function
Next
Set HitRgn = Nothing
End Function

Zu guter Letzt werden im Form_Resize-Event noch ein paar kosmetische Dinge (Positionierung der Anzeige-Controls) durchgeführt, und das war's auch schon ;)
Wie du siehst, ist der programmiertechnische Aufwand zur Verwendung von Regionen sehr gering; die meisten Funktionen in cRegion und cRegions werden nur zur Kommunikation mit einem Editor wie MakeRegion benötigt.
Bleibt also nur noch, dir viel Spaß mit dieser Art von visuellen Menüs zu wünschen, und falls du noch Fragen oder Anregungen hast, schreib einfach eine Mail...