Coder Welten

Komplettes Script / Code-Listing der Zoomfunktion

Script zum Zoomen und Ausrichten von Grafiken

Übersicht / Seite:

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

Kombination der Funktionen

Auf den vorausgehenden Seiten dieses Tutorials wurden die einzelnen Funktionen und verwendeten Methoden zum Zoomen und Verschieben von Grafiken vorgestellt und das Prinzip zum Kombinieren dieser Funktionen an Hand eines Programmablaufplans beschrieben. Nicht enthalten im Programmablaufplan waren detaillierte Einzelheiten zu Berechnungen der Position, die in folgenden Beispielen etwas entwirrt werden sollen.

Beispiel I:

var halbeh = 197.5; // Hälfte der Anfangshöhe / Hälfte des Div-Bereichs

obenl = (yediv - ymaus) + magtp;

var zeigefo = (obenl *-1) + halbeh;
var zeigeao = Math.round(((zeigefo * 100) / ueberho) * 100);
bhpro = zeigeao / 100;

Der erste Teil dieser Berechnung wurde bereits auf Seite 6 unter Details erläutert, die restlichen Zeilen sehen etwas verwirrend aus, obwohl die eigentliche Berechnung verhältnismäßig simpel ist. Da das Objekt Math mit der Methode round genutzt wird und diese Methode nur eine Rundung auf ganze Zahlen ermöglicht, muss das Ergebnis vor dem Runden multipliziert werden, um es in einem zusätzlichen Rechenschritt wieder zu dividieren. Bei einer Multiplikation und einer nachfolgenden Division durch 100 enthält das Ergebnis zwei Nachkommastellen.
Weiterhin ist zu beachten, dass bei der Umwandlung eines Wertes vom Typ String in den Typ Number mit *-1 das entsprechende Minus-Vorzeichen berücksichtigt werden muss, um kein fehlerhaftes Ergebnis zu erhalten.

Die Berechnungen innerhalb der Funktion imageMovi() sehen auf dem ersten Blick nicht weniger verwirrend aus und zugegeben, ein Nichtmathematiker benötigte einige Tage, um die richtigen Rechenschritte für diese Berechnungen zu finden, zu vereinen und zu testen. Um die Rechenschritte etwas nachvollziehbar zu gestalten, lässt sich das fertige Knäuel jedoch etwas entwirren. Wichtig ist unter anderen die Beachtung des Vorzeichens bei den einzelnen Rechenoperationen.

Beispiel II:

aboben = Math.round(-(((((bildho / 100) * zoome) / 100) * bhpro) -halbeh));

Die etwas mehr aufgeschlüsselten Rechnenschritte:

((Bildhöhe 1.750 in Pixel : 100 = 17.5) x 17.5 x Zoomfaktor 40 = 700)

((700 : 100 = 7) x 80 übernommende Prozente = 560) - 197.5 = 362.5

gerundet mit Math.round auf -363px für margin-top

Das komplette Script bzw. das komplette Code-Listing:

<!DOCTYPE html>
<html>

<head>
<title>Zoome und Verschiebe</title>
<style type="text/css">
h1 {text-align:center}
div#fbild {position:relative; text-align:center; background-color:#e7debd; 
border:1px solid #7f4925; width:525px; height:395px; margin:auto; 
overflow:hidden}
img#bild  {cursor:move}
</style>
</head>

<body>
<h1>Zoome und Verschiebe</h1>
<div id="fbild">
<img id="bild" src="alaska-525.jpg" alt="Ein Bild" width="525" height="395" 
onclick="posVerschiebe()">
</div>
<p style="text-align:center">
<input type="button" onclick="minusZoom()" value=" Zoom - ">
<input type="button" onclick="plusZoom()" value=" Zoom + ">
</p>

<script type="text/javascript">

var begre = document.getElementById("bild").style;
var fuerb = document.getElementById("fbild");
var beikl = "start";
var xmaus = 0;
var ymaus = 0;
var magtp = 0;
var maglf = 0;
var bhpro = 0;
var bwpro = 0;

var zaehle = 3;        // Anfangswert 3
var zoome  = 30;       // Anfangswert 30% von max
var bildho = 1318;     // max Hoehe der Grafik
var bildwe = 1750;     // max Weite der Grafik
var klhoeh =  395;     // Anfangshoehe / Div-Bereich
var klweit =  525;     // Anfangsweite / Div-Bereich
var halbeh =  197.5;   // Haelfte der Anfangshoehe / Haelfte Div-Bereichs
var halbew =  262.5;   // Haelfte der Anfangsweite / Haelfte Div-Bereichs

/* -- Funktion zur Abfrage der gegenwaertigen Position und Abstaende --- */

function posSpeichere() {

    fuerb.onclick = function(maus) {

        if (typeof(window.event) != "undefined") {
            xmaus = window.event.clientX;
            ymaus = window.event.clientY;
        }
        else {
            xmaus = maus.pageX;
            ymaus = maus.pageY;
        }

        if (typeof(begre.marginTop) != "undefined" || typeof(begre.marginLeft) != "undefined") {
            magtp = begre.marginTop;
            maglf = begre.marginLeft;
            magtp = parseInt(magtp, 10);
            maglf = parseInt(maglf, 10);
        }
    }
}

/* -----------------------------------------------------------------------
 Funktion zum Verschieben mit Neuberechnung der Abstaende und mit einer
 Berechnung, zu wie viel Prozent ein Bild verschoben wurde. Weiterhin
 mit einer Begrenzung der min- und maximalen ausseren Abstaende.
 -------------------------------------------------------------------------
*/

function posSchiebe() { 
    beikl = "stopp";
    var ediv, xediv, yediv, seitl, obenl, ueberwe, ueberho;

    fuerb.onmousemove = function(ediv) {

        if (typeof(window.event) != "undefined") {
            xediv = window.event.clientX;
            yediv = window.event.clientY;
        }
        else {
            xediv = ediv.pageX;
            yediv = ediv.pageY;
        }
        seitl = (xediv - xmaus) + maglf;
        obenl = (yediv - ymaus) + magtp;

        if (begre.width) ueberwe = begre.width;
        else ueberwe = bildwe;

        if (begre.height) ueberho = begre.height;
        else ueberho = bildho;

        ueberwe = parseInt(ueberwe, 10);
        ueberho = parseInt(ueberho, 10);

        var zeigefo = (obenl *-1) + halbeh;
        var zeigeao =  Math.round(((zeigefo * 100) / ueberho) * 100);
        bhpro =  zeigeao / 100;

        var zeigefp = (seitl *-1) + halbew;
        var zeigean =  Math.round(((zeigefp * 100) / ueberwe) * 100);
        bwpro =  zeigean / 100;

        if (seitl > 0) seitl = -0.5;
        if (obenl > 0) obenl = -0.5;

        var maxhoe = (ueberho - klhoeh) *-1;
        var maxwei = (ueberwe - klweit) *-1;

        if (obenl < maxhoe)  obenl = maxhoe;
        if (seitl < maxwei)  seitl = maxwei;

        begre.marginLeft = seitl + "px";
        begre.marginTop  = obenl + "px";
    }
}

/* -- Funktion zum Aufruf der Funktion posSchiebe() -------------------- */

function posVerschiebe() {

    posSpeichere();

    if (beikl == "start") posSchiebe();
    else {
        beikl = "start";
        fuerb.onmousemove = null;
    }

    fuerb.onmouseout = function() {
        if (beikl == "stopp") {
            beikl = "start";
            fuerb.onmousemove = null;
        }
    }
}

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

function imageMovi() { 
    var zoomew, zoomeh, aboben, abseite;

    zoomew = Math.round((bildwe / 100) * zoome);
    zoomeh = Math.round((bildho / 100) * zoome);
    begre.width  = zoomew + "px";
    begre.height = zoomeh + "px";

    if (bhpro > 0) {
        aboben  = Math.round(-(((((bildho / 100) * zoome) / 100) * bhpro) -halbeh));
    }
    else {
        aboben = Math.round(-(((bildho / 100) * zoome) -klhoeh)/2);
    }

    if (bwpro > 0) {
        abseite  = Math.round(-(((((bildwe / 100) * zoome) / 100) * bwpro) - halbew));
    }
    else {abseite = Math.round(-(((bildwe / 100) * zoome) -klweit)/2);
    }
        
    if (aboben >= 0)  aboben  = 0;
    if (abseite >= 0) abseite = 0;

    var seitkor = (zoomew - klweit) *-1;
    var obenkor = (zoomeh - klhoeh) *-1;

    if (abseite < seitkor) abseite = seitkor;
    if (aboben < obenkor)  aboben  = obenkor;

    begre.marginTop  = aboben + "px";
    begre.marginLeft = abseite + "px";
}

/* -- Funktion zum 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();   // Aufruf der Kernfunktion
    }
    var stoppe = zaehle * 10;

    if (zoome >= stoppe || zoome >= 100) window.clearTimeout(stopzoom);
}
function plusZoom() {
    document.getElementById("bild").src = "alaska-1750.jpg";
    stoppeZoom1();
    rufeZoom1();
}

/* -- Funktion zum Verkleinern ----------------------------------------- */

function stoppeZoom2() {
    zaehle--;

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

    if (zoome < 30) zoome = 30;
    else {
        var stopzoom = window.setTimeout("rufeZoom2()", 40);
        imageMovi();   // Aufruf der Kernfunktion
    }
    var stoppe = zaehle * 10;

    if (zoome <= stoppe || zoome <= 20) window.clearTimeout(stopzoom);
}
function minusZoom() {
    stoppeZoom2();
    rufeZoom2();
}

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

Sollte Ihnen unser Tutorial gefallen haben, so würden wir uns über einen Verweis oder eine Weiterempfehlung freuen.

Funktionsweise und Prinzip « zurück

Navigation

Einstieg in JavaScript

Einführende Übersicht

Syntax und Variablen

Tutorials & Demos

Zoomen u. Verschieben

Zoomfunktionen und ...

Weitere Themen

Übersicht