Prinzip und Programmablaufplan: Zoomen und Verschieben

Zoomen und Verschieben kombinieren

Übersicht / Seite:

1. Funktionen zum Zoomen (und zum Verschieben von Grafiken)
2. Eine einfache Zoomfunktion (für Bilder mit JavaScript, allgemeine Infos)
3. Code-Listing und Details (Beschreibung einer einfachen Zoomfunktion)
4. Ausrichten von Grafiken (und zentrieren innerhalb eines Bereiches)
5. Verschieben von Grafiken (ausschnittsweise innerhalb eines Bereiches)
6. Listing und Details (zum Verschieben von Bildern oder sonstigen Grafiken)
7. Funktionsweise und Prinzip (Programmablaufplan / Flussdiagramm)
8. Komplettes Code-Listing (zum Zoomen und Ausrichten von Grafiken)

---

Einen Programmablaufplan erstellen

Auf den vorausgehenden Seiten des Tutorials wurden die Funktionen und Metho­den zum Vergrößern, Verkleinern und Verschieben von Grafiken beschrieben. So richtig kompliziert wird es dann, wenn alle drei Funktionen miteinander kombiniert werden sollen, da ein Austausch von Daten zwischen den einzelnen Funktionen gewähr­leistet sein muss.
Vom Prinzip her besehen, müssen die Funktionen ZOOMEN 1 und 2 darüber infor­miert werden, ob eine Neupositionierung der Grafik durch die Funktion VERSCHIEBE verfolgte und wie viel Prozent diese Verschiebung beträgt. Der Funktion Verschie­be müssen wiederum Daten über die aktuelle Größe der Grafik zur Verfügung stehen, wenn diese Größe durch die Funktionen ZOOMEN 1 und 2 verändert wurde.

Um bei der Programmierung nicht den Überblick zu verlieren, ist es ratsam, einen Programmablaufplan zu erstellen. Dieser könnte in etwa so aussehen, wie im fol­genden Beispiel. Im Hobbybereich genügen in der Regel auch flüchtige Skizzen mit Notizen. Je besser, übersichtlicher und sorgfältiger diese Skizzen erstellt werden, umso leichter fällt es dem Programmierer, bei Fehlern nicht den Überblick zu ver­lieren.

Wie dem Programmablaufplan zu entnehmen ist, verrichten die Funktionen VERSCHIEBE(), ZOOMEN1() und ZOOMEN2() erst einmal, wie bereits auf den vorausgehenden Seiten beschrieben, ihren Dienst. Zusätzlich wird durch die Funk­tion VERSCHIEBE() die aktuelle Größe der Grafik abgefragt, um zu berechnen, wie viel Prozent der Bildgröße eine eventuelle Verschiebung beträgt und in den Vari­ablen bhpro und bwpro gespeichert.
Bei Benutzung von ZOOMEN1() und ZOOMEN2() wird von der Funktion MOVI_VGRVKL() wiederum abgefragt, ob die Funktion VERSCHIEBE() bereits benutzt wurde und falls dies der Fall war, die übergebenen Werte von bhpro und bwpro größer als 0 sein müssen. Wurde die Funktion VERSCHIEBE() benutzt und sind die Werte größer 0, so werden die übergebenen Prozentwerte bei der Berech­nung der Werte für marginTop und marginLeft berücksichtigt und die Grafik kann entsprechend positioniert werden. Anderenfalls wird die Grafik weiterhin auf ihren Mittelpunkt ausgerichtet.

Als Bezeichner, die als endgültige Bezeichner für die Funktionen wurden:

MOVI_VGRVKL() => imageMovi()
SPEICHERE()   => posSpeichere() 
SCHIEBE()     => posSchiebe()
VERSCHIEBE()  => posVerschiebe()

ZOOMEN2()     => minusZoom()
ZOOMEN1()     => plusZoom()
ZOOM1()       => rufeZoom1()
ZOOM2()       => rufeZoom2()
STOPPE1()     => stoppeZoom1()
STOPPE2()     => stoppeZoom2()

Soviel zur Theorie und zum Prinzip, ein komplette Code-Listing zu diesem Pro­grammablaufplan finden Sie auf Seite 8 dieses Tutorials.

Listing und Details zum Verschieben « / » Komplettes Code-Listing