Listing und Details der Zoomfunktion

Berechnungen, Details und Listing

Ü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)

---

Berechnungen

Um eine Zoomfunktion zu realisieren, sind einige Berechnungen erforderlich, da bei der Verkleinerung ein zu bestimmendes Maß nicht unterschritten und bei der Ver­größerung eine festzusetzende Größe, die der eigentlichen Größe der Grafik ent­spricht, nicht überschritten werden sollte. Für das Beispiel wurde eine Grafik von 500 x 500 Pixel gewählt, welche erst einmal skaliert zu einer Anfangsgröße von 100 x 100 Pixel eingebunden wird. Der Div-Bereich beträgt ebenfalls 500 x 500 Pixel.
Um ein Inline-Element mit CSS horizontal mittig auszurichten, genügt eine Aus­richtung mit Eigenschaft text-align und dem Wert center.Etwas anders verhält es sich mit der vertikalen Ausrichtung, hier hilft die Eigenschaft padding-top weiter, um den Innenabstand bis zum Rand des Div-Bereiches zu bestimmen. Bei einer auf 100px skalierten Grafik ergibt sich draus ein innerer Abstand von 200px. Dieser in­nere Abstand muss sich nun bei jeder Zoomstufe entsprechend anpas­sen.

Obwohl der Zoomeffekt in 1-Prozent-Schritten abläuft, enthält die nachfolgende Übersicht nur die Zehnerschritte in Prozent.

Zoomstufe = Bildgröße	Abstand
20 % von 500px = 100px	padding-top: 200px
30 % von 500px = 150px	padding-top: 175px
40 % von 500px = 200px	padding-top: 150px
50 % von 500px = 250px	padding-top: 125px
60 % von 500px = 300px	padding-top: 100px
70 % von 500px = 350px	padding-top:   75px
80 % von 500px = 400px	padding-top:   50px
90 % von 500px = 450px	padding-top:   25px
100 % von 500px = 500px	padding-top:     0px

Der entsprechende Abstand lässt sich beim Zoomen kontinuierlich einhalten, in dem die eigentliche Höhe der Grafik von 500px zuerst halbiert wird:

(var bildha = 500 / 2)

Im nachfolgenden Schritt erfolgt eine Berechnung der Höhe des Bildes in Abhängigkeit vom Zoomfaktor (z.B. 400px bei 80%). Das Ergebnis wird durch 2 geteilt und von der durch 2 geteilten Höhe des Bildes abgezogen:

(bildha -(((bildho / 100) * zoome) / 2))

Eigentlich braucht der letzte Rechenschritt vor der Subtraktion nicht extra ge­klammert zu werden, da Punktrechnung ohnehin vor Strichrechnung geht, es sieht nur etwas übersichtlicher aus.

Beispiel mit zoome 80 (in Prozent):

var bildho = 500; (Bildhöhe in Pixel):
var bildha = 500 / 2;

Zwischenergebnis: bildha = 250

bildho / 100 * zoome = 400
400 / 2 = 200
bildha - 200 = 50 (in Pixel für padding-top)

Die letzten drei Rechenschritte in einem Stück:

Math.round(bildha -(((bildho / 100) * zoome) / 2));

Das Listing und Details

Die Zoomfunktion beginnt beim ersten Aufruf mit 20 Prozent der eigentlichen Bildgröße, wobei 20 % im Beispiel 100 Pixel entsprechen. Bei jedem Aufruf der Funktion wird durch den Inkrement Operator ++ der Wert um 1 erhöht, jedoch nur so lange wie die Variable zoome noch kleiner als 100 Prozent ist. Bei der Ver­kleinerung verringert der Dekrement Operator -- den Wert bei jedem Aufruf, zu­mindest so lange wie zoome noch nicht kleiner als 20 Prozent ist.

Nach jedem Aufruf verselbstständig sich die Funktion, in dem sie sich durch setTimeout im Abstand von 40 Millisekunden selbst aufruft, bis sie durch clearTimeout gestoppt wird. Eine Begrenzung erfolgt durch den Wert der Variablen zaehle (mal 10). Da die Funktionen stoppeZoom1 und stoppeZoom2 jeweils zuerst aufgerufen werden, wird auch der Stand von zaehle zuerst erhöht oder verringert.

Der eigentliche Zugriff auf die Eigenschaften des Grafikelementes und die Steue­rung des Zoomeffekts erfolgen über das Style-Objekt für HTML-Elemente ent­sprechend DOM (Document Object Model), wobei der Elementknoten mit der Methode getElementById() angesprochen wird. Die Funktionen ZOOMEN 1 und 2 dienen lediglich dazu die anderen Funktionen in der richtigen Reihenfolge aufzu­rufen.

<!DOCTYPE html>
<html>

<head>
<title>Zoom</title>
<style type="text/css">
body {text-align:center}
div.fuerbild {text-align:center; background-color:#e7debd;
border:1px solid #7f4925; height:500px; width:500px; margin:auto}
img#bild {padding-top:200px}
</style>
</head>

<body>
<h1>Zoom</h1>
<div class="fuerbild">
<img id="bild" src="einbild.jpg" alt="Ein Bild" width="100" height="100">
</div>
<p>
<input type="button" onclick="minusZoom()" value=" Zoom - ">
<input type="button" onclick="plusZoom()" value=" Zoom + ">
</p>

<script type="text/javascript">

var bildho = 500;
var bildha = 500 / 2;
var zaehle = 2;
var zoome  = 20;

/* -------------- vergroessern ----------------------------------------- */

function stoppeZoom1() {
    zaehle++;
    if (zaehle > 10) zaehle = 10;
}
function rufeZoom1() {
    zoome++;

    if (zoome > 100) zoome = 100;
    else {
        var stopzoom = window.setTimeout("rufeZoom1()", 40);

        document.getElementById("bild").style.width  = zoome +"%";
        document.getElementById("bild").style.height = zoome +"%";

        var abstand = Math.round(bildha -(((bildho / 100) * zoome) / 2));
        document.getElementById("bild").style.paddingTop = abstand +"px";
    }
    var stoppe = zaehle * 10;
    if (zoome >= stoppe || zoome >= 100) window.clearTimeout(stopzoom);
}
function plusZoom() {
    stoppeZoom1();
    rufeZoom1();
}

/* -------------- verkleinern ------------------------------------------ */

function stoppeZoom2() {
    zaehle--;
    if (zaehle < 2) zaehle = 2;
}
function rufeZoom2() {
    zoome--;

    if (zoome < 20) zoome = 20;
    else {
        var stopzoom = window.setTimeout("rufeZoom2()", 40);

        document.getElementById("bild").style.width  = zoome +"%";
        document.getElementById("bild").style.height = zoome +"%";

        var abstand = Math.round(bildha -(((bildho / 100) * zoome) / 2));
        document.getElementById("bild").style.paddingTop = abstand +"px";
    }
    var stoppe = zaehle * 10;
    if (zoome <= stoppe || zoome <= 20) window.clearTimeout(stopzoom);
}
function minusZoom() {
    stoppeZoom2();
    rufeZoom2();
}

</script>
</body>
</html>

Im Code des Demos wurden HTML, CSS und JavaScript-Code in einer Datei untergebracht. Bei der praktischen Anwendung empfiehlt sich eine Auslagerung des Scripts in eine eigenständige Datei. Weiterhin wurden im Kern der Funktionen ZOOM 1 und 2 sich wiederholende Variablen, Methoden und Berechnungen ver­wendet.
Da sich die Methode des Zugriffs auf HTML-Elemente mit getElementById() pro­blem­los in einer Variablen speichern lässt, geschieht dies im zweiten, etwas abge­änderten Listing als erstes, in dem die Methode der Variablen kuerze zuge­wiesen wird. Danach ist es möglich nur noch die Variable kuerze zu verwenden, um auf die Style-Eigenschaften des Elementes mit der ID Bild zuzugreifen. Zusammen mit der Berechnung, die beim Vergrößern wie beim Ver­kleinern benötigt wird, kann weiter­hin eine zusätzliche Funktion programmiert werden, die im Beispiel den Namen imageMovi erhielt. Mit ZOOM 1 und 2 braucht nun nur noch die Funktion imageMovi aufgerufen zu werden.

<script type="text/javascript">

var bildho = 500;
var bildha = 500 / 2;
var zaehle = 2;
var zoome  = 20;

/* -------------- Kernfunktion zum Vergroessern und Verkleinern -------- */

function imageMovi() {
    var kuerze = document.getElementById("bild").style;

    kuerze.width  = zoome + "%";
    kuerze.height = zoome + "%";

    var abstand = Math.round(bildha -(((bildho / 100) * zoome) / 2));
    kuerze.paddingTop = abstand + "px";
}

/* -------------- vergroessern ----------------------------------------- */

function stoppeZoom1() {
    zaehle++;
    if (zaehle > 10) zaehle = 10;
}
function rufeZoom1() {
    zoome++;
    if (zoome > 100) zoome = 100;
    else {
        var stopzoom = window.setTimeout("rufeZoom1()", 40);
        imageMovi();
    }
    var stoppe = zaehle * 10;
    if (zoome >= stoppe || zoome >= 100) window.clearTimeout(stopzoom);
}
function plusZoom() {
    stoppeZoom1();
    rufeZoom1();
}

/* -------------- verkleinern ------------------------------------------ */

function stoppeZoom2() {
    zaehle--;
    if (zaehle < 2) zaehle = 2;
}
function rufeZoom2() {
    zoome--;
    if (zoome < 20) zoome = 20;
    else {
        var stopzoom = window.setTimeout("rufeZoom2()", 40);
        imageMovi();
    }
    var stoppe = zaehle * 10;
    if (zoome <= stoppe || zoome <= 20) window.clearTimeout(stopzoom);
}
function minusZoom() {
    stoppeZoom2();
    rufeZoom2();
}

</script>

Das zweite Listing mag auf dem ersten Blick etwas undurchsichtiger erscheinen und die Länge des Codes hat praktisch nicht abgenommen. Dennoch kann es ein Vorteil sein, wenn sich wiederholende Aufgaben in eigenständige Funktionen aus­gelagert werden. Die Einsparung an Codezeilen ergibt sich zuweilen jedoch erst bei etwas umfangreicheren Scripts. Wer jedoch das letzte Listing des Tutorials richtig ver­stehen möchte, sollte sich mit dieser Schreibweise vertraut machen.

Eine einfache Zoomfunktion « / » Ausrichten von Grafiken